Botonera en CSS

[laury_p]

Hola!
Estoy empezando con esto del CSS y los divs y me encuentro con un problema.
Tengo una botonera vertical hecha integramente con este lenguaje. Funcionan bien los enlaces y el hover.
Mi duda es como hacer para que cuando estoy en una pantalla ese boton se vea de un color diferente a los otros?

Les pego el codigo HTML:

<div id="menu">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="grafica.html">Gráfica</a></li>
<li><a href="radioytv.html">Radio y TV</a></li>
<li><a href="vp.html">Vía Pública</a></li>
<li><a href="informacion.html">Info de medios</a></li>
<li><a href="contacto.php">Contacto</a></li>
</ul>
</div>

y el codigo CSS:

#menu{
position:absolute;
width: 150px;
height:265px;
background-color: #eb008b;
top: 70px;
left: 20px;
border-bottom:1px solid # FFF;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius: 10px;
}

ul{margin:auto;
width:154px;
height:40px;
margin-top:20px;
}

li{
background-color:#eb008b;
width:150px;
height:40px;
margin-right:10px;
text-align:center;
border-bottom:1px solid #FFF;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius: 10px;
}

a:hover{
color: #eb008b;
background-color:#FFF;
border:1px solid #eb008b;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius: 10px;}

a{
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:16px;
text-align:left;
color:#FFFFFF;
width:128px;
height:30px;
display: block;
padding-top:10px;
padding-left:20px;
}

Gracias!

[DragonX]

podes agregar una clase de ACTIVO.... de esta manera:

Código CSS:

.activo{width:150px;
height:40px;
margin-right:10px;
text-align:center;
color: #ff0069;
background-color:#000;
border:1px solid #ccc;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius: 10px;
 

y en tu botonera, según el item activo, pones lo siguiente:

Código HTML:

<div id="menu">
<ul>
<li class="activo">Inicio</li>
<li><a href="grafica.html">Gráfica</a></li>
<li><a href="radioytv.html">Radio y TV</a></li>
<li><a href="vp.html">Vía Pública</a></li>
<li><a href="informacion.html">Info de medios</a></li>
<li><a href="contacto.php">Contacto</a></li>
</ul>
</div>
 

probalo

[cesarpunk]

Hola, disculpa si desvirtuo un poco el tema, pero yo también estoy haciendo una botonera con links y un a imageb de background... y para que se vea la imagen uso display:block ... pero cuando uso eso los botones se me ponen uno debajo del otro y yo quiero que mi menu sea horizontal, yo uso esto en las listas:

#botonera ul{list-style-type:none; margin: 0 auto; padding: 0;text-align: left;}
#botonera li{display: inline; margin: 1px;}

pero no resulta el menu horizontal....

[laury_p]

Funciona! mil Gracias!!!

[DragonX]

Iniciado por cesarpunk

Hola, disculpa si desvirtuo un poco el tema, pero yo también estoy haciendo una botonera con links y un a imageb de background... y para que se vea la imagen uso display:block ... pero cuando uso eso los botones se me ponen uno debajo del otro y yo quiero que mi menu sea horizontal, yo uso esto en las listas:

#botonera ul{list-style-type:none; margin: 0 auto; padding: 0;text-align: left;}
#botonera li{display: inline; margin: 1px;}

pero no resulta el menu horizontal....

Proba poniendo esto:

Código CSS:

#botonera li{float:left; margin: 1px;}