html - not - CSS similar al menú de navegación superior de Stack Overflow
z index css (1)
Intento crear un menú de navegación similar al del desbordamiento de pila (preguntas, etiquetas, usuarios, insignias, sin respuesta, preguntar).
Intenté hacerlo teniendo un logotipo, 5 opciones de menú. Estos se colocaron en la parte superior del contenedor. No puedo alinearlos.
¿Cómo puedo crearlo para que estén alineados?
HTML:
<body>
<div id="logoimg">
<a href="http://www.domain.com">
<img src="http://www.domain.com/domain.png" border="0"></img>
</a>
</div>
<div id="navi">
<a href="http://www.domain.com/home.php">Home</a>
<a href="http://www.domain.com/profile.php">Profile</a>
<a href="http://www.domain.com/settings.php">Settings</a>
<a href="http://www.domain.com/logout.php">Logout</a>
</div>
<div id="my">
<div id="box">
<div id="pic">
<div id="myname">
<?php echo "$angelinajolie";?>
</div>
</div>
</div>
</body>
CSS:
div#logimg {
margin-left: 213px;
}
#box {
background-color: #FFFFFF;
margin:0 auto;
height: 300px;
width:830px;
border:1px solid #E2E2E2;
}
Dale una oportunidad:
HTML:
<div id="header">
<h1><a href="http://www.domain.com">Name of Site</a></h1>
<ul class="nav">
<li><a href="http://www.domain.com/home.php">Home</a></li>
<li><a href="http://www.domain.com/profile.php">Profile</a></li>
<li><a href="http://www.domain.com/settings.php">Settings</a></li>
<li><a href="http://www.domain.com/logout.php">Logout</a></li>
</ul>
<ul class="nav extra">
<li><a href="http://www.domain.com/logout.php">Ask a Question</a></li>
</ul>
</div>
Envuelva todo en un contenedor div. El logotipo del sitio probablemente debería ser un h1 con el título del sitio en el texto (para ser amigable con lectores de pantalla y similares). La lista de enlaces debe ser listas desordenadas. Esa estructura mantendrá las cosas bien contenidas y CSS puede hacer el resto.
CSS:
#header h1{
float: left;
width: 100px;
height: 50px;
}
Flote el título / logotipo del sitio y asígnele un ancho y alto.
#header h1 a{
background-image: url(http://www.domain.com/domain.png);
display: block;
text-indent: -9999px;
overflow: hidden;
width: 100px;
height: 50px;
}
Coloque su logotipo como una imagen de fondo en la etiqueta de anclaje, haga que la etiqueta de anclaje sea un elemento de nivel de bloque, oculte el texto con una propiedad de sangría de texto combinada con un desbordamiento oculto (esto desplaza el texto hacia la izquierda).
#header a{ text-decoration: none; }
#header .nav li{
background: #eee;
border:1px solid #E2E2E2;
float:left;
margin-right: 0.5em;
padding: 0.2em 0.5em;
}
Coloca los elementos de la lista en las etiquetas ul y dales un poco de estilo.
#header .extra{
float: right;
margin-right: 0;
top: 0;
right: 0;
}
Flota el navegador ''extra'' a la derecha en lugar de a la izquierda.
Véalo en acción aquí: http://jsfiddle.net/6F5ky/