Los elementos del menú de inicio no se alinean verticalmente (hoja de estilos CSS)

facamez · #1 (**permalink**) 19/11/2015, 07:03

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!

juanpi2013 · #2 (**permalink**) 19/11/2015, 13:43

Prueba con display: inline-block; en el logo

y en la lista si lo que deseas es de manera vertical quitale el float: left.

seria bueno que pases la url de tu web para verlo en funcionamiento.

saludos!

facamez · #3 (**permalink**) 20/11/2015, 09:02

Muchas gracias, ¡ya está solucionado! Lo de float:left no se lo quité, porque si lo hacía, el menú se me iba abajo del título y de la imagen del logo.