Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Los elementos del menú de inicio no se alinean verticalmente (hoja de estilos CSS) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/11/2015, 07:03
 
Fecha de Ingreso: noviembre-2015
Mensajes: 12
Antigüedad: 8 años, 5 meses
Puntos: 0
Exclamación Los elementos del menú de inicio no se alinean verticalmente (hoja de estilos CSS)

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!
  #2 (permalink)  
Antiguo 19/11/2015, 13:43
 
Fecha de Ingreso: mayo-2013
Mensajes: 17
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Los elementos del menú de inicio no se alinean verticalmente (hoja de esti

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!
  #3 (permalink)  
Antiguo 20/11/2015, 09:02
 
Fecha de Ingreso: noviembre-2015
Mensajes: 12
Antigüedad: 8 años, 5 meses
Puntos: 0
De acuerdo Respuesta: Los elementos del menú de inicio no se alinean verticalmente (hoja de esti

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.

Etiquetas: background, color, elementos, float, hoja, html, inicio, todo, verticalmente, 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 20:11.