Foros del Web » Creando para Internet » CSS »

Altura de <li>

Estas en el tema de Altura de <li> en el foro de CSS en Foros del Web. Hola, foreros: Tengo un menu hecho con una lista, estan con display inline y no me permiten modificar la altura. He probado con height y ...
  #1 (permalink)  
Antiguo 04/05/2008, 09:47
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Altura de <li>

Hola, foreros:

Tengo un menu hecho con una lista, estan con display inline y no me permiten modificar la altura.

He probado con height y line-height... mirar lo tengo asi

li {display: inline;text-align: center;}
.clase_de_cada_li { padding:0; display: inline ;padding-left:29px; padding-right:29px; height:35px; background-color:#000066; margin-left:1px; margin-right:1px; line-height:35px;}

¿Lo he probado todo?
  #2 (permalink)  
Antiguo 04/05/2008, 09:51
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Altura de <li>

Muéstralo como bloque, flota cada li, y no deberías de tener problemas para aplicarle altura.
  #3 (permalink)  
Antiguo 04/05/2008, 10:02
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Altura de <li>

Hola, de nuevo...

¿Pero si muestro como bloque, tengo que dejar de verlo inline, no? y no puedo flotar cada <li> por que si lo hago se van a un lateral cuando lo que deseo es que esten como ahora, centrados en el centro de la web.

¿Una solucion?
  #4 (permalink)  
Antiguo 04/05/2008, 10:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Altura de <li>

Puedes hacer lo que te he dicho, y centrar UL en el medio. Digamos que el "contenedor" de todos los elementos LI es UL, y UL lo puedes poner donde quieras. Dentro de UL, puedes colocar los LI como quieras también. Pruébalo y verás que no debería darte problemas.
  #5 (permalink)  
Antiguo 04/05/2008, 10:39
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Altura de <li>

Hasta donde yo se no puedes ajustar el height de los elementos inline. Si le das un float los <li> se quedan como elementos block así que puedes ajustar la altura. Para centrar el ul puedes ajustar los márgenes.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 04/05/2008, 11:12
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Altura de <li>

Hola de nuevo...

No entiendo como quieres que lo haga, mira pogno el codigo html:

Código HTML:
 <div id="menu">
		<ul>
			<li><a href="index.php">INDEX</a></li>
			<li><a href="index.php">INDEX</a></li>
                        <li><a href="index.php">INDEX</a></li>
                        <li><a href="index.php">INDEX</a></li>
		</ul>
	</div> 
Lo que busco es que esten centrados en medio de la web, y que midan cada uno de los li 35px, y que esten en la misma linea...

¿Como lo hago?
  #7 (permalink)  
Antiguo 04/05/2008, 11:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura de <li>

En el anterior hilo que tratabas este asunto yo te aconsejé que pusieras el line-height al elemento "a", y no sé si lo has hecho. ¿Lo has probado? En ese hilo parecías desesperado por el centrado, y al darte la solución no parecías muy entusiasmado. En el otro hilo no has dicho nada de si lo has probado y si te ha funcionado.

¿No contestas a las respuestas de ese hilo y abres uno muevo con la misma cuestión? Perdona pero no entiendo.

Mikel.
  #8 (permalink)  
Antiguo 04/05/2008, 11:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura de <li>

Es así de simple:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859" />
<title>salbatore</title>
<style type="text/css">
* { margin: 0pt;
padding: 0pt;
}
body { margin: 0pt auto;
text-align: center;
}
#menu { border: medium solid ;
margin: 0pt auto;
width: 700px;
height: 35px;
text-align: center;
}
ul { list-style-type: none;
}
li { padding-left: 29px;
padding-right: 29px;
height: 35px;
display: inline;
text-align: center;
}
a {line-height: 35px;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.php">INDEX</a></li>
<li><a href="view.php">VIEW</a></li>
<li><a href="insert.php">INSERT</a></li>
<li><a href="register.php">REGISTER</a></li>
</ul>
</div>
</body>
</html>
Mikel.
  #9 (permalink)  
Antiguo 04/05/2008, 11:28
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Altura de <li>

Hola, Mikmoro:

Siento haber terminado con las misma pregunta... jeje. Pero en un principio no preguntaba lo mismo, ese es mi error, sorry. Ademas, se me habia olvidado la respuesta del anterior post, jeje... lo siento de nuevo...

Bueno, esto de tener tantos post por internet le hace a uno olvidar algunos, jeje...

Gracias...
  #10 (permalink)  
Antiguo 04/05/2008, 11:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura de <li>

Te lo he dicho porque la pregunta era exactamente la misma con la que terminabas el otro post: ¿cómo puedo dar altura a los li de mi menú? (aproximadamente, ya me entiendes, la misma cuestión en realidad).

Espero que con esto último lo soluciones.

Hasta la vista.

Mikel.
  #11 (permalink)  
Antiguo 04/05/2008, 14:45
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Altura de <li>

Hola de nuevo... jeje

He probado el codigo que me has puesto, Mikmoro, lo veo como quiero en dreamweaver, con su bonita altura, pero cuando lo veo en el firefox o el explorer no lo veo. Debes saber que yo la altura la quiero para que el fondo que le quiero dar se vea con una altura de 35px.

Es decir, lo explico de nuevo, por que ya de tanto escribir no se sabe ni lo que quiero...

Busco hacer una lista que este centrada en medio de toda la web. Los <li> de la lista quiero que esten en la misma linea, ademas que tengan una altura de 35px y que tengan un color de fondo, que tenga tambien 35px.

Con el codigo de Mikmoro queda practicamente perfecto solo le falta la altura al fondo...

Se que estoy siendo un pesado increible, pero llevo 5 dias intentandolo... jeje.

¿Una solucion?
  #12 (permalink)  
Antiguo 04/05/2008, 14:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Re: Altura de <li>

Pues algo harás mal, porque el código de Mikmoro está perfectamente bien. Si lo tienes publicado en algún sitio, ¿podrías poner la URL?
  #13 (permalink)  
Antiguo 04/05/2008, 16:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura de <li>

Yo te recomiendo que todas las propiedades que quieras dar a esos botones se las des a los elementos "a" y no a los "li", incluido el fondo de color o lo que sea. ¿Por qué? porque seguro que tu siguiente consulta será cómo hacer que cambie el color al pasar el ratón por encima o algo parecido, y como eso (el :hover) se lo aplicarás a los elementos "a", si el formato se lo has dado a los "li" vuelta a empezar.

Considera el "ul" un contenedor de li's. Considera los "li" un contenedor de enlaces (todo esto en tu caso específico). De esa manera, has consguido la alineación centrada de los elementos. Ahora actúa sobre los enlaces "a" para dar formato y todo te resultará más sencillo.

Mikel.

P.D.: y como dice Bonez, si puedes poner el enlace y una captura de lo que quieres conseguir te ahorrás un montón de consultas. Y si buscas un buen tutorial de css también
  #14 (permalink)  
Antiguo 04/05/2008, 16:58
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Altura de <li>

Hola, foreros:

He subido el codigo de Mikmoro a un servidor...

Lo podeis ver en:

http://usuarios.lycos.es/salbatore/

Si veis en cada navegador se ve diferente. Le he puesto un fondo verde a cada <li> y un fondo rojo a cada <a> para ver el tamaño...

Si os fijais en el internet explorer se ve como debes ser. En cambio en el firefox no...

¿Lo veis?¿alguna solucion?
  #15 (permalink)  
Antiguo 04/05/2008, 17:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura de <li>

Querrás decir en IE7 o así, porque en IE6 se ve igual que en Firefox.

Si lo quieres resolver, cambia tu slector li por este otro:

li { padding: 8px 29px;
display: inline;
background:#00CC33;
text-align: center;
}

No obstante, creo que deberías leer mi anterior mensaje. Es una recomendación.

Mikel.
  #16 (permalink)  
Antiguo 04/05/2008, 18:09
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Re: Altura de <li>

Hola, Mikmoro:

Muchas gracias por tu ayuda, me funciona perfectamente. Ya he leido tu consejo, pero me ha quedado una cosa mas clara sobre el uso de los css, que se deben hacer trucos para que todo quede igual en todos los navegadores.

Me refiero por el: padding: 8px 29px;... pues a mi entender es como engañar, no?, es decir es no es algo poco elegante?, lo que quiere decir que no es practico...

Pero a eso me refiero que hay que hacer trucos para que quede bien, no?

Muchas gracias crack!.
  #17 (permalink)  
Antiguo 04/05/2008, 18:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Altura de <li>

No imagino por qué dices que usar padding es poco elegante o poco práctico. En absoluto, es un recurso normal y corriente de css. En muchos casos habrá que usar trucos para engañar a algún navegador, pero este no es el caso.

Me refería al consejo de que apliques tus estilos a los enlaces, no a los elementos li, incluidos los fondos. Pero bueno, cada uno hace las cosas a su manera.

Mikel.
  #18 (permalink)  
Antiguo 05/05/2008, 09:25
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Altura de <li>

Eso de alterar el line-height al a nunca se me hubiera ocurrido.. gracias mikel.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
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 15:48.