Foros del Web » Creando para Internet » CSS »

Lista con float:left y 3 renglones, problemas en IE

Estas en el tema de Lista con float:left y 3 renglones, problemas en IE en el foro de CSS en Foros del Web. Hola: Mi código HTML es una lista. En total son 11 elementos: los 2 primeros son principales , y luego 9 secundarios . Los principales ...
  #1 (permalink)  
Antiguo 02/07/2008, 19:44
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Lista con float:left y 3 renglones, problemas en IE

Hola:

Mi código HTML es una lista. En total son 11 elementos: los 2 primeros son principales, y luego 9 secundarios. Los principales se muestran como elementos normales de lista (un renglón por elemento), pero los secundarios (con el class junto) se muestran con float:left para que estén en el mismo renglón:
Código HTML:
<ul id="lista">
	<li>especial #1</li>
	<li>especial #2</li>
	<li class="junto">#1</li>
	<li class="junto">#2</li>
	<li class="junto">#3</li>
	<li class="junto nuevaLinea">#4</li>
	<li class="junto">#5</li>
	<li class="junto">#6</li>
	<li class="junto nuevaLinea">#7</li>
	<li class="junto">#8</li>
	<li class="junto">#9</li>
</ul> 
Pero yo quiero que esos elementos secundarios con el class="junto" formen 3 renglones de 3 elementos cada uno. Que el resultado sea este:
Cita:
Iniciado por Firefox
especial #1
especial #2
#1#2#3
#4#5#6
#7#8#9
Para eso le añado un class nuevaLinea a los elementos que deben empezar un nuevo renglón. El código CSS, que responde bien en Firefox es éste:
Código:
#lista {
	list-style:none;
}
#lista .junto {
	float: left;
}
#lista .nuevaLinea {
	clear: left;
}
Pero en IE sólo saltan a nuevas líneas aquellos elementos que contienen el class nuevaLinea, olvidando a sus hermanos de la derecha:

Cita:
Iniciado por IE
especial #1
especial #2
#1#2#3#5#6#8#9
#4
#7
¿Qué se puede hacer para mostrarlos en 3 líneas y no perder el significado que una única lista me da semánticamente en el HTML? No puedo meter ningún elemento que no sea <LI> dentro de un <UL>, la especificación me lo impide.

¿Algún hack?
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #2 (permalink)  
Antiguo 02/07/2008, 19:58
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Respuesta: Lista con float:left y 3 renglones, problemas en IE

Hola

Veamos, si agregas un borde a la lista, verás que firefox tampoco te lo muestra realmente bien ya que los elementos con float están fuera de la lista.

Si lo que quieres es que estén en la misma línea, lo que has de hacer es cambiar su tipo de display, de block a inline.

Aquí te dejo un ejemplo:
Código HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
		#lista {
			list-style:none;
			border: 1px solid #f00;
			width: 70px;
		}
		#lista .junto {
			display: inline;
		}
	</style>
	<script type="text/javascript">
	</script>
	<title>prueba</title>
</head>
<body>
<ul id="lista">
	<li>especial #1</li>
	<li>especial #2</li>
	<li class="junto">#1</li>
	<li class="junto">#2</li>
	<li class="junto">#3</li>
	<li class="junto">#4</li>
	<li class="junto">#5</li>
	<li class="junto">#6</li>
	<li class="junto">#7</li>
	<li class="junto">#8</li>
	<li class="junto">#9</li>
</ul>
</body>
</html> 
Obviamente, al ser inline, todos irán a la misma línea, po lo que debes controlar las dimensiones del formulario para que salten cuando sea necesario.

En cualquier caso, si lo que te interesa es realmente la semántica, si los tres elementos deben estar en la misma línea, significa que son la misma opción, por lo que deberían ser un solo elemento de lista.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 02/07/2008, 20:21
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Respuesta: Lista con float:left y 3 renglones, problemas en IE

Hola PatomaS, gracias por contestar:

Cita:
Iniciado por PatomaS Ver Mensaje
Veamos, si agregas un borde a la lista, verás que firefox tampoco te lo muestra realmente bien ya que los elementos con float están fuera de la lista.
Eso me ocurre también en IE (6), los elementos flotantes no ocupan lugar porque flotan ¿no? Jeje. Siempre ha sido un problema, pero ¿Influye eso en mi cuestión?

Cita:
Iniciado por PatomaS Ver Mensaje
Si lo que quieres es que estén en la misma línea, lo que has de hacer es cambiar su tipo de display, de block a inline.
(...)
Obviamente, al ser inline, todos irán a la misma línea, po lo que debes controlar las dimensiones del formulario para que salten cuando sea necesario.
¿Cómo puedo hacer eso? Tengo los dos primeros elementos, que me impiden acortar el width de la lista. De todas maneras ¿cómo lo acorto? ¿Con porcentaje? ¿Con píxeles? ¿Con em? Dependiendo de cómo tenga el usuario el tamaño de letra en su navegador, cambiarán el número de elementos por fila haga lo que haga... (Ver editado al final)

Cita:
Iniciado por PatomaS Ver Mensaje
En cualquier caso, si lo que te interesa es realmente la semántica, si los tres elementos deben estar en la misma línea, significa que son la misma opción, por lo que deberían ser un solo elemento de lista.
Sí, quizás me has pillado ahí, jeje. No habría problema en que fueran el mismo elemento la misma línea. Es para el menú principal de una web. Interpreto esta lista como un tablero de 3x3, como si fuera un tres en raya. También pueden hacerse listas que no formen una línea ¿no? Sino un tablero, o "nube". Una lista multi-columna o multi-fila (para muchos elementos). La cuestión es cómo hacerla controlando cuántos elementos por fila.

Se me ha ocurrido meter elementos de separación, que "rompan" ese inline. Pero claro, tengo que meter más elementos HTML sin sentido:
Código HTML:
<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
#lista {
	list-style:none;
}
#lista .junto {
	display: inline;
}
#lista .separador {
	display: block;
	line-height: 1px;
}
</style>
</head>

<body>

<ul id="lista">
	<li>especial #1</li>
	<li>especial #2</li>
	<li class="junto">#1</li>
	<li class="junto">#2</li>
	<li class="junto">#3</li>
	<li class="separador">&nbsp;</li>
	<li class="junto">#4</li>
	<li class="junto">#5</li>
	<li class="junto">#6</li>
	<li class="separador">&nbsp;</li>
	<li class="junto">#7</li>
	<li class="junto">#8</li>
	<li class="junto">#9</li>
</ul>


</body>
</html> 

¿Alguna idea de cómo hacerlo sin trucos HTML?


EDITO: Me he dado cuenta que sí podemos dar una anchura a la lista con la unidad em sin que al redimensionar la letra del navegador se descoloque la lista (aumenta en consecuencia la anchura de la lista). ¿Me puedo fiar dimensionándola con mi ordenador? Además, tendría que hacer dos listas, una para los elementos del principio y otra para el tablero 3x3, aunque no supone problema.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #4 (permalink)  
Antiguo 02/07/2008, 20:25
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 20 años
Puntos: 63
Respuesta: Lista con float:left y 3 renglones, problemas en IE

No

El único ejemplo semántico que se me ocurrió es el que te puse antes. Cualquier otra opción implicaba usar cosas extra.

No digo que no sea posible, pero a mi, al menos ahora, no se me ocurre.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #5 (permalink)  
Antiguo 02/07/2008, 20:44
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Respuesta: Lista con float:left y 3 renglones, problemas en IE

Buscando por los términos multifila y multicolumna, que no se me habían ocurrido, me he encontrado con esto:
http://outbook.blogspot.com/2007/05/...ticolumna.html
Que es muy malo en IE, pero que enlaza con dos artículos, uno de ALA - http://alistapart.com/articles/multicolumnlists - que me da métodos por un tubo para implementar (mejor empezar desde el final...); y otro - http://www.communitymx.com/content/a....cfm?cid=27f87 - que no me lo he leído todavía pero que parece más de lo mismo.

Todos son más complicados que poner los elementos en inline y fijar una anchura a la lista, ¿Hay algo que falle en este sistema más simple? ¿Alguna desventaja?

El ejemplo más lucido de ALA funciona exactamente igual que esto, que creo que es lo que busco:

Código PHP:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
        #lista1, #lista2 {
            list-style:none;
            border: 1px solid #f00;
        }
        #lista2 { width: 4em; }
        #lista2 .junto {
            display: inline;
        }
    </style>
    <script type="text/javascript">
    </script>
    <title>prueba</title>
</head>
<body>
    <ul id="lista1">
        <li>especial #1</li>
        <li>especial #2</li>
    </ul>
    <ul id="lista2">
        <li class="junto">#1</li>
        <li class="junto">#2</li>
        <li class="junto">#3</li>
        <li class="junto">#4</li>
        <li class="junto">#5</li>
        <li class="junto">#6</li>
        <li class="junto">#7</li>
        <li class="junto">#8</li>
        <li class="junto">#9</li>
    </ul>
</body>
</html>

Saludos
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #6 (permalink)  
Antiguo 03/07/2008, 01:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Lista con float:left y 3 renglones, problemas en IE

Creo que la solución es bien sencilla:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#lista {
list-style:none;
}
#lista .junto {float: left;
}
</style>
</head>
<body>
<ul id="lista">
<li>especial #1</li>
<li>especial #2</li>
<li class="junto">#1</li>
<li class="junto">#2</li>
<li class="nuevaLinea">#3</li>
<li class="junto">#4</li>
<li class="junto">#5</li>
<li class="nuevaLinea">#6</li>
<li class="junto">#7</li>
<li class="junto">#8</li>
<li class="nuevaLinea">#9</li>
</ul>
</body>
</html>
Mikel.
  #7 (permalink)  
Antiguo 03/07/2008, 07:30
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 4 meses
Puntos: 45
Respuesta: Lista con float:left y 3 renglones, problemas en IE

Gracias Mikmoro, no sé cómo no se nos había ocurrido hasta ahora esa simple solución, chapó.

Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
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 19:59.