Foros del Web » Creando para Internet » CSS »

Menu css bonito

Estas en el tema de Menu css bonito en el foro de CSS en Foros del Web. Hola gente del foro, si bien he leido un par de guias sobre como hacer menus en css, con li y demas, no puedo lograr ...
  #1 (permalink)  
Antiguo 01/08/2009, 11:31
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Menu css bonito

Hola gente del foro, si bien he leido un par de guias sobre como hacer menus en css, con li y demas, no puedo lograr que salgan como a mi me gustan, me falla en dos cosas.
Primero dejo la foto


Ese no es el mio, yo quiero que el mio funcione como ese.
Explico en que falla mi menu, primero que nose como ponerle la linea celeste arriba de cada opcion del menu, sin que sea una imagen de fondo, y segundo que cuando selecciono una opcion, me gustaria que la opcion que seleccione quede marcada con la linea celeste arriba.
Si alguien tiene una buena guia o un par de tips para solucionar este problema y me los quiere pasar se lo agradezo :D

Saludos y muchas gracias
  #2 (permalink)  
Antiguo 01/08/2009, 11:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu css bonito

La línea sin imagen:
define el enlace como "block" con su padding correspondiente y para a:visited; a:hover; a:active; le defines un "margin-top: Xpx solid #color.

Para que se mantenga, deberás definir una clase y aplicarla al enlace correspondiente en cada html:
Css:
Cita:
#menu ul li a:visited, #menu ul li a:hover, #menu ul li a:active, .activo {margin-top:....}
Html:
Cita:
<div id="menu">
<ul>
<li><a class="activo" href="#">Inicio</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
"Inicio" en todo momento tendrá el borde azul, "Contacto" sólo cuando hagas "a:hover"

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 01/08/2009, 11:56
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu css bonito

Eso mismo buscaba
Ahora que se cuales son las variables que tengo modificar voy a poder editarlo a mi gusto, lo que no me qedo claro es para la parte del la linea de arriba como hacerlo.
Muchas gracias igualmente , muy buena info
  #4 (permalink)  
Antiguo 01/08/2009, 12:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu css bonito

Cita:
Iniciado por matucasal Ver Mensaje
...lo que no me qedo claro es para la parte del la linea de arriba como hacerlo...
Sea un enlace
Cita:
#menu ul li a {
background-color:#000;
border:2px solid transparent;
color:#FFFFFF;
display:block;
padding:8px;
position:relative;
text-decoration:none;
}

Entonces para que aparezca la línea:
Cita:
#menu ul li a:visited, #menu ul li a:hover, #menu ul li a:active, .activo {
border:2px solid #2DA8D4;
text-decoration:none;
}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 01/08/2009, 12:19
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu css bonito

Ahora si, muchas gracias nuevamente
  #6 (permalink)  
Antiguo 01/08/2009, 12:36
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu css bonito

jeje disculpa las molestias, pero tengo otro error, es que ahora no puedo hacer que cuando presiono un link, el link quede marcado. Por ej cuando entro a contacto.html no queda marcada la linea celeste si saco el mouse de arriba del link
Pongo los codigos aver si descubren alguna anomalia

Primero el menu.html
Código HTML:
<html>
<head>
<link rel="stylesheet" href="menu.css" id="estilo" type="text/css">

</head>
<body>
<div id="menu">
<ul>
<li><a class="activo" href="#">Inicio</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
</body>
</html> 
Código HTML:
<html>
<head>
<link rel="stylesheet" href="menu.css" id="estilo" type="text/css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="menu.html">Inicio</a></li>
<li><a class="activo" href="#">Contacto</a></li>
</ul>
</div>
</br>
</br>
Este es el contacto
</body>
</html> 
Esa seria contacto.html

y aca el menu.css
Código:
body{
background-image:url("images/fondoheader.png");}
#menu ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#menu ul li{display:block;float:left;margin:0 1px 0 0;}
#menu ul li a {
background-color:#000;
border-top:6px solid transparent;
color:#FFFFFF;
display:block;
padding:8px;
position:relative;
text-decoration:none;
}
#menu ul li a:hover, #menu ul li a:active, .activo{
border-top:6px solid #2DA8D4;
text-decoration:none;
}
Si encuentran algo mal avisenme gracias
  #7 (permalink)  
Antiguo 01/08/2009, 14:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu css bonito

Mira a ver si esto te sirve, y si es así busca las diferencias (entre otras un detalle que se me escapó en mi último comentario)
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {
  7.     margin: 0;
  8.     padding: 0;
  9.     border: 0;
  10.     outline: 0;
  11.   position: relative;
  12. }
  13. #menu {margin: 10px auto 0; width:220px;}
  14. #menu ul{}
  15. #menu ul li{float:left; list-style-type:none;}
  16. #menu ul li a {
  17. background-color:#444;
  18. border-top:6px solid transparent;
  19. color:#FFFFFF;
  20. display:block;
  21. padding:8px;
  22. position:relative;
  23. text-decoration:none;
  24. }
  25. #menu ul li a:hover, #menu ul li a:active, #menu ul li a.activo {
  26. border-top:6px solid #2DA8D4;
  27. text-decoration:none;
  28. }
  29. </head>
  30. <div id="menu">
  31. <ul>
  32. <li><a class="activo" href="#">Inicio</a></li>
  33. <li><a href="contacto.html">Contacto</a></li>
  34. <li><a href="contacto.html">Otro</a></li>
  35. </ul>
  36. </div>
  37. </body>
  38. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 01/08/2009, 20:04
 
Fecha de Ingreso: marzo-2009
Mensajes: 168
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu css bonito

Ahora si funciona perfecto, muchas gracias
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 02:48.