Foros del Web » Creando para Internet » CSS »

centrar web al centro

Estas en el tema de centrar web al centro en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/01/2008, 13:06
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
centrar web al centro

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)
}
  #2 (permalink)  
Antiguo 11/01/2008, 14:01
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: centrar web al centro

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.

Última edición por feral; 11/01/2008 a las 15:10
  #3 (permalink)  
Antiguo 11/01/2008, 14:26
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
Re: centrar web al centro

pues esta con los atributos margin: 0 auto; pero no los centra, estoy usando firefox no el ie
  #4 (permalink)  
Antiguo 11/01/2008, 14:40
 
Fecha de Ingreso: diciembre-2007
Mensajes: 37
Antigüedad: 10 años
Puntos: 0
Re: centrar web al centro

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

en este sitio podes ver como centrar en css para firefox
  #5 (permalink)  
Antiguo 11/01/2008, 14:48
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: centrar web al centro

Cita:
Iniciado por fjchavez Ver Mensaje
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.

Última edición por feral; 11/01/2008 a las 15:12
  #6 (permalink)  
Antiguo 11/01/2008, 15:06
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 10 años
Puntos: 24
Re: centrar web al centro

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

Código:
<body>
  <center>
    <div id="contenedor">
    ....
    </div>
  </center>
</body>
__________________
Grupos de Música
Pop Music Stars
  #7 (permalink)  
Antiguo 11/01/2008, 15:33
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
Re: centrar web al centro

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 Ver Mensaje
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.
  #8 (permalink)  
Antiguo 11/01/2008, 16:12
 
Fecha de Ingreso: agosto-2006
Mensajes: 191
Antigüedad: 11 años, 4 meses
Puntos: 3
Re: centrar web al centro

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
__________________
El mejor consejo lo da la experiencia, aunque este siempre llega tarde.
Cacharreando con Joomla
  #9 (permalink)  
Antiguo 11/01/2008, 16:46
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: centrar web al centro

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> 
  #10 (permalink)  
Antiguo 11/01/2008, 18:38
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
Re: centrar web al centro

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

  #11 (permalink)  
Antiguo 12/01/2008, 00:36
 
Fecha de Ingreso: agosto-2006
Mensajes: 191
Antigüedad: 11 años, 4 meses
Puntos: 3
Re: centrar web al centro

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
__________________
El mejor consejo lo da la experiencia, aunque este siempre llega tarde.
Cacharreando con Joomla
  #12 (permalink)  
Antiguo 12/01/2008, 14:58
 
Fecha de Ingreso: julio-2006
Mensajes: 114
Antigüedad: 11 años, 5 meses
Puntos: 0
De acuerdo Re: centrar web al centro

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.
  #13 (permalink)  
Antiguo 10/02/2009, 14:39
 
Fecha de Ingreso: febrero-2009
Mensajes: 1
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: centrar web al centro

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">

<!-- ImageReady Slices (index.psd) -->

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
  #14 (permalink)  
Antiguo 10/02/2009, 16:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: centrar web al centro

Cita:
Iniciado por BLACKANAME Ver Mensaje
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
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 10/02/2009, 22:53
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: centrar web al centro

A mi me ha dado miedo ...
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #16 (permalink)  
Antiguo 11/02/2009, 14:29
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: centrar web al centro

Hola:

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

Saludos.

  #17 (permalink)  
Antiguo 09/08/2010, 02:49
 
Fecha de Ingreso: agosto-2010
Mensajes: 3
Antigüedad: 7 años, 4 meses
Puntos: 0
Ayudame por favor me estoy volviendo loco!!!

Cita:
Iniciado por BLACKANAME Ver Mensaje
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">

<!-- ImageReady Slices (index.psd) -->

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" />
<!-- Save for Web Styles (nueva stinser 1.psd) -->
<style type="text/css">
<!--

#Tabla_01 {
position:absolute;
left:0px;
top:0px;
width:1120px;
height:1810px;
text-align: center;
}

#id001-01_ {
position:absolute;
left:0px;
top:0px;
width:62px;
height:1810px;
}

#id001-02_ {
position:absolute;
left:62px;
top:0px;
width:988px;
height:184px;
}

#id001-03_ {
position:absolute;
left:1050px;
top:0px;
width:70px;
height:1810px;
}

#id001-04_ {
position:absolute;
left:62px;
top:184px;
width:683px;
height:70px;
}

#id001-05_ {
position:absolute;
left:745px;
top:184px;
width:305px;
height:70px;
}

#id001-06_ {
position:absolute;
left:62px;
top:254px;
width:988px;
height:280px;
}

#id001-07_ {
position:absolute;
left:62px;
top:534px;
width:988px;
height:67px;
}

#id001-08_ {
position:absolute;
left:62px;
top:601px;
width:666px;
height:344px;
}

#id001-09_ {
position:absolute;
left:728px;
top:601px;
width:322px;
height:344px;
}

#id001-10_ {
position:absolute;
left:62px;
top:945px;
width:988px;
height:31px;
}

#id001-11_ {
position:absolute;
left:62px;
top:976px;
width:32px;
height:96px;
}

#id001-12_ {
position:absolute;
left:94px;
top:976px;
width:272px;
height:96px;
}

#id001-13_ {
position:absolute;
left:366px;
top:976px;
width:50px;
height:96px;
}

#id001-14_ {
position:absolute;
left:416px;
top:976px;
width:272px;
height:96px;
}

#id001-15_ {
position:absolute;
left:688px;
top:976px;
width:57px;
height:96px;
}

#id001-16_ {
position:absolute;
left:745px;
top:976px;
width:272px;
height:96px;
}

#id001-17_ {
position:absolute;
left:1017px;
top:976px;
width:33px;
height:96px;
}

#id001-18_ {
position:absolute;
left:62px;
top:1072px;
width:661px;
height:347px;
}

#id001-19_ {
position:absolute;
left:723px;
top:1072px;
width:327px;
height:507px;
}

#id001-20_ {
position:absolute;
left:62px;
top:1419px;
width:661px;
height:160px;
}

#id001-21_ {
position:absolute;
left:62px;
top:1579px;
width:988px;
height:231px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#122939;">
<span style="text-align: center"></span>
<!-- Save for Web Slices (nueva stinser 1.psd) -->
<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>
<!-- End Save for Web Slices -->
</body>
</html>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:05.