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

supaginagratis · 21 Ene 2014

Consulta Imagen y foto alineados mismo renglón (SOLUCIONADO)

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í:

Agregado Reciente:

Bueno amigos Betas, quiero contarles que ya esta el diseño exactamente como lo necesitaba y todo esto debido a un usuario que se ha registrado en el foro hace poco tiempo, pero que su gran amabilidad, conocimientos y una generosidad sin precedentes, me ha ayudado sin ningún tipo de interés. Estoy refiriéndome al usuario: GGalizzi

Si necesitan una persona capaz y decente para algún tipo de trabajo en programación o en mejorar la respuesta de un sitio web en relación con la carga del mismo y mejorar su posicionamiento, RECOMIENDO al usuario: GGalizzi

Espero sea bien recibido en este gran Foro, ya que son muy necesarios usuarios con tan buena voluntad y conocimientos.

Con esto solo quiero dar un pequeño agradecimiento y estoy seguro que escuchare muy buenos comentarios referidos a este gran usuario. Saludos.

Cicklow · 21 Ene 2014

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

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>

Antremix · 21 Ene 2014

podrias dejar tu blog para ayudarte mejor :encouragement:

supaginagratis · 21 Ene 2014

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>

No me funcionó....gracias igual

Otro que pueda ayudarme, gracias.

GGalizzi · 21 Ene 2014

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:
http://jsbin.com/uDavENux/2/edit?html,css,output

supaginagratis · 21 Ene 2014

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

Antremix dijo:
podrias dejar tu blog para ayudarte mejor :encouragement:

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>

Estoy usando este códido, pero no me pone el texto al lado de la imagen:

HTML:

<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>

[/QUOTE]

Link al blog: Plan Pyme 3.0 Autoadministrable | Diseño Web Gratis Argentina

Cualquier ayuda será bienvenida, gracias.

GGalizzi · 21 Ene 2014

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.

supaginagratis · 21 Ene 2014

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.

Gracias GGalizzi, pero sigue mostrando el texto debajo y no a los lados: Plan Pyme 3.0 Autoadministrable | Diseño Web Gratis Argentina

GGalizzi · 21 Ene 2014

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

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 .
Tenes que pegarlo "raw", "crudo" al código.

supaginagratis · 21 Ene 2014

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

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 .
Tenes que pegarlo "raw", "crudo" al código.

Ahí lo puse tal como me lo diste y sigue mostrando los textos por debajo...

GGalizzi · 21 Ene 2014

Fijate que no.

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

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.

supaginagratis · 21 Ene 2014

GGalizzi dijo:
Fijate que no.

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

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.

Te mando un mensaje privado

xLincex · 21 Ene 2014

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 al lado del float left.

supaginagratis · 21 Ene 2014

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 al lado del float left.

Me parece que lo agrega automaticamente el theme....me esta volviendo loco....voy a tener que agregarlo como imagen sino...pero me da lastima perder esos textos para que los tomen los buscadores.

¿vos haces este trabajo? aunque sea con 2 imagenes para que yo luego pueda agregar más de 2 en 2 abajo una de otra? ¿cuanto me cobrarías? Gracias y disculpa tantas molestias..

GGalizzi · 21 Ene 2014

supaginagratis dijo:
Te mando un mensaje privado

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

edit: Okai, no estaba equivocado, si puedo.

supaginagratis · 21 Ene 2014

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

edit: Okai, no estaba equivocado, si puedo.

ok, ahi te mande los datos de acceso.

---------- Post agregado el 21-ene-2014 hora: 20:56 ----------

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

edit: Okai, no estaba equivocado, si puedo.

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

Agregado Reciente:

Bueno amigos Betas, quiero contarles que ya esta el diseño exactamente como lo necesitaba y todo esto debido a un usuario que se ha registrado en el foro hace poco tiempo, pero que su gran amabilidad, conocimientos y una generosidad sin precedentes, me ha ayudado sin ningún tipo de interés. Estoy refiriéndome al usuario: GGalizzi

Si necesitan una persona capaz y decente para algún tipo de trabajo en programación o en mejorar la respuesta de un sitio web en relación con la carga del mismo y mejorar su posicionamiento, RECOMIENDO al usuario: GGalizzi

Espero sea bien recibido en este gran Foro, ya que son muy necesarios usuarios con tan buena voluntad y conocimientos.

Con esto solo quiero dar un pequeño agradecimiento y estoy seguro que escuchare muy buenos comentarios referidos a este gran usuario. Saludos.