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>