Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] No logro centrar la página en firefox.

Estas en el tema de No logro centrar la página en firefox. en el foro de CSS en Foros del Web. Hola a todos. Mi problema es que estoy tratando de centrar mi página con css para firefox y resulta que la propiedad margin:0 auto; no ...
  #1 (permalink)  
Antiguo 29/06/2014, 04:11
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 10 años, 10 meses
Puntos: 2
No logro centrar la página en firefox.

Hola a todos.
Mi problema es que estoy tratando de centrar mi página con css para firefox y resulta que la propiedad margin:0 auto; no me está funcionando y no sé por qué ya que ya consulté el soporte de css de firefox y mi código aparentemente está bién.

Les adjunto el código para que me puedan asesorar.
Gracias a todos desde ya.

Archivo html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html name = "inicio" >
<head>
<title>Ventas Reino.</title>
<script type="text/javascript" id="codigo" src="funciones_web.js" >
</script>
</head>
<body onload="navegador();" >
<br>
<div id="pagina">
<div id="cabecera" >
<ul id="menu" >
<li onmouseover="desplegar('menu_capilares');" onmouseout="enrollar('menu_capilares');"><a href="">Capilares</a></li>
<li onmouseover="desplegar('cuidado_facial');" onmouseout="enrollar('cuidado_facial');"><a href="">Cuidado facial</a></li>
<li onmouseover="desplegar('cuidado_corporal');" onmouseout="enrollar('cuidado_corporal');"><a href="">Cuidado corporal</a></li>
<li><a href="" >Chicos</a></li>
<li onmouseover="desplegar('Belleza_interior');" onmouseout="enrollar('Belleza_interior');" ><a href="">Belleza interior</a></li>
<li onmouseover="desplegar('fragancias');" onmouseout="enrollar('fragancias');" ><a href="">Fragancias</a></li>
<li><a href="" >Aromas</a></li>
<li onmouseover="desplegar('reino_beauty');" onmouseout="enrollar('reino_beauty');" ><a href="">Reino beauty</a></li>
</ul>

<ul id="menu_capilares" onmouseover="desplegar('menu_capilares');" onmouseout="enrollar('menu_capilares');">
<li><a href="Capilares/Almendras/bano_de_crema_con_jojoba_y_almendras_DA101.html" > L&iacute;nea almendras</a></li>
<li><a href="Capilares/Bamboo/shampoo_bamboo_ultrahidratante_CI102.html" > L&iacute;nea bamboo</a></li>
<li><a href="Capilares/Hair_solutions/shampoo_de_aminoacidos_HS103.html" > L&iacute;nea hair solutions</a></li>
<li><a href="Capilares/Henna/shampoo_henna_OC106.html" > L&iacute;nea henna</a></li>
<li><a href="Capilares/Lino/shampoo_con_extracto_de_semillas_de_lino_LN100.htm l" > L&iacute;nea lino</a></li>
<li><a href="Capilares/Ortiga/locion_tonica_anticaida_del_cabello_OC102.html" > L&iacute;nea ortiga</a></li>
</ul>
<ul id="cuidado_facial" onmouseover="desplegar('cuidado_facial')" onmouseout="enrollar('cuidado_facial');">
<li><a href="Lifting_hidratante.html" >Lifting hidratante</a></li>
<li><a href="Antioxidante.html" >Antioxidante</a></li>
<li><a href="Phytoactiva.html" >Phytoactiva</a></li>
<li><a href="Rejuvalene.html" >Rejuvalene</a></li>
<li><a href="Nectar.html" >Nectar</a></li>
<li><a href="Collagenesse.html" >Collagenesse</a></li>
<li><a href="Tratamiento.html" >Tratamiento</a></li>
<li><a href="Dyamante_cell.html" >Dyamante cell</a></li>
<li><a href="Abyssine.html" >Abyssine</a></li>
<li><a href="Hidracalme.html" >Hidracalme</a></li>
<li><a href="Time_release.html" >Time release</a></li>
<li><a href="H20_termal.html" >H20 termal</a></li>
<li><a href="Acai.html" >Açai</a></li>
<li><a href="Spa.html" >Spa</a></li>
</ul>
<ul id="cuidado_corporal" onmouseover="desplegar('cuidado_corporal');" onmouseout="enrollar('cuidado_corporal');" >
<li><a href="Citrus.html" >Citrus</a></li>
<li><a href="Golden_sun.html" >Golden sun</a></li>
<li><a href="Mantecas_corporales.html" >Mantecas corporales</a></li>
<li><a href="Seda.html" >Seda</a></li>
<li><a href="Top_modeling.html" >Top modeling</a></li>
<li><a href="Triple_accion.html" >Triple acci&oacute;n</a></li>
<li><a href="Camila.html" >Camila</a></li>
<li><a href="Propoleos_b.html" >Prop&oacute;leos b</a></li>
<li><a href="Blueberry.html" >Blueberry</a></li>
<li><a href="Eucalyptus.html" >Eucalyptus</a></li>
<li><a href="Beauty_feet.html" >Beauty feet</a></li>
</ul>
<ul id="reino_beauty" onmouseover="desplegar('reino_beauty');" onmouseout="enrollar('reino_beauty');">
<li><a href="Ojos.html" >Ojos</a></li>
<li><a href="Labios.html" >Labios</a></li>
<li><a href="Rostro.html" >Rostro</a></li>
<li><a href="Manos.html" >Manos</a></li>
</ul>
<ul id="fragancias" onmouseover="desplegar('fragancias');" onmouseout="enrollar('fragancias');">
<li><a href="Femeninas.html" >Femeninas</a></li>
<li><a href="Masculinas.html" >Masculinas</a></li>
</ul>
<ul id="Belleza_interior" onmouseover="desplegar('Belleza_interior');" onmouseout="enrollar('Belleza_interior');" >
<li><a href="Eco_reino.html" >Eco reino</a></li>
<li><a href="Infusiones.html" >Infusiones</a></li>
<li><a href="Propoleos_plus.html" >Prop&oacute;leos plus</a></li>
<li><a href="Suplementos.html" >Suplementos</a></li>
</ul>
</div>
<div id="productos" >
<div id="imagenes" >
<a href="../../index.html" ><img src="Capilares/Almendras/da101.jpg" alt="Ba&nacute;o de crema con jojoba y almendras."></a>
<a href="Capilares/Almendras/acondicionador_de_almendras_DA103.html" ><img src="Capilares/Almendras/da103.jpg" alt="Acondicionador de almendras."></a>
</div>
<div id="contenido" >
<p>Capilares > ALMENDRAS</p>
<p>BA&Ntilde;O DE CREMA CON JOJOBA Y ALMENDRAS</p>
<p>Su f&oacute;rmula enriquecida con aceite de almendras dulces y aceite de jojoba penetra en la fibra capilar, humect&aacute;ndola. As&iacute;, nutre, repara e hidrata profundamente el cabello, especialmente en las zonas castigadas. Devuelve el nivel de hidrataci&oacute;n ideal, dejando el cabello suave, brillante y protegido. Apto para todo tipo de cabellos da&ntilde;ados por agresiones ambientales o qu&iacute;micas.</p>
<p>COD: DA101 | 200g</p>
<p>$ 69.9</p>
<a href="" id="comprar" onclick="cargar_chango('Ba&ntilde;o de crema con jojoba y almendras.');" >Comprar</a>
</div>
</div>
</div>
</body>
</html>

Archivo css:

/* Cabecera */

#pagina {
position:relative;
width:960px;
}

#cabecera {
position:absolute;
padding:6px 0px;
width:960px;
z-index:6;
margin:0 auto;
}

#menu {
position:absolute;
margin:0 auto;
}

ul li {
list-style:none;
background-color:lime;
font-size:1.28em;
padding:7px 9px;
}

ul li a {
text-decoration:none;
}

ul#menu li {
float:left;
}

ul li:hover {
background-color:yellow;
}

#menu_capilares,#cuidado_facial,#cuidado_corporal, #reino_beauty,#fragancias,#Belleza_interior {
position:absolute;
display:none;
top:26px;
z-index:1;
}

#cuidado_facial {
left:10%;
}

#cuidado_corporal {
left:24%;
}

#Belleza_interior {
width:141px;
left:48%;
}

#reino_beauty {
width:120px;
left:82%;
}

#fragancias {
width:105px;
left:62.7%;
}
/* Productos */
#productos {
margin:0 auto;
position:relative;
width:900px;
top:6.25em;
}

#imagenes {
margin-left:35%;
border:none; /*ie 8*/
}

img {
border:none; /* Para ie 8 */
}

a:visited {
color:blue;
}

#contenido {
width:900px;
font-size:1.28em;
padding:0px 15px;
}

Gracias a todos.
  #2 (permalink)  
Antiguo 29/06/2014, 10:28
Avatar de herzbazi  
Fecha de Ingreso: febrero-2012
Mensajes: 612
Antigüedad: 12 años, 9 meses
Puntos: 36
Sonrisa Respuesta: No logro centrar la página en firefox.

OJO según entiendo quieres centrar la pagina completa en cualquier navegador correcto?


de ser así seguro que
Código CSS:
Ver original
  1. margin:0 auto;
tiene que funcionarte. lo que pasa es que si te das cuenta en tu codigo en el #cabecera tienes el
Código CSS:
Ver original
  1. margin:0 auto;
. pero recuerda que para centrar la web tienes que ponerle el margin al contenedor que en tu caso es #pagina

ponlo así y me cuentas si te funciona --

Código CSS:
Ver original
  1. #pagina {
  2. position:relative;
  3. width:960px;
  4. margin: 0 auto;
  5. }
__________________
Enseña todo lo que sepas...
Aprende todo lo que puedas..

Última edición por herzbazi; 29/06/2014 a las 10:29 Razón: highling
  #3 (permalink)  
Antiguo 29/06/2014, 19:34
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 10 años, 10 meses
Puntos: 2
Respuesta: No logro centrar la página en firefox.

¡Hola Herzbazi! Gracias por tu respuesta y por haberme ayudado.
Te comento que la solución funcionó de maravilla,aunque todavía no la probé en ie.
Instalé windows 7 ultimate 32 bits en una máquina virtual con virtualbox para poder usar ie11 con el modo desarrollador para probar el resto de versiones de ie.
Pero todavía me falta instalar ie11 en la vm.

Lo que me llama la atención es que tu consejo funcionó.
Yo tengo un libro pdf de css inicial y avanzado que seguramente habrás visto,está disponible para la descarga en internet.Ahí dice que las coordenadas de origen de movimiento de un elemento posicionado de forma absoluta,es el origen de coordenadas del primer elemento ancestro que esté posicionado de cualquier forma que no sea position:static;
Resulta que mi elemento #cabecera es el que está dentro del ancestro #pagina que es el que está posicionado de otra manera diferente de static.Por eso esperaba que mi manera funcionara.Ahora veo que era un problema de comprensión de la forma de trabajo de css.
Te agradezco mucho la ayuda.
Voy a marcar el tema como solucionado pero antes ,te quiero preguntar lo siguiente:Resulta que para poder ver la posicion que ocupan en pantalla de cada uno de esos elementos ,probé de ponerles color de fondo para diferenciarlos del blanco.Y me encuentro que el menú ,a pesar de que yo no lo desplazo con right ni left,top o bottom ,sin embargo,el menú aparece mas a la derecha de lo que esperaría.Esto lo ví colocando en #pagina "background-color:blue;".Me doy cuenta de que el menú esta algo desplazado hacia la izquierda dentro del elemento #cabecera que a su vez está en #pagina.
Visualmente,y sin ponerles color de fondo,se ve centrado.Pero si lo coloreo ,no.
Se supone que el origen de coordenada de los elementos "absolute" es el origen de coordenadas de su elemento padre;o sea que estoy entendiendo que el origen de coordenadas de menú es el mismo (coinciden geométricamente su vértice superior izquierdo) que el del elemento padre.
¿Cómo se entiende eso?

Nuevamente te agradezco por tu ayuda.Me ayudaste a dar un paso que necesitaba en mi camino como maquetador web.

¡Gracias!.
  #4 (permalink)  
Antiguo 30/06/2014, 01:21
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: No logro centrar la página en firefox.

Los márgenes automáticos no funcionan en elementos posicionados de forma absoluta. Y es lógico porque al salir del flujo del documento no tiene de dónde tomar referencia.

No uses posiciones absolutas para los elementos generales del sitio, es una muy mala práctica y un error común que cometen los principiantes.

Usa la opción highlight cuando publiques código.
__________________
(:
  #5 (permalink)  
Antiguo 30/06/2014, 12:29
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 10 años, 10 meses
Puntos: 2
Respuesta: No logro centrar la página en firefox.

Muchas gracias por tu ayuda y ¡perdón por mis errores de principiante!
  #6 (permalink)  
Antiguo 30/06/2014, 12:39
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 10 años, 10 meses
Puntos: 2
Respuesta: No logro centrar la página en firefox.

Ya que estoy te pido una referencia.
Leí esos dos pdf (inicial y avanzado) ,también leí la página oficial de css en el sitio www.w3.org versión en inglés y español y no encontré (o por lo menos yo) donde especificara esto que vos me decís de los márgenes automáticos.
Si estoy equivocado ¿en qué parte de la especificación oficial lo puedo encontrar?
Si no estoy equivocado ¿en qué libro puedo encontrar eso y mucho más?
Gracias por asesorarme.

Etiquetas: background, color, contenido, hover, html, página, width
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




La zona horaria es GMT -6. Ahora son las 09:13.