Foros del Web » Creando para Internet » CSS »

display:inline ul

Estas en el tema de display:inline ul en el foro de CSS en Foros del Web. Hola tengo una imagen y una lista dentro de un div. quiero que la lista aparezca a la derecha de la imagen y ambos esten ...
  #1 (permalink)  
Antiguo 26/07/2008, 10:28
bid
 
Fecha de Ingreso: marzo-2007
Mensajes: 32
Antigüedad: 10 años, 9 meses
Puntos: 0
display:inline ul

Hola

tengo una imagen y una lista dentro de un div.

quiero que la lista aparezca a la derecha de la imagen y ambos esten centrados verticalmente. este div contendria tambien mas parejas imagen-lista.


he usado display:inline para ul pero no funciona.

¿como debo hacerlo?

gracias
  #2 (permalink)  
Antiguo 02/08/2008, 10:36
 
Fecha de Ingreso: junio-2008
Ubicación: El mundo
Mensajes: 35
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: display:inline ul

Creo que debes agregar algunos elementos extra para lograr centrar ambos elementos verticalmente,algo como esto para cada pareja imagen-lista:

Código HTML:
<div class="contenedor">
   <div class="vertAlign">
      <img src="url_imagen" />
    </div>
    <div class="vertAlign">
       <ul>
          <li>Prueba</li>
       </ul>
    </div>
</div> 
Lo único que debes hacer es crear la clase css .vertAlign con display:table-cell y vertical-align:middle. Eso será suficiente para que el contenedor adapte su altura al objeto más grande (la lista o la imagen) y el más pequeño se centre verticalente respecto al primero.

La clase .contenedor que coloqué sería la que definiría la relación de posicionamiento entre las parejas de imagen-lista. Supongo que lo que estás haciendo es una especie de catálogo y quizas te convenga hacerles un float:left para que se apilen hasta que quepan a lo ancho y colocarles algun border y margin para que se diferencien de los otros pares.

Espero te sea de ayuda,

Hector Borges
  #3 (permalink)  
Antiguo 02/08/2008, 10:39
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: display:inline ul

Cita:
Lo único que debes hacer es crear la clase css .vertAlign con display:table-cell y vertical-align:middle
Ten cuidado porque me parece que eso no funciona en IE6
  #4 (permalink)  
Antiguo 02/08/2008, 10:54
 
Fecha de Ingreso: junio-2008
Ubicación: El mundo
Mensajes: 35
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: display:inline ul

cierto... tampoco en IE7... ¿cuando será que corrijan el bug del height y se apegarán a estándares?.... sorry por no verificar antes de enviartelo... se puede usar cualquiera de los multiples hacks para centrar verticalmente en IE para lograrlo o sencillamente colocar la imagen y la lista dentro de una tabla de 1 fila x 2 columnas supongo... es tan molesto tener que programar dos veces por culpa de IE jejeje.....

Gracias por la verificación Jamati,

Héctor
  #5 (permalink)  
Antiguo 02/08/2008, 15:59
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
Respuesta: display:inline ul

Bueno, de hecho ni siquiera funcionará para los navegadores standard, a no ser que le pongas display:table a la clase .contenedor.
__________________
Visita mi nueva web idplus.org
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 18:14.