Posicionamiento de imagen y texto en página WordPress (SOLUCIONADO)

supaginagratis dijo:

Hola amigos, les quería consultar como puedo poner una imagen a la izquierda y el texto a la derecha dentro de una página wordpress y luego hacer lo mismo abajo pero la imagen a la derecha y el texto a la izquierda.

Quiero que quede algo así: Ver el archivo adjunto 21849

Hacer clic para expandir...

<div style="width:100%"><div style="width:50%;float:left;">imagen</div><div style="width:50%;float:right;">texto</div></div>
<div style="width:100%"><div style="width:50%;float:left;">texto</div><div style="width:50%;float:right;">imagen</div></div>

cicklow dijo:

Pues simple:

HTML:

<div style="width:100%"><div style="width:50%;float:left;">imagen</div><div style="width:50%;float:right;">texto</div></div>
<div style="width:100%"><div style="width:50%;float:left;">texto</div><div style="width:50%;float:right;">imagen</div></div>

Hacer clic para expandir...

GGalizzi dijo:

Si no te funciona el float es porque no hay lugar para que los elementos entren dentro del padre. Y por mas que pongas al padree 100% width y a los hijos flotantes con 50%, no quiere decir que entren, mucha gente se olvida o directamente no sabe como funciona el modelo de caja, el tamaño total de un elemento (en este caso el ancho->) va a ser el width+margen izquierdo+margen derecho+borde derecho+borde izquierdo+padding izquierdo + padding derecho... salvo que cambies el box-sizing por 'border-box'.

Y tampoco hace falta que le pongas float:left a uno y float:right al otro, salvo que quieras que el elemento se pegue al borde izquierdo o derecho, respectivamente.

Si hay un elemento flotante (a la izquierda digamos) el elemento que le sigue seguirá a la derecha de este.

Y también hay que acordarse de aplicar clear:left/right/both donde corresponda a los elementos que siguen.

Y otra cosa muy importante de acordarse sobre los floats, es que se los saca de su normal-flow, osea que si no los usas como corresponde vas a tener elementos mal ubicados o sobre-puestos.


En el ejemplo que te dio cicklow, yo le agregaria clear:both a los div padres (los que tienen width:100%), y fíjate de las anchuras de los elementos hijos con el inspector de chrome o firefox.

Pero es difícil saber exactamente como lo tendrías que hacer sin poder ver el código tuyo, o la pagina directamente para inspeccionarla.

Ejemplos:
JS Bin - Collaborative JavaScript Debugging

Hacer clic para expandir...

Antremix dijo:

podrias dejar tu blog para ayudarte mejor :encouragement:

Hacer clic para expandir...

cicklow dijo:

Pues simple:

HTML:

<div style="width:100%"><div style="width:50%;float:left;">imagen</div><div style="width:50%;float:right;">texto</div></div>
<div style="width:100%"><div style="width:50%;float:left;">texto</div><div style="width:50%;float:right;">imagen</div></div>

Hacer clic para expandir...

<div style="float: left; width: 500px;"><img alt="" src="http://www.supaginagratis.com/wp-content/uploads/2014/01/plan-pyme-diseno-paginas-web-gratis-6-prueba.jpg" />
Página Web ProfesionalSupaginagratis le entrega una página web profesional sin ningún tipo de publicidad. Desarrollamos la imagen de su web acorde al producto o servicio que quiere dar a conocer. Todos nuestros sitios cuentan con las herramientas necesarias para promocionar a su negocio.</div>
<div style="float: right; width: 500px;">Página Web Autoadministrable
Supaginagratis le entrega una página web autoadministrable con la que podrá administrar todo el contenido de su web, ya sea crear,
modificar o eliminar todo tipo de contenido, mediante su propio usuario y contraseña. Ahora puede mantener su sitio web actualizado todo el año y sin ningún costo.
<img alt="" src="http://www.supaginagratis.com/wp-content/uploads/2014/01/plan-pyme-diseno-paginas-web-gratis-7-prueba1.jpg" /></div>

GGalizzi dijo:

Proba así:

HTML:

<div>
<img alt="" src="http://www.supaginagratis.com/wp-content/uploads/2014/01/plan-pyme-diseno-paginas-web-gratis-6-prueba.jpg" style="
    float: left;
">
<br>
<p>
  Página Web ProfesionalSupaginagratis le entrega una página web profesional sin ningún tipo de publicidad. Desarrollamos la imagen de su web acorde al producto o servicio que quiere dar a conocer. Todos nuestros sitios cuentan con las herramientas necesarias para promocionar a su negocio.
</p>
</div>
<div style="clear: left; ">

<img alt="" src="http://www.supaginagratis.com/wp-content/uploads/2014/01/plan-pyme-diseno-paginas-web-gratis-7-prueba1.jpg" style="
    float: right;
    position: relative;
    right: 12px;">
<p style="height: 30em;">
Página Web Autoadministrable<br>
Supaginagratis le entrega una página web autoadministrable con la que podrá administrar todo el contenido de su web, ya sea crear,
  modificar o eliminar todo tipo de contenido, mediante su propio usuario y contraseña. Ahora puede mantener su sitio web actualizado todo el año y sin ningún costo.
</p>
</div>

Le puse algunas otras cositas también para que quede bien esos bordes que tienen las imagenes, y para que se vea bien el contenedor, con su borde azul por debajo de la imagen.

Hacer clic para expandir...

GGalizzi dijo:

Fijate que se te copio re mal el código, tenes <br/>s dentro de los "style=".. en el segundo div el tag <img> esta dentro de un <p>..

Donde estas pegando el código que te pase te debe estar haciendo parsing a HTML, porque los brs se están agregando justo donde hay line-breaks en el código que te deje arriba, y hay una linea blanca a donde se te esta agregando un <p>.
Tenes que pegarlo "raw", "crudo" al código.

Hacer clic para expandir...

GGalizzi dijo:

Fijate que no.

Con la imagen de abajo esta pasando lo mismo, en el estilo se estan agregando <br>.

Y de todas maneras usar inline-style es una mala idea, deberias poner esos estilo en una clase. Ponele por ejemplo a las imagenes class="float-right" y a la otra "class="float-left" y defini esas clases en un .css
En este caso te lo paso en inline de ejemplo nomas.

Hacer clic para expandir...

xLincex dijo:

Estas copiando mal el codigo asi debe quedar :

<img alt="" src="http://www.supaginagratis.com/wp-content/uploads/2014/01/plan-pyme-diseno-paginas-web-gratis-6-prueba.jpg" style=" float: left;">

Tu los tienes con <br/> al lado del float left.

Hacer clic para expandir...

supaginagratis dijo:

Te mando un mensaje privado

Hacer clic para expandir...

GGalizzi dijo:

Soy muy nuevo en el foro y parece que no me deja responder (enviar) PMs.

edit: Okai, no estaba equivocado, si puedo. 😛

Hacer clic para expandir...

GGalizzi dijo:

Soy muy nuevo en el foro y parece que no me deja responder (enviar) PMs.

edit: Okai, no estaba equivocado, si puedo. 😛

Hacer clic para expandir...