Hola a todos. Mi nombre es Fabián y soy más que novato en esto del diseño en html y css. Por una buena causa, me presté para aventurarme a hacer voluntariamente una web sencilla para una asociación de botánica que tiene como objeto investigar la diversidad vegetal de España sin ánimo de lucro.
Hice un diseño básico siguiendo algunos tutoriales, pero me encuentro con un *problema que, a pesar de haber intentado solucionarlo de varias formas (alinear un div, imagen, etc,),n o pude conseguir. Estoy haciendo una o muchas cosas mal, y no veo el problema donde está.
Problema: la barra de inicio o header: el título, la imagen y los botones de menú *ME QUEDAN DESALINEADOS VERTICALMENTE
Me gustaría que todos queden alineados.
A continuación os paso el código html y el de estilos, a ver si me pueden ayudar:
HTML:
<body>
<header>
<div id="subheader">
<div id="logotipo"><p><img class="thumb" src="images/logo48px.jpg" alt="Logo_FM_m_Thumb" id="floramonti"><a><span class="texto1">Flora<span><span class="texto2">montibérica<span></a></p></div>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">La revista</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Busqueda</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>
Eso es todo el menú, con el logo (imagen), el título (texto) y lo botones del menú.
en CSS puse esto:
header {
*width:100%;
*float:left;
*background:#b845c6;
*box-shadow:0px 3px 5px #8b2c97;
* *-moz-box-shadow:0px 3px 5px #8b2c97;
* *-webkit-box-shadow:0px 3px 5px #8b2c97;
}
#subheader {
*width:1200px;
*margin:auto;;
}
#logotipo {
*float:left;
*width:600px;
*padding:10px 0px;
}
#logotipo a {
* font-family:Aller Display;
}
.texto1 {color:#8b2c97; font-size:48px;}
.texto2 {color:#ffffff; font-size:48px;}
#logotipo a {text-shadow:0px 0px 5px #ffffff;
* *-moz-text-shadow:0px 0px 5px #ffffff;
* *-webkit-text-shadow:0px 0px 5px #ffffff;}
#logotipo a:hover {text-decoration:none;}
header #subheader nav {
*float:left;
*width:600px;
*padding:30px 0px;
*text-align:right;
}
header #subheader nav ul li {
*display:inline;
*font-family:quicksand;
}
header #subheader nav ul li a {
*color:#ffffff;
*font-size:14px;
*padding:10px;
* *border-radius:0px;
* *-moz-border-radius:0px;
* *-webkit-border-radius:0px;
}
header #subheader nav ul li a:hover {
*color:#ffffff;
*background:#8b2c97;
*text-decoration:none;
}
#logotipo .thumb {
*width:48px;
*height:48px;
*box-shadow:0px 0px 5px #ffffff;
* *-moz-box-shadow:0px 0px 5px #ffffff;
* *-webkit-box-shadow:0px 0px 5px #ffffff;
*margin:10px 10px 10px 10px;
}
img #floramonti {
*display:block;
*margin:auto;
}
Así es como me queda el menú de inicio:
http://i.picresize.com/UoCQ
Como veis, los elementos estan desalineados verticalmente
¡un saludo y espero vuestra respuestas!
