problema ul li

dyegox · #1 (**permalink**) 08/07/2009, 13:21

hola tengo un problema y no lo se resolver

este es mi codigo:

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="static/css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jscript/funciones.js"></script>
</head>
<body>
<div id="head" style="display:none">
  <div id="logo"> <a href="/" title="Taringa!" id="logoi"><img src="http://i.t.net.ar/images/space.gif" border="0" alt="Taringa!" title="Taringa!" align="top" /></a> </div>
  <div id="user">
    <ul class="lavaLamp">
      <li><a href="cuenta.php" title="Mi cuenta ('.$_SESSION['nick'].')">Mi cuenta</a></li>
      <li><a href="logout.php" title="Cerrar sesion ('.$_SESSION['nick'].')">Salir</a></li>
    </ul>
  </div>
  <div id="nav">
    <ul class="lavaLamp">
      <li><a href="/blog/" class="font">Inicio</a></li>
      <li><a href="/blog/proyectos/" class="font">Perfil</a></li>
      <li><a href="/blog/about/" class="font">Mensajes</a></li>
      <li><a href="/blog/contactar/" class="font">Gente</a></li>
      <li><a href="/blog/contactar/" class="font">Videos</a></li>
    </ul>
  </div>
  <br class="clear">
</div>
<div id="content">hola</div>
</body>

y este mi css:

Código HTML:

body {
	margin: 0px;
	font: 11px Arial, Helvetica, sans-serif;
	background-repeat: repeat }
 
#logo {
	width: 85px;
	height: 20px;
	float: left; }
 
#logoi {
	width: 100px;
	height: 29px;
	background: url('../img/logo.png') no-repeat;
	float: left; }
 
#head {
	background: url("http://img224.imageshack.us/img224/1598/head.png") repeat;
	padding: 1px 0 8px 0;
	border-bottom: #6080c0 2px solid ;
	height: 22px; }
	
#content{
	height: auto;
	padding: 9px 0 8px 9; }
 
#nav {
	margin-left: 70px;
	width: 829px; }
 
#user { float: right; }
 
.lavaLamp {
	padding-left: -10;
	margin: 0;
	margin-top: 2px; }
 
	.lavaLamp li {
		float: left;
		list-style: none;
		margin-right: 8px; }
 
	.lavaLamp li a {
		font-size: 12px;
		text-decoration: none;
		color: #fff;
		outline: none;
		text-align: center;
		top: 5px;
		letter-spacing: 0;
		z-index: 10;
		display: block;
		float: left;
		height: 23px;
		position: relative;
		overflow: hidden;
		padding: 0 2px; }
			
			.lavaLamp li a:hover {
			height: 25px;
	color:#fff;
	margin-top:0;
	background-color:#4080a0;
	background-position:top}

.font {
	font-weight: bold;
	color: #fff; }

lo que pasa es que los link quiero que cuando cambia de color el color
cubra todo el div y no solo desde el link para abajo se entiende

AlbertoGarcia · #2 (**permalink**) 09/07/2009, 08:08

Los enlaces, <a>, son elementos de linea, para que funcionen como elemento de bloque tienes que ponerles la declaración dispaly: block; y darle las medidas que desees a ellos o a los elementos contenedores, en tu caso los elementos de lista <li>.

Salud!

kseso? · #3 (**permalink**) 09/07/2009, 08:20

Hola Diegox:
Un ejemplo de lo que te comenta AlbertoGarcia

con alguna cosilla más que te será fácil retirar, lo tienes en este tema.

Mira a ver si te es útil, y si hay algo que necesite aclaración lo comentas.

Un saludo

hades87 · #4 (**permalink**) 09/07/2009, 15:52

Y complementenado la información de AlbertoGarcia y kseso?, te dejo un link de cristalab, que te ayudará.

AlbertoGarcia · #5 (**permalink**) 10/07/2009, 04:03

Lo primero disculpas por no haber leido detenidamente tu código, no vi que ya tenías declarado el display. Si lo que quieres es que la caja de los enlaces ocupe todo el alto elimina el padding superior de #head y el margen superior de .lavaLamp, luego declara una altura mayor a #head (p. ej. 28px) para compensar la eliminación. A continuación declara un line-height de la misma altura del #head a los enlaces (.lavaLamp li a) y ya debería de ocupar todo el alto.

Salud!