centrar web al centro

fjchavez · #1 (**permalink**) 11/01/2008, 13:06

Hola a todos, estoy creando una web, que posteriormente quiero convertirla en plantilla para joomla y quisiera que la web este centrada al medio.
He creado mi interfaz en photoshop y lo he guardado como web y no estoy trabajando con tablas sino con <div>.
La cuestion es que he creado mi css y no puedo centrar la web al medio.
Gracias por su ayuda de antemano
Aca posteo el codigo:

Código HTML:

<html>

<head>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="contenedor">
        <div id="top-enlace"></div>
        <div id="top-fig-1"></div>
        <div id="top-buscar"></div>
        <div id="top-medio-izq"></div>
        <div id="logo"></div>
        <div id="top-medio-der"></div>
        <div id="top-abajo-path"></div>
        <div id="top-fig-2"></div>
        <div id="top-fig-3"></div>
        <div id="menu-izq"></div>
        <div id="cuerpo"></div>
        <div id="menu-der"></div>
        <div id="pie"></div>
</div>
</body>

</html>

estilo.css

Código:

#contenedor {
        position:absolute;
        top:0;
        left:0;
        width:780px;
        height:600px;
}

#top-enlace {
        position:absolute;
        left:0px;
        top:0px;
        width:364px;
        height:28px;
        background: url(../images/top_enlace.gif)
}

#top-fig-1 {
        position:absolute;
        left:364px;
        top:0px;
        width:227px;
        height:28px;
        background: url(../images/top_fig_1.gif)
}

#top-buscar {
        position:absolute;
        left:591px;
        top:0px;
        width:189px;
        height:44px;
        background: url(../images/top_buscar.gif)
}

#top-medio-izq {
        position:absolute;
        left:0px;
        top:28px;
        width:180px;
        height:142px;
        background: url(../images/top_medio_izq.gif)
}

#logo {
        position:absolute;
        left:180px;
        top:28px;
        width:411px;
        height:142px;
        background: url(../images/logo.gif)
}

#top-medio-der {
        position:absolute;
        left:591px;
        top:44px;
        width:189px;
        height:142px;
        background: url(../images/top_medio_der.gif)
}

#top-abajo-path {
        position:absolute;
        left:0px;
        top:170px;
        width:423px;
        height:29px;
        background: url(../images/top_abajo_path.gif)
}

#top-fig-2 {
        position:absolute;
        left:423px;
        top:170px;
        width:168px;
        height:29px;
        background: url(../images/top_fig_2.gif)
}

#top-fig-3 {
        position:absolute;
        left:591px;
        top:186px;
        width:189px;
        height:13px;
        background: url(../images/top_fig_3.gif)
}

#menu-izq {
        position:absolute;
        left:0px;
        top:199px;
        width:180px;
        height:361px;
        background: url(../images/menu_izq.gif)
}

#cuerpo {
        position:absolute;
        left:180px;
        top:199px;
        width:411px;
        height:361px;
        background: url(../images/cuerpo.gif)
}

#menu-der {
        position:absolute;
        left:591px;
        top:199px;
        width:189px;
        height:361px;
        background: url(../images/menu_der.gif)
}

#pie {
        position:absolute;
        left:0px;
        top:560px;
        width:780px;
        height:40px;
        background: url(../images/pie.jpg)
}

feral · #2 (**permalink**) 11/01/2008, 14:01

Para centrar un div contenedor hay que aplicarle margen derecho e izquierdo con valor auto y especificar un width.
El explorer no sabe centrar y a parte de hacer lo comentado arriba hay que utilizar un hack que consiste en especificar text align: center en el body y posteriormente si se quiere cambiar el alineado especificarlo en los subsiguientes bloques.

Código:

body { text-align: center; }

div#contenedor { width: 980px; margin: 15px auto 0 auto; text-align: left ; }

*IE6 & 7 si centran con el metodo normal si la pagina es fiel a los estandares y no esta en modo quirks.

fjchavez · #3 (**permalink**) 11/01/2008, 14:26

pues esta con los atributos margin: 0 auto; pero no los centra, estoy usando firefox no el ie

juandf18 · #4 (**permalink**) 11/01/2008, 14:40

http://www.dynamicdrive.com/style/layouts/

en este sitio podes ver como centrar en css para firefox

feral · #5 (**permalink**) 11/01/2008, 14:48

Cita:

Iniciado por fjchavez

pues esta con los atributos margin: 0 auto; pero no los centra, estoy usando firefox no el ie

Con el firefox un margin iz. y der. a auto y a la vez especificar un width , te centra perfectamente.

*Si utilizas posicionamiento absoluto para tus divs este metodo probablemente no funcionara correctamente , y tendras que centrar los elementos a "ojo"con top, left , right.. de todas formas usando pocionamientos absoluto no se tiene mucha flexibilidad y se puede convertir todo en un buen cacao. Quizas deberias cambiar la estrategia e intentar colocar tus divs mediante flujo normal y flotamientos, de esta manera se pueden centrar bien las cosas y hay mas control en mi opinion.

aloqui · #6 (**permalink**) 11/01/2008, 15:06

Si no consigues solucionarlo con CSS. Como último recurso siempre probar la siguiente chapuzilla:

Código:

<body>
  <center>
    <div id="contenedor">
    ....
    </div>
  </center>
</body>

fjchavez · #7 (**permalink**) 11/01/2008, 15:33

juandf18 y aloqui, buenas soluciones alternativas.

feral, el width tb lo especifico, la cuestion es k no centra la web.
Ahora quiero tomar encuenta tu sugerencia, pero quisiera me explicaras(en codigo css) como deberia ser?? (recien empiezo en esto y ando un poco confundido).

Cita:

Iniciado por feral

Con el firefox un margin iz. y der. a auto y a la vez especificar un width , te centra perfectamente.

*Si utilizas posicionamiento absoluto para tus divs este metodo probablemente no funcionara correctamente , y tendras que centrar los elementos a "ojo"con top, left , right.. de todas formas usando pocionamientos absoluto no se tiene mucha flexibilidad y se puede convertir todo en un buen cacao. Quizas deberias cambiar la estrategia e intentar colocar tus divs mediante flujo normal y flotamientos, de esta manera se pueden centrar bien las cosas y hay mas control en mi opinion.

Trutxof · #8 (**permalink**) 11/01/2008, 16:12

prueba modificando un poco el contenedor:

#contenedor {
position:absolute;
top:0;
left:50%;
margin-left:-390px;
width:780px;
height:600px;
}

De todos modos acostumbrate a trabajar con position:relative siempre que puedas

Salu2

feral · #9 (**permalink**) 11/01/2008, 16:46

Cita:

feral, el width tb lo especifico, la cuestion es k no centra la web.
Ahora quiero tomar encuenta tu sugerencia, pero quisiera me explicaras(en codigo css) como deberia ser?? (recien empiezo en esto y ando un poco confundido).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>


<style type="text/css" media="all">
<!-- 
#contenedor { width: 600px; margin: 15px auto 0 auto;  background-color:#CCCCCC; }
-->
</style>

</head>

<body>

<div id="contenedor">
hola
</div>

</body>
</html>

fjchavez · #10 (**permalink**) 11/01/2008, 18:38

Pues eso si me funciona muy bien, creo que no me estoy explicando bien

.
El div#contenedor se centra al medio muy bien, pero los div dentro del div#contenedor siguen en su misma posicion.

Queda allgo asi

Trutxof · #11 (**permalink**) 12/01/2008, 00:36

A ver, ese es el problema de las posiciones absolutas. Que cada uno queda donde tu lo coloques independientemente de lo que haga el resto. Llegado ha este punto tienes dos opciones:

1ª.- Mantener las posiciones absolutas, he ir colocando una por una las capas donde tu quieras (y despues cambiar la resolucion de tu monitor

)

2ª- Empezar de 0, con posiciones relativas.

A tu elección queda...

Salu2

fjchavez · #12 (**permalink**) 12/01/2008, 14:58

gracias a todos, lo solucione asi:

Código:

#contenedor {
        position:relative;
        margin:0 auto;
        width:780px;
        height:600px;
        background-color:olive;  
}

y manteniendo el resto de estilos igual.

BLACKANAME · #13 (**permalink**) 10/02/2009, 14:39

No se si alguien ya respondio esta pregunta, pero el problema para centrar las paginas cuando no usas estilos css y traes una plantilla maqueteada desde photoshop es tan sencillo y simple que deberia dar risa.

Aca voy a poner unas lineas y lo que le faltaria para que estuviera en el centro en todos los broser:

// -->
</script>
</head>
<body bgcolor="#E6E6E6" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="text-align: center" onload="FP_preloadImgs(/*url*/'imagenes_index/images/boton_01b.jpg', /*url*/'imagenes_index/images/boton_02b.jpg', /*url*/'imagenes_index/images/boton_03b.jpg', /*url*/'imagenes_index/images/boton_04b.jpg', /*url*/'imagenes_index/images/boton_05b.jpg', /*url*/'imagenes_index/images/boton_06b.jpg', /*url*/'imagenes_index/images/boton_asistencia2.jpg', /*url*/'imagenes_index/images/boton_profesores2.jpg', /*url*/'imagenes_index/images/boton_news2.jpg')" rightmargin="0" bottommargin="0">

<div align="center">



Esta es la linea que siempre falta, <div align="center">, para que nuestras paginas se vean alineadas en los broser existentes, (ojo entodos)

Espero les sirva,

Atte.

BLACKNAME

Mikmoro · #14 (**permalink**) 10/02/2009, 16:47

Cita:

Iniciado por BLACKANAME

No se si alguien ya respondio esta pregunta, pero el problema para centrar las paginas cuando no usas estilos css y traes una plantilla maqueteada desde photoshop es tan sencillo y simple que deberia dar risa.

Tienes razón, es tan simple que da risa

Dalvenjha · #15 (**permalink**) 10/02/2009, 22:53

A mi me ha dado miedo ...

jomaruro · #16 (**permalink**) 11/02/2009, 14:29

Hola:

Y yo (que soy novato) no sé cuantas veces lo he leido ya.

Saludos.

ehgq · #17 (**permalink**) 09/08/2010, 01:49

Cita:

Iniciado por BLACKANAME

No se si alguien ya respondio esta pregunta, pero el problema para centrar las paginas cuando no usas estilos css y traes una plantilla maqueteada desde photoshop es tan sencillo y simple que deberia dar risa.

Aca voy a poner unas lineas y lo que le faltaria para que estuviera en el centro en todos los broser:

// -->
</script>
</head>
<body bgcolor="#E6E6E6" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="text-align: center" onload="FP_preloadImgs(/*url*/'imagenes_index/images/boton_01b.jpg', /*url*/'imagenes_index/images/boton_02b.jpg', /*url*/'imagenes_index/images/boton_03b.jpg', /*url*/'imagenes_index/images/boton_04b.jpg', /*url*/'imagenes_index/images/boton_05b.jpg', /*url*/'imagenes_index/images/boton_06b.jpg', /*url*/'imagenes_index/images/boton_asistencia2.jpg', /*url*/'imagenes_index/images/boton_profesores2.jpg', /*url*/'imagenes_index/images/boton_news2.jpg')" rightmargin="0" bottommargin="0">

<div align="center">



Esta es la linea que siempre falta, <div align="center">, para que nuestras paginas se vean alineadas en los broser existentes, (ojo entodos)

Espero les sirva,

Atte.

BLACKNAME

He realizado una web con photoshop y al guardarla como web me aparece completamente a la izquierda y me gustaria que estuviese centrada. Creo que es a lo que respondias en este foro pero no se donde debo poner el <div align="center"> dentro del codigo.
Si pudieras ayudarme te lo agradeceria mucho por favor!!

Muchas Gracias de antemano y un saludo!!!!

Esta es la web:

http://www.casonadebabia.com/estinser/001.html

y este es el codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>nueva stinser 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

</style>

</head>
<body style="background-color:#122939;">
<span style="text-align: center"></span>

<div id="Tabla_01">
<div id="id001-01_">
<img id="id001_01" src="images001/001_01.jpg" width="62" height="1810" alt="" />
</div>
<div id="id001-02_">
<img id="id001_02" src="images001/001_02.jpg" width="988" height="184" alt="" />
</div>
<div id="id001-03_">
<img id="id001_03" src="images001/001_03.jpg" width="70" height="1810" alt="" />
</div>
<div id="id001-04_">
<img id="id001_04" src="images001/001_04.jpg" width="683" height="70" alt="" />
</div>
<div id="id001-05_">
<img id="id001_05" src="images001/001_05.jpg" width="305" height="70" alt="" />
</div>
<div id="id001-06_"></div>
<div id="id001-07_">
<img id="id001_07" src="images001/001_07.jpg" width="988" height="67" alt="" />
</div>
<div id="id001-08_">
<img id="id001_08" src="images001/001_08.jpg" width="666" height="344" alt="" />
</div>
<div id="id001-09_">
<img id="id001_09" src="images001/001_09.jpg" width="322" height="344" alt="" />
</div>
<div id="id001-10_">
<img id="id001_10" src="images001/001_10.jpg" width="988" height="31" alt="" />
</div>
<div id="id001-11_">
<img id="id001_11" src="images001/001_11.jpg" width="32" height="96" alt="" />
</div>
<div id="id001-12_">
<img id="id001_12" src="images001/001_12.jpg" width="272" height="96" alt="" />
</div>
<div id="id001-13_">
<img id="id001_13" src="images001/001_13.jpg" width="50" height="96" alt="" />
</div>
<div id="id001-14_">
<img id="id001_14" src="images001/001_14.jpg" width="272" height="96" alt="" />
</div>
<div id="id001-15_">
<img id="id001_15" src="images001/001_15.jpg" width="57" height="96" alt="" />
</div>
<div id="id001-16_">
<img id="id001_16" src="images001/001_16.jpg" width="272" height="96" alt="" />
</div>
<div id="id001-17_">
<img id="id001_17" src="images001/001_17.jpg" width="33" height="96" alt="" />
</div>
<div id="id001-18_">
<img id="id001_18" src="images001/001_18.jpg" width="661" height="347" alt="" />
</div>
<div id="id001-19_">
<img id="id001_19" src="images001/001_19.jpg" width="327" height="507" alt="" />
</div>
<div id="id001-20_"><img id="id001_20" src="images001/001_20.jpg" width="661" height="160" alt="" /></div>
<div id="id001-21_">
<img id="id001_21" src="images001/001_21.jpg" width="988" height="231" alt="" />
</div>
</div>

</body>
</html>