Foros del Web » Creando para Internet » CSS »

Propiedad display

Estas en el tema de Propiedad display en el foro de CSS en Foros del Web. Hola gente, tengo los siguientes problemas: 1) Estoy usando la propiedad display para los siguientes link, pero no me está tomando todo el ancho de ...
  #1 (permalink)  
Antiguo 07/05/2008, 13:36
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Propiedad display

Hola gente, tengo los siguientes problemas:

1) Estoy usando la propiedad display para los siguientes link, pero no me está tomando todo el ancho de la celda (en Explorer pasa esto), ya que si paso el mouse más a la derecha de donde está el texto, no me toma el link, en cambio en FF sí lo hace.

2) En IE también la fila que tiene la clase "inf" no me toma el alto determinado de 17 px que le puse en el estilo, y las demas filas, en vez de tener 17 px, tienen mas y no se porque (yo sé que dado el borde deberían tener quizas 18px, pero llegan a tener mas.... como hago para que tanto la ultima como las demas tengan: 17px ??

Por ejemplo, si escribo un link dentro del <li> me toma menos alto la fila que si no adjunto nada.

Este es mi codigo:

Código HTML:
<html>
<head>
<style type="text/css">
div.menu {width:50%;background:#DD0000;}
div.menu ul {margin:0;padding:0;}
div.menu ul li {height:15px;list-style:none;border-bottom:1px solid #FFFFFF;}
div.menu ul li a {font:10px Arial,Helvetica,sans-serif;color:#FFFFFF;display:block;text-decoration:none;}
div.menu ul li a:hover {background:#000000;}
div.menu ul li.inf {}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="#">Primera fila</a></li>
    <li><a href="#">Segunda fila</a></li>
    <li></li>
    <li><a href="#">Cuarta fila</a></li>
    <li class="inf"></li>
  </ul>
</div>
</body>
</html> 
  #2 (permalink)  
Antiguo 07/05/2008, 16:41
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: Propiedad display

Esta es una manera de conseguir algo muy parecido en FF e IE6:

Cita:
<html>
<head>
<style type="text/css">
div.menu {width:50%;background:#DD0000;}
div.menu ul {margin:0; padding:0; list-style:none}
div.menu ul li {border-bottom: 1px solid #FFFFFF;}
div.menu ul>li {height: 18px;}
div.menu ul li a {font: 10px Arial,Helvetica,sans-serif; color:#FFFFFF; display:block; text-decoration:none; position: relative; line-height: 18px; vertical-align: middle;}
div.menu ul li a:hover {background:#000000;}
div.menu ul li.inf {}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Primera fila</a></li>
<li><a href="#">Segunda fila</a></li>
<li></li>
<li><a href="#">Cuarta fila</a></li>
<li class="inf"></li>
</ul>
</div>
</body>
</html>
No obstante, al no usar ningún doctype los problemas generlamente se multiplican, porque IE6 entra en el modo básico (no recuerdo cómo se llama), que acarrea mayores problemas.

Mikel.
  #3 (permalink)  
Antiguo 07/05/2008, 22:18
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Propiedad display

Gracias como siempre, pero respecto a tu posteo, te hago las siguentes preguntas:

1) div.menu ul>li:
es aceptado por IE6? cualquier navegador acepta esta propiedad ?

2) porque ponés position: relative al elemento div.menu ul li a ??

3) line-height: 18px:
esto que quiere decir ?... porque para el alto yo conocía solamente height:18px

4) vertical-align:
esta propiedad no se aplica solamente a los elementos <table> ??

5) cual es el line-height minimo que puedo poner para que disminuya el alto de un <li> ?? ... pregunto porque si le pongo 1px no creo que tenga de alto solamente 1px.


Bueno, muchas gracias nuevamente

Saludos
  #4 (permalink)  
Antiguo 08/05/2008, 17:02
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: Propiedad display

Ya sabía que me ibas a hacer estas preguntas

Cita:
Iniciado por Jamati Ver Mensaje
1) div.menu ul>li:
es aceptado por IE6? cualquier navegador acepta esta propiedad ?
No, justamente no es aceptado por IE6, y por eso lo uso para dar una propiedad al resto de navegadores y que IE6 no la entienda.

Cita:
Iniciado por Jamati Ver Mensaje
2) porque ponés position: relative al elemento div.menu ul li a ??
A menudo IE6 necesita una posición relativa para ganar la forma que otros navegadores ya dan sin esa posición. En tu caso, para que el enlace ocupe todo el ancho del div y no sólo la palabra, como te ocurría.

Cita:
Iniciado por Jamati Ver Mensaje
3) line-height: 18px:
esto que quiere decir ?... porque para el alto yo conocía solamente height:18px
Es el alto de línea. Se le aplica a un elemento de texto y con él puedes controlar la altura de la línea del texto y que no sólo dependa del tamaño de la fuente.

Cita:
Iniciado por Jamati Ver Mensaje
4) vertical-align:
esta propiedad no se aplica solamente a los elementos <table> ??
No, el IE6 aplica es propiedad también a elementos de bloque; el resto de navegadores no.

Cita:
Iniciado por Jamati Ver Mensaje
5) cual es el line-height minimo que puedo poner para que disminuya el alto de un <li> ?? ... pregunto porque si le pongo 1px no creo que tenga de alto solamente 1px.
Pruébalo y verás que Firefox hará que el texto tenga 1px de alto. IE6 ni se entera.

Recuerda lo que te he dicho del doctype, que al usar uno u otro las cosas cambian mucho. Acostúmbrate a ponerlo por defecto. Por ejemplo este, que es algo más permisivo que el estricto:

<!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" lang="es-es">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />

Mikel.
  #5 (permalink)  
Antiguo 09/05/2008, 15:02
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Propiedad display

Buenisima explicación Mikel, muchas gracias, funcionó perfecto.

Te hago una consulta mas: si yo tengo:

<li class="imagen"><img scr="xxxxxx.gif"<li>

donde supuestamente la imágen es de 10px, si hago:

li.imagen {height:10px} en FF me achica bien el <li> , pero IE es como mínimamente acepta disminuir hasta 17 u 18 px, puede ser ??

como hago para que el IE también me achique el li con el alto que yo le diga en la clase??

Bueno, muchas gracias de antemano y muy cordial en responder siempre este tipo de dudas.

Saludos a todos
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 21:08.