Altura de <li>

salbatore · #1 (**permalink**) 04/05/2008, 08:47

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?

pzin · #2 (**permalink**) 04/05/2008, 08:51

Muéstralo como bloque, flota cada li, y no deberías de tener problemas para aplicarle altura.

salbatore · #3 (**permalink**) 04/05/2008, 09:02

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?

pzin · #4 (**permalink**) 04/05/2008, 09:26

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.

juaniquillo · #5 (**permalink**) 04/05/2008, 09:39

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.

salbatore · #6 (**permalink**) 04/05/2008, 10:12

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?

Mikmoro · #7 (**permalink**) 04/05/2008, 10:23

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.

Mikmoro · #8 (**permalink**) 04/05/2008, 10:25

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.

salbatore · #9 (**permalink**) 04/05/2008, 10:28

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...

Mikmoro · #10 (**permalink**) 04/05/2008, 10:35

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.

salbatore · #11 (**permalink**) 04/05/2008, 13:45

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?

pzin · #12 (**permalink**) 04/05/2008, 13:48

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?

Mikmoro · #13 (**permalink**) 04/05/2008, 15:46

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

salbatore · #14 (**permalink**) 04/05/2008, 15:58

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?

Mikmoro · #15 (**permalink**) 04/05/2008, 16:21

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.

salbatore · #16 (**permalink**) 04/05/2008, 17:09

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!.

Mikmoro · #17 (**permalink**) 04/05/2008, 17:16

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.

juaniquillo · #18 (**permalink**) 05/05/2008, 08:25

Eso de alterar el line-height al a nunca se me hubiera ocurrido.. gracias mikel.