Menu css bonito

matucasal · #1 (**permalink**) 01/08/2009, 10:31

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

kseso? · #2 (**permalink**) 01/08/2009, 10:43

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

matucasal · #3 (**permalink**) 01/08/2009, 10:56

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

kseso? · #4 (**permalink**) 01/08/2009, 11:08

Cita:

Iniciado por matucasal

...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;
}

matucasal · #5 (**permalink**) 01/08/2009, 11:19

Ahora si, muchas gracias nuevamente

matucasal · #6 (**permalink**) 01/08/2009, 11:36

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

kseso? · #7 (**permalink**) 01/08/2009, 13:47

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
  position: relative;
}
#menu {margin: 10px auto 0; width:220px;}
#menu ul{}
#menu ul li{float:left; list-style-type:none;}
#menu ul li a {
background-color:#444;
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, #menu ul li a.activo {
border-top:6px solid #2DA8D4;
text-decoration:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a class="activo" href="#">Inicio</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="contacto.html">Otro</a></li>
</ul>
</div>
</body>
</html>

Un saludo

matucasal · #8 (**permalink**) 01/08/2009, 19:04

Ahora si funciona perfecto, muchas gracias