Divs autoajustables sin ancho ni alto fijo en header

NadiaNV · #1 (**permalink**) 07/01/2014, 03:54

Muy buenas a tod@s!

Primero deciros que soy nueva en el forodelweb (registro nuevo) aunque en más de una ocasión he entrado para aclarar alguna duda en el código y realmente es una comunidad de ayuda, así que muchas gracias!!!

El motivo de mi primer tema es que me hago un lío con los DIVS que no tienen un ancho ni alto fijo, es decir, que van con %.

Muestro una imagen de lo que me gustaría lograr hacer:

Desde Mozillafirefox:
El primer problema que me encuentro es que el contenido de los divs rosas (.logotipo y .menu) no se centran verticalmente.

Desde otros navegadores (Chrome, IE...):
Todos los márgenes se descuadran...

Que estoy haciendo mal? puede ser que utilice mal los atributos position de los divs?

Hay otra forma mejor de aplicar este tipo de divs?

Pongo el código a ver si alguien me puede echar una mano, he probado distintos métodos y en el foro no encuentro nada parecido.

Gracias!!!!!

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MENU</title>
<style type="text/css">
html, body {background-color: blue;}
.header {
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 30%;
    position: fixed; 
    display: table;
	background-color:green;
} 
.contenedor {
    width: 80%; 
    height: 50%;
    position: relative; 
    display: table;
	/*margin-left: auto;	/*con position static*/
	/*margin-right: auto;	/*con position static*/
	left: 10%;	/*(100%-80%)/2 - con position absolute, relative y fixed*/
	right: 10%;	/*(100%-80%)/2 - con position absolute, relative y fixed*/
	top: 25%; /*(100%-50%)/2 - margenes verticales iguales*/
	/*margin-top: 25%;
	bottom: 25%; /*(100%-50%)/2 - margenes verticales iguales*/
	background-color: yellow;
	border: thin 2px;
}
.logotipo {
    width: 25%; 
    height: 50%;
    position: relative; 
    display: inline-table;
	float: left;
	margin-left: 0px;
	top: 25%;
	border: thin 2px;
	background-color:pink;
}
.menu {
    width: 70%; 
    height: 50%;
    position: relative; 
    display: inline-table;
	float: right;
	clear:right;
	top: 25%;
	margin-right: 0px;
	border: thin 2px;
	background-color:pink;
}
img {
    width: 50%; 
    height: auto;
    position: relative; 
    display: inline-table;
	float: left;
	margin-left: 0px;
	top: 50%;
	border: thin 2px;
	background-color:pink;
}
ul li {
  display: inline;
  float: right;
  padding-left: 10px;
  vertical-align: middle;
}
</style>
</head>

<body>

<header>
	<div class="header"> <!--VERDE-->
	<div class="contenedor"> <!--AMARILLO-->
        <div class="logotipo"><img src="img/logotipo.png"></div> <!--ROSA IZQUIERDO-->
        <div class="menu"><ul> <!--ROSA DERECHO-->
            <li class="que_es"> <a href="#">QUÉ ES</a> </li>
            <li class="como_funciona"> <a href="#">CÓMO FUNCIONA</a> </li>
            <li class="contacto"> <a href="#">CONTACTO</a> </li>    
        </ul></div>
    </div>
    </div>
</header>

</body>
</html>

g3kdigital · #2 (**permalink**) 09/01/2014, 01:05

Hola.

Pues como veo lo que necesitas básicamente te toca aprender mucho, pero fresco uno nunca termina de aprender.

Veras, no puedo responder todas tus dudas, primero empieza con algunas y luego vemos la evolución de tu proyecto.

Por ejemplo:

1) El problema de los margenes es conocido (sino me equivoco) como desbordamiento y es debido a que cada navegador interpreta a su manera el ancho de las cajas, por defecto.

Algo que soluciona esto es un "reset.css" que es un archivo que deberás descargar y linkear al head antes de la hoja de estilos personal. Yo recomiendo (e igual lo hacen en desarrolloweb) "normalicer.css" porque lo uso y me evita muchos inconvenientes.

Sí no eres amante del código ajeno, puedes empezar haciendo múltiples pruebas en diferentes navegadores hasta que des tu misma con el resultado ideal, obviamente esta es la solución a largo plazo.

También puedes probar con una regla css llamada "box-sizing" esta es con el fin de evitar muchas veces este problema. Yo [URL="http://codepen.io/g3kdigital/full/uDHtF"]aquí[/URL] hice una demo, sobre como funciona y [URL="http://codepen.io/g3kdigital/pen/uDHtF"]el código de la demo[/URL].

2) Centrado vertical, sino estas trabajando medidas porcentuales, lo primero que se me ocurre para centrar el contenedor, es colocandole al padre "header" un "padding: N% auto;" donde N es cualquier número, lo puedes, hacer con "em" que es también una medida relativa.

Y en cuanto a centrar el contenedor, creo que intentas lograr esta estructura: [URL="http://codepen.io/g3kdigital/pen/eiFrs"]http://codepen.io/g3kdigital/pen/eiFrs[/URL] la gracia es transformar los contenedores en "tablas" y a los elementos anidados en "celdas" o "filas". Sin embargo, no lo uso todavía en versiones reales porque su comportamiento hereda las mismas dificultades de cuando maquetabamos por tablas.