Entrar

Problema con la lista de navegación en pleno desarrollo web!.

skaparate · · Solicitar retirada
Hola!

¿Cuál es el problema? Entiendo que tienes un problema con la navegación, pero ¿qué?

Por ejemplo: la lista no queda hacia abajo, el sub-menú no se esconde, etc.

Por favor, envuelve el código HTML y CSS entre
para que se pueda ver un poco más claro :).

Saludos!
PATRICIOREY · · Solicitar retirada
Exacto, tengo problemas con el menú y el submenú, no puedo hacer que el menú se centre correctamente en la barra de menú, y con el despliegue del submenú de cada ítem. Al igual que para darle una separación correcta a cada ítem.
Decidí modificarlo y hacerlo más simple y prolijo, se que no era dificil, pero la verdad de me fue de la cabeza!. Jaja
Y gracias por tu respuesta!.
Te adjunto el print.

Aclaro que acá no incluí ni los <li> ni los <ul>
ej:

HTML:

<div id="barradenavegacion">

<a id="Home" href="#">Inicio</a>
<a id="Empresa" href="#">Audios</a>
<a id="Servicios" href="#">Videos</a>
<a id="Clientes" href="#">Archivo</a>
<a id="Contacto" href="#">Contacto</a>
</div>




Css:


div#barradenavegacion{
width:960px;
height:40px;
background-color:#a6a6a6;
text-align:center
}

#Home{color:#444444;
text-decoration:none;
font-weight:bold;
text-align:center;
margin-left:200px}

#Empresa{color:#444444;
text-decoration:none;
font-weight:bold;
text-align:center}

#Servicios{color:#444444;
text-decoration:none;
font-weight:bold;
text-align:center}

#Clientes{color:#444444;
text-decoration:none;
font-weight:bold;
text-align:center}

#Contacto{color:#444444;
text-decoration:none;
font-weight:bold;
text-align:center}
skaparate · · Solicitar retirada
Ah! Ahora entiendo :).

Como norma general, para centrar el contenido debes modificar utilizar algunos "trucos". Supongamos lo siguiente:

<body>
  <nav>
    <ul>
      <li>Home</li>
      <li>Sobre Nosotros</li>
      <li>Contacto</li>
    </ul>
  </nav>
  <!-- El resto del contenido... -->
</body>

CSS
nav ul {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

Esta es la forma de centrar cualquier elemento dentro de otro:

- width: 80%, especifica un ancho específico. Para que el "truco" resulte es obligación especificar un ancho.
- margin: 0 auto, significa que arriba y abajo no tiene margen (0) e izquierda y derecha se ajustan automáticamente (auto).
- text-align center, le dice a algunos navegadores antiguos que debe centrar el contenido (en realidad, sólo para Internet Explorer 7 o inferior, creo).
PATRICIOREY · · Solicitar retirada
Gracias Skaparate!!!. Te pasaste!. Igual no conozco la etiqueta nav porque aún no hice html 5.
Y lo de margin: 0 y padding: 0 lo apliqué de arranque con el selector universal.

*{
margin:0px;
padding:0px;
}


[:)]
skaparate · · Solicitar retirada
Si no conoces la etiqueta, no importa, sustituye esta por un div, al igual que el CSS:

<body>
  <div id="nav">
    <ul>
      <li>Home</li>
      <li>Sobre Nosotros</li>
      <li>Contacto</li>
    </ul>
  </div>
  <!-- El resto del contenido... -->
</body>

#nav ul {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
PATRICIOREY · · Solicitar retirada
Apliqué el nav ayudado por un tutorial y por lo que me has indicado, y la verdad me ayudaste un montón.
Tengo creado el menú con este efecto rollover, pero ahora tengo otro problema... no puedo hacer que al pasar el cursor por el menú, se despliegue el submenú.

Alguna idea?.

Lamentablemente el jpg excede el tamaño del archivo para adjuntártelo.


El HTML:

<div id="barradenavegacion">
	
	<ul class="nav">
    
	<li><a href="">Inicio</a></li>
	
	
    <li><a href="">Audios</a>
     <ul>
	 <li><a href="">Entrevistas</a></li>
	 </ul>
	 </li>
	 
	 
	 
	<li><a href="">Videos</a>
	  <ul>
	  <li> <a href="">Hinchadas nacionales</a></li>
	  <li> <a href="">Hinchadas extranjeras</a></li>
	  <li> <a href="">Canciones y porras</a></li>
	  <li> <a href="">Goles</a></li>		
	  <li> <a href="">Entrevistas</a></li>
	  <li> <a href="">Las bandas te lo cantan </a></li>
      <li> <a href="">Estadios nacionales</a></li>
      <li> <a href="">Estadios mundiales</a></li>
      <li> <a href="">¿Eres buen futbolista?</a></li>	 
	  </ul>
	  </li>
	
	
	
    <li><a href="">Archivo</a>
	<ul>
	<li> <a href="">Audios</a></li>
	<li> <a href="">Videos</a></li>
	<li> <a href="">Entrevistas</a></li>
	</ul>
	</li>
	
	
	

    <li><a href="">Contacto</a>
	<ul>
	<li> <a href="">Consultas y sugerencias</a></li>
	<li> <a href="">Publicidad</a></li>
	<li> <a href="">Envianos tu material</a></li>
	</ul>
	</li>
	</ul>
	</li>
	
	</div>










div#barradenavegacion{
 margin:auto;
 width:960px;
 height:40px;
 background-color:#a6a6a6;
 font-family:arial,helvetica,sans-serif;
 text-align:center;
 }
 
 ul,ol,li{
 list-style:none;
 }
 
 
 .nav li a {
 background-color:black;
 color:white;
 width:100px;
 text-decoration:none;
 padding:11px 46px;
 display: block;
 }


.nav li a:hover {
background-color:#434343;
} 
 
.nav > li {
float:left;
}

.nav li ul {
display:none;
position:absolute;
min-width:140px;
}

.nav li: hover > ul {
display:block;
}
skaparate · · Solicitar retirada
Hay varias formas de hacer lo que pides, solo debes planear lo que hace cada elemento y verás que no es tan complejo (con lo que mostraste vas bien). El problema vendrá cuando quieras hacer el menú compatible con dispositivos móviles, por ejemplo.

Piensa de esta manera...

¿Qué debe hacer la lista?

1.- El sub-menú debe estar siempre oculto.
2.- Sólo se debe mostrar al pasar el mouse, o sea, :hover (complicación: ¿qué pasa con los dispositivos touch?).
3.- Sólo se debe mostrar el primer sub-menú al pasar el mouse sobre el primero, por lo que los demás deben permanecer ocultos hasta que pase el mouse sobre uno de estos.

En el fondo, debes comenzar por el primer menú e ir descendiendo y aplicando estilos :).

Espero que se entienda :).
PATRICIOREY · · Solicitar retirada
Ante todo felices fiestas!!. Realmente te pasaste!. Pero estoy un poco perdido. Estuve probando para insertar las imágenes y ver si quedaban de forma correcta. La verdad que los tamaños fueron los justos. Veré como sigo con la condenada botonera! Jajajaaaaa.