Foros del Web » Creando para Internet » HTML »

Como hacer que el texto no se acomode debajo de la imagen ?

Estas en el tema de Como hacer que el texto no se acomode debajo de la imagen ? en el foro de HTML en Foros del Web. Hola, ustedes conocen: Código PHP: < img src = "cuadro.png"  alt = "Test"  style = "float:left;"  /> Y ahora como hago para que al finalizar la imagen el  texto no se me acomode debajo de ella ,  sino que se comporte como si fuecen dos celdas de tabla tipo  < td ></ td ...
  #1 (permalink)  
Antiguo 14/11/2006, 13:48
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Como hacer que el texto no se acomode debajo de la imagen ?

Hola,

ustedes conocen:
Código PHP:
<img src="cuadro.png" alt="Test" style="float:left;" />

Y ahora como hago para que al finalizar la imagen el 
texto no se me acomode debajo de ella
sino que se
comporte como si fuecen dos celdas de tabla tipo 
<td></td


Como puedo lograr eso ?

He utilizado Clear:X y no funciona, que es lo que debo utilizar ?
  #2 (permalink)  
Antiguo 14/11/2006, 14:45
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
no entiendo el probelma, pero con float: haces el objeto flotante. y asi no se baja el texto solo que con clear limpias los flotatanes..

__________________
Saludos
FT.
www.fernando.com.mx
  #3 (permalink)  
Antiguo 14/11/2006, 15:20
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Esto es lo que sucede con nada + que float:left:

Código PHP:
------------   El relato de una historia y blablabla, ...
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
------------   
El relato de una historia y blablabla, ...   
El relato de una historia y blablabla, ...   
El relato de una historia y blablabla, ...   
El relato de una historia y blablabla, ...   
El relato de una historia y blablabla, ... 
Esto es lo que necesito:

Código PHP:
------------   El relato de una historia y blablabla, ...
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
-    -   
El relato de una historia y blablabla, ...   
------------   
El relato de una historia y blablabla, ... 
        
El relato de una historia y blablabla, ... 
        
El relato de una historia y blablabla, ... 
        
El relato de una historia y blablabla, ... 
        
El relato de una historia y blablabla, ... 
        
El relato de una historia y blablabla, ... 
Como hacerlo que falta agregar ?
  #4 (permalink)  
Antiguo 14/11/2006, 15:22
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Bueno, nu se cuadro mucho el "CUADRO", pero espero se entienda + la idea.

Simplemente lograr:
<table><tr>
<td>IMAGEN</td> <td>Historia de Hadas...</td>
</tr></table>

Piensa en esa salida y entenderas.
  #5 (permalink)  
Antiguo 14/11/2006, 15:42
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Podrías hacer algo así:

Código:
img {float: left;}
p {margin-left: 110px;}

<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
<p>Lorem ipsum dolor sit amet....</p>
__________________
...___...
  #6 (permalink)  
Antiguo 14/11/2006, 20:45
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
simpre es bueno otra opcion:
para que te valide con strict

Cita:
img {float: left;position:absolute;left:-110px}
p {padding-left: 110px;position:relative}
IMG dentro del parrafo
Cita:
<p>
<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
</p>
__________________
Saludos
FT.
www.fernando.com.mx
  #7 (permalink)  
Antiguo 15/11/2006, 18:23
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Pero entonces siempre estara dependiendo del P y no de CSS aplicao a la imagen ?

Por que seran varios parrafos, asi que cada uno debera llevar su class="..."

Por que luego en la misma pagina hay otros Parrafos que no requieren eso...

Luego viene un <hr />

Que termina con esa historia y viene otra historia, y tampoco se conoce las dimensiones de las imagenes que cada USER utiliza para decorar el cuento...

Por ello aplicar medidas al LEFT DEL PARRAFO no es muy saludable...
  #8 (permalink)  
Antiguo 16/11/2006, 08:29
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Hola?...

Tonces no es posible ?

Gracias a todos.
  #9 (permalink)  
Antiguo 16/11/2006, 08:40
 
Fecha de Ingreso: junio-2006
Mensajes: 16
Antigüedad: 11 años, 5 meses
Puntos: 0
Segun te entendi , entonces la forma mas simple es dandole a la imagen lel atributo ALIGN=LEFT <IMG .... ALIGN=LEFT SRC="..." >
  #10 (permalink)  
Antiguo 16/11/2006, 10:34
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
Cita:
#parrafos p {padding-left: 110px;position:relative}
#parrafos p img {float: left;position:absolute;left:-110px}
Cita:
<div id="parrafos">
<p>
<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
</p>

<p>
<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
</p>


</div>
asi ?
__________________
Saludos
FT.
www.fernando.com.mx
  #11 (permalink)  
Antiguo 16/11/2006, 18:53
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Gracias FER10,

precisamente al indicar una medida, imaginate que X user agregue una imagen que la SUPERE o que sea menor.

No se rata de un AVATAR, sino de un grafico que puede cambiar de size.

Parece que esto tampoco puede hacerse sin TABLE, verdad ?
  #12 (permalink)  
Antiguo 17/11/2006, 05:31
 
Fecha de Ingreso: junio-2006
Mensajes: 329
Antigüedad: 11 años, 6 meses
Puntos: 1
Muchachos aqui dan una solucion, pero utiliza graficos:

http://www.csscreator.com/node/18615#comment-81403

El autor dice que se puede SIN GRAFICOS, pero no dice como.

Me pueden ayudar para hacerlo SIN GRAFICOS?

Gracias.
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 09:03.