Foros del Web » Creando para Internet » CSS »

Div + span + IMG a la derecha

Estas en el tema de Div + span + IMG a la derecha en el foro de CSS en Foros del Web. Tengo el siguiente codigo: Código HTML: <html> <head> <title> </title> <style type= "text/css" > body {margin:0;} div.contenedor {width:600px;position:relative;background:#FF0000;margin:25px 0 0 0;} div.contenedor span {color:#FFFFFF;float:left;text-indent:20px;} div.contenedor ...
  #1 (permalink)  
Antiguo 17/07/2008, 12:48
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Div + span + IMG a la derecha

Tengo el siguiente codigo:

Código HTML:
<html>
<head>
<title></title>
<style type="text/css">
body {margin:0;}
div.contenedor {width:600px;position:relative;background:#FF0000;margin:25px 0 0 0;}
div.contenedor span {color:#FFFFFF;float:left;text-indent:20px;}
div.contenedor img {float:right;clear:both;margin:0;}
div.contenedor div.clear {clear:both;}
</style>
</head>
<body>

<div class="contenedor">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
<div class="clear"></div>
</div>

<div class="contenedor">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
</div>

</body>
</html> 
En IE6 funciona perfecto, y aunque me cueste creerlo, el problema lo tengo en FF. Quiero un <div> rojo, donde el <span> tendrá una sangría y las imágenes se irán colocando a la derecha del <span>, una debajo de otra.

Como podrán ver en IE funciona perfecto, pero en FF hace unos movimientos raros. Probé sacando el atributo float:left del span, y se corrige todo, salvo que no me deja la sangría.

Espero que me entiendan.
Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 17/07/2008, 13:05
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: Div + span + IMG a la derecha

Yo lo haría así:

Cita:
<html>
<head>
<title></title>
<style type="text/css">
body {margin:0;}
div.contenedor {width:600px;position:relative;background:#F00;mar gin:25px 0 0 0; overflow: auto;}
div.contenedor span {text-indent:20px; color:#FFF;display: block;}
div.contenedor img {margin:0;}
div.imagenes {float: right;width: 115px;}
</style>
</head>
<body>
<div class="contenedor">
<div class="imagenes">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
</div>
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
</div>

<div class="contenedor">
<div class="imagenes">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
</div>
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
</div>
</body>
</html>
Mikel.
  #3 (permalink)  
Antiguo 17/07/2008, 16:21
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Div + span + IMG a la derecha

Muchas gracias, problema solucionado.
Mezclando la ayuda que me pasaste, terminé haciendo esto:

Código HTML:
<html>
<head>
<title></title>
<style type="text/css">
body {margin:0;}
div.contenedor {width:600px;position:relative;background:#FF0000;margin:25px 0 0 0;overflow:auto;}
div.contenedor span {color:#FFFFFF;text-indent:20px;display:block;}
div.contenedor img {float:right;clear:both;margin:0;}
</style>
</head>
<body>
<div class="contenedor">
<img src="paseo1.jpg" width="115" height="86">
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
</div>
</body>
</html> 
Saqué el div.imagenes porque no siempre iban a ser del mismo tamaño, y aparte para no crear un div más, dejé los img así nomás dentro del div.contenedor.

De esta forma los atributos que vos me habias puesto en:

Cita:
div.imagenes {float: right;width: 115px;}
yo se los puse dentro del div.contenedor img

está bien igual, no ?
Nuevamente muchísimas gracias.
  #4 (permalink)  
Antiguo 17/07/2008, 17:49
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: Div + span + IMG a la derecha

Sí, también es correto. Y hasta más secillo.

Mikel.
  #5 (permalink)  
Antiguo 18/07/2008, 12:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Div + span + IMG a la derecha

Muchas gracias Mike.
Espero que les sirva a otros.

Saludos.
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 04:09.