Foros del Web » Creando para Internet » CSS »

Colores en enlaces

Estas en el tema de Colores en enlaces en el foro de CSS en Foros del Web. Hola, Estoy diseñando un menu de navegacion con forma de pestañas. Cuando estas en la pantalla, su pestaña correpsondiente aparece en otro color. Esto lo ...
  #1 (permalink)  
Antiguo 19/08/2009, 05:31
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 22 años, 6 meses
Puntos: 0
Colores en enlaces

Hola,

Estoy diseñando un menu de navegacion con forma de pestañas. Cuando estas en la pantalla, su pestaña correpsondiente aparece en otro color.

Esto lo habia hecho así:

<ul>
<li>Enlace1</li>
<li><a href="enlace2.php">Enlace2</a></li>
<li><a href="enlace3.aspx">Enlace3</a></li>
</ul>

Y mediante la hoja de estilos, li tiene una imagen de fondo (enlace1) y li a (enlace2 y enlace 3) tienen otra imagen de fondo.

Mi poblena es que ahora he decidido que enlace1 tiene que llevar un a href pero al ponerselo se activa el fondo de li a.

¿Cómo puedo hacer que tenda diferente fondo enlace1 pero teniendo al mismo tiempo un ahref?
  #2 (permalink)  
Antiguo 19/08/2009, 05:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Colores en enlaces

Código, Laika, código css
Mira a ver si lo siguiente se acerca a tu duda:
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" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; position: relative;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. ul { margin: 15px;}
  10. ul li {
  11. display:block;
  12. list-style-type:none;
  13. width:10em;
  14. }
  15. ul li a {
  16. display: block;
  17. padding: 5px 10px;
  18. text-decoration: none;
  19. color: #fff;
  20. }
  21. .uno {background: #c0c0c0;}
  22. .dos {background: #707070;}
  23. .tres {background: #4F4F4F}
  24. ul li a:hover {
  25. text-decoration: none;
  26. color: #F0C000;
  27. background: #600000;
  28. }
  29. </head>
  30.   <ul>
  31.     <li><a class="uno" href="#">Enlace 1</a></li>
  32.     <li><a class="dos" href="#">Enlace 2</a></li>
  33.     <li><a class="tres" href="#">Enlace 3</a></li>
  34.   </ul>
  35. </body>
  36. </html>

Coloca tu imagen en el background correspondiente.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/08/2009, 00:21
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 22 años, 6 meses
Puntos: 0
Respuesta: Colores en enlaces

Si me vale 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 03:03.