Navegación exacta

Apeaux · #1 (**permalink**) 26/03/2009, 12:26

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.

willyfc · #2 (**permalink**) 26/03/2009, 13:29

mira este ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#menu_rojo{background-color:#990000; width:150px;}
#menu_rojo ul{list-style:none; margin:0; padding:5px 0 5px 0; text-align:left;}
#menu_rojo ul li{padding:0 0 0 10px; }
#menu_rojo a{ color:#FFF; text-decoration:none;padding:0 3px 5px 3px; display:block;}
#menu_rojo a:hover{ color:#333; text-decoration:none; background:#C77373;padding:0 3px 5px 3px; display:block;}
#menu_rojo a:focus{color:#333; text-decoration:none; background:#C77373;padding:0 3px 5px 3px;display:block;}
#menu_rojo a:active{color:#333; text-decoration:none; background:#C77373;padding:0 3px 5px 3px;display:block;}
</style>
</head>
 
<body>
<div id="menu_rojo">
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
    </ul>
</div>
</body>
</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

Apeaux · #3 (**permalink**) 26/03/2009, 15:24

No me cuadra al completo el fondo ( del color que sea ) por alrededor del texto en toda la div :S

willyfc · #4 (**permalink**) 26/03/2009, 16:20

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<div id="menu_rojo">
    <a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
    <a href="#">Menu 4</a>
    <a href="#">Menu 5</a>
</div>