Foros del Web » Creando para Internet » CSS »

Navegación exacta

Estas en el tema de Navegación exacta en el foro de CSS en Foros del Web. Llevo pocos días, por no decir una semana con css. Quiero hacer esto: Me explico; Al pasar el raton quiero que cambie el color del ...
  #1 (permalink)  
Antiguo 26/03/2009, 13:26
 
Fecha de Ingreso: mayo-2008
Mensajes: 95
Antigüedad: 9 años, 6 meses
Puntos: 0
Navegación exacta

Llevo pocos días, por no decir una semana con css.

Quiero hacer esto:



Me explico;

Al pasar el raton quiero que cambie el color del texto y toda la DIV, toda la div a la altura del texto, mas concretamente a su fondo se coloree.

PD: La alineación del texto no tiene nada que ver.
  #2 (permalink)  
Antiguo 26/03/2009, 14:29
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Navegación exacta

mira este ejemplo:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. #menu_rojo{background-color:#990000; width:150px;}
  7. #menu_rojo ul{list-style:none; margin:0; padding:5px 0 5px 0; text-align:left;}
  8. #menu_rojo ul li{padding:0 0 0 10px; }
  9. #menu_rojo a{ color:#FFF; text-decoration:none;padding:0 3px 5px 3px; display:block;}
  10. #menu_rojo a:hover{ color:#333; text-decoration:none; background:#C77373;padding:0 3px 5px 3px; display:block;}
  11. #menu_rojo a:focus{color:#333; text-decoration:none; background:#C77373;padding:0 3px 5px 3px;display:block;}
  12. #menu_rojo a:active{color:#333; text-decoration:none; background:#C77373;padding:0 3px 5px 3px;display:block;}
  13. </head>
  14.  
  15. <div id="menu_rojo">
  16.     <ul>
  17.         <li><a href="#">Menu 1</a></li>
  18.         <li><a href="#">Menu 2</a></li>
  19.         <li><a href="#">Menu 3</a></li>
  20.         <li><a href="#">Menu 4</a></li>
  21.         <li><a href="#">Menu 5</a></li>
  22.     </ul>
  23. </div>
  24. </body>
  25. </html>

espero te sirva, solo tendrás que hacer algunos ajustes de medidas tal vez para que se vea igual en todos los navegadores, pero nada importante. Copialo y pegalo en un archivo nuevo para ver si eso te sirve
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 26/03/2009, 16:24
 
Fecha de Ingreso: mayo-2008
Mensajes: 95
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Navegación exacta

No me cuadra al completo el fondo ( del color que sea ) por alrededor del texto en toda la div :S
  #4 (permalink)  
Antiguo 26/03/2009, 17:20
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Navegación exacta

eso hace el efecto que quieres ahora cuadra las medidas o simplemente en vez de usar listas utiliza divs o sencillamente quita la ul y cuadralo

Código html:
Ver original
  1. <div id="menu_rojo">
  2.     <a href="#">Menu 1</a>
  3.     <a href="#">Menu 2</a>
  4.     <a href="#">Menu 3</a>
  5.     <a href="#">Menu 4</a>
  6.     <a href="#">Menu 5</a>
  7. </div>
__________________
WFC
codigo82
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 23:10.