Foros del Web » Creando para Internet » CSS »

problema ul li

Estas en el tema de problema ul li en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/07/2009, 13:21
Avatar de dyegox  
Fecha de Ingreso: enero-2008
Mensajes: 173
Antigüedad: 16 años, 2 meses
Puntos: 7
problema ul li

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
  #2 (permalink)  
Antiguo 09/07/2009, 08:08
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 14 años, 10 meses
Puntos: 19
Respuesta: problema ul li

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!
  #3 (permalink)  
Antiguo 09/07/2009, 08:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: problema ul li

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 09/07/2009, 15:52
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Respuesta: problema ul li

Y complementenado la información de AlbertoGarcia y kseso?, te dejo un link de cristalab, que te ayudará.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 10/07/2009, 04:03
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 14 años, 10 meses
Puntos: 19
Respuesta: problema ul li

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!
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 08:57.