Foros del Web » Creando para Internet » CSS »

Botonera en CSS

Estas en el tema de Botonera en CSS en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 11/02/2010, 08:55
 
Fecha de Ingreso: febrero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Botonera en CSS

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!
  #2 (permalink)  
Antiguo 11/02/2010, 10:31
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Botonera en CSS

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

Código CSS:
Ver original
  1. .activo{width:150px;
  2. height:40px;
  3. margin-right:10px;
  4. text-align:center;
  5. color: #ff0069;
  6. background-color:#000;
  7. border:1px solid #ccc;
  8. border-bottom-right-radius: 10px;
  9. border-bottom-left-radius: 10px;
  10. -moz-border-radius-bottomright: 10px;
  11. -moz-border-radius-bottomleft: 10px;
  12. -webkit-border-bottom-left-radius:10px;
  13. -webkit-border-bottom-right-radius: 10px;

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

Código HTML:
Ver original
  1. <div id="menu">
  2. <ul>
  3. <li class="activo">Inicio</li>
  4. <li><a href="grafica.html">Gráfica</a></li>
  5. <li><a href="radioytv.html">Radio y TV</a></li>
  6. <li><a href="vp.html">Vía Pública</a></li>
  7. <li><a href="informacion.html">Info de medios</a></li>
  8. <li><a href="contacto.php">Contacto</a></li>
  9. </ul>
  10. </div>

probalo
  #3 (permalink)  
Antiguo 11/02/2010, 14:19
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 9 años, 11 meses
Puntos: 9
Respuesta: Botonera en CSS

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....
__________________
Quitenme la vida pero no la bebida.
  #4 (permalink)  
Antiguo 12/02/2010, 08:33
 
Fecha de Ingreso: febrero-2010
Mensajes: 45
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Botonera en CSS

Funciona! mil Gracias!!!
  #5 (permalink)  
Antiguo 12/02/2010, 08:56
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Botonera en CSS

Cita:
Iniciado por cesarpunk Ver Mensaje
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:
Ver original
  1. #botonera li{float:left; margin: 1px;}


Etiquetas: botones
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 11:19.