alinear texto a un lado de la imagen con div

zoloquoki · #1 (**permalink**) 06/01/2010, 18:36

Hola!!

Tengo un grave problema con la alineación de la imagen dentro del texto. He intentado de todas maneras y no consigo alinear como yo quiera. Y añadiendo todo tipos de "style" y nada.

Estoy intentado que el div (imagen) se ubique en la derecha y el texto a la izquierda, y siempre que compruebo con el firefox, el div de la imagen se baja para abajo, cuando en el dreamweaver se ve perfectamente encajada en su sitio.

Esto porq pasa??

Posteo el codigo y a ver cual es el problema.

HTML

Código:

<div class="Parrafo" id="mainContent2">
    <div class="TiTuLoCUERPO" id="mainTituloTop">Noticias<br>
    </div>
    <div id="foto">Colocar aquí el contenido para  id "foto"</div>
    <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo CALISLorem ipsum III ENCUENTRO INTERNACIONAL dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

CSS

Código:

	
.thrColFixHdr #mainContent2 {
	padding: 1px 10px;
	margin: 20px 25px 15px 215px;
	border: 3px dotted #669900;
    }

.thrColFixHdr #mainTituloTop {
	padding: 5px 5px;
	border: 3px ridge #999999;
	margin: 7px 0 15px 0;
    }

.thrColFixHdr #foto {
	padding: 0 0;
	border: 3px ridge #999999;
	margin: 5px 5px;
	height: 135px;
	width: 200px;
	float: right;
    }

Lo del "mainTituloTop" es para el Titulo y está ubicada en el top del "maincontent" (dentro) y debajo del mainTituloTop el texto y el div "foto".

Espero que alguien sepa como solventarlo.

muchas gracias! saludos!

RusO91 · #2 (**permalink**) 06/01/2010, 19:15

básicamente lo que tenés que hacer es flotar la imagen a la derecha.

Cita:

.derecha{
float:right;
}

y a la imagen le ponés la clase "derecha".

P.D.: no te recomiendo usar Dreamweaver, usá cualquier editor de texto plano (como Gedit) que vas a aprender muchísimo más.

saludos!

zoloquoki · #3 (**permalink**) 06/01/2010, 20:11

lo he intentado de mil maneras, pero nada de nada!

incluso solo con la imagen sin el div de "foto".

he visto miles de paginas que funcione mb... y no entiendo el porq de q a mi no me funcione.

P.D: y no creo que sea el dreamweaver que falle, porq cualquier navegador solo lee los codigos y los cumple. Y pienso que mi codigo algo falla.

gracias!

C2am · #4 (**permalink**) 07/01/2010, 13:03

Hola
Prueba a dejar el css de la siguiente forma:

Código HTML:

#mainContent2 {
	padding: 1px 10px;
	margin: 20px 25px 15px 215px;
	border: 3px dotted #669900;
    }

#mainTituloTop {
	padding: 5px 5px;
	border: 3px ridge #999999;
	margin: 7px 0 15px 0;
    }

#foto {
	padding: 0 0;
	border: 3px ridge #999999;
	margin: 5px 5px;
	height: 135px;
	width: 200px;
	float: right;
    }

El id="nombreunico" es único, o debería ser, dentro de todo el html, por lo cual el ".thrColFixHdr" que tienes delante como que no hace falta.
Prueba y me dices.
Yo lo probe sin ese estilo, ya que no lo publicas, y funciona perfecto.

Saludos

jomaruro · #5 (**permalink**) 07/01/2010, 15:35

Hola:

Prueba este código:

Código CSS:

Ver original.contenedor {
    width: 100%;
    text-align:justify;
    padding:15px;
}
 
.imagen {
    width: 105px;
    height: 135px;
    margin-right:20px;
    margin-left:20px;
    float:right;
}

Código HTML:

Ver original<div class="contenedor">
            <div class="imagen">
                <img src="tuimagen.jpg" alt="imagen"/>
            </div>                                                        
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vehicula pharetra. Fusce viverra lectus quis diam accumsan imperdiet. Donec sagittis posuere lorem et dapibus. Integer pharetra massa et ante auctor malesuada et nec diam. Vivamus pretium, massa tincidunt commodo lobortis, ante lorem interdum nisl, nec viverra diam risus ut justo. Nunc mattis, lacus at molestie cursus, risus tellus tincidunt ipsum, ut consequat elit dui sit amet felis. Proin eu neque nec erat lobortis elementum at non sem. Sed in dolor ac lacus mattis consequat at ut enim. Ut sollicitudin nisi vitae ligula lacinia semper. Praesent dui odio, faucibus nec eleifend eu, dictum eget dolor. Fusce eget mauris at dolor viverra dignissim. Sed non tincidunt nulla. Nulla facilisi. Vestibulum quis volutpat neque. Ut risus velit, convallis vitae sagittis vel, molestie eu quam.
                <br />
                <br />
                Donec molestie pharetra rhoncus. Sed lorem arcu, blandit et viverra vel, adipiscing ac ipsum. Proin et massa mauris. Nullam sit amet ligula turpis. Mauris metus nisl, ullamcorper sed pellentesque ac, mattis ut tortor. Vivamus fermentum metus ac nisl dignissim id lobortis leo porttitor. Sed consequat ligula sit amet justo ultrices et viverra nibh eleifend. Sed vitae massa felis, vel elementum dolor. Proin eleifend, neque nec consequat consequat, libero neque lobortis quam, ut tincidunt tellus ligula vitae nulla. Donec sed nibh dolor. Aliquam sollicitudin feugiat fermentum. Donec rutrum lobortis egestas. Integer tincidunt tristique metus, non ornare arcu posuere vitae. Donec eget risus eu erat vulputate facilisis. Donec vel enim mi. Nullam ultricies semper elit ut auctor.
                <br />
                <br />
                Aliquam sollicitudin luctus velit, vitae pharetra velit dignissim in. Phasellus eu felis ante. Nam fermentum purus felis. Nam nisl nisi, lacinia quis elementum ut, venenatis nec nulla. Sed vitae justo vel dolor dictum pulvinar. Sed egestas, mi a faucibus faucibus, urna dolor laoreet lectus, sit amet molestie tellus est tempus mi. Ut sed tellus tellus, id tempus nisl. Sed vitae nisl at lacus dignissim ultricies at nec nisi. Nullam luctus aliquet erat non euismod. Cras feugiat, tellus at vehicula luctus, dui diam dapibus eros, at sollicitudin lacus justo venenatis leo. Nulla condimentum sem ac dui vestibulum sodales. Praesent scelerisque erat a purus mattis vitae lacinia ligula luctus. Fusce a lobortis arcu. Integer eros velit, vehicula quis facilisis sit amet, hendrerit sed nisl. Nullam eget nisl eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin consequat arcu ut leo commodo ornare.            </p>
        </div>

Eso si, adaptando las dimensiones que yo le he puesto a la imagen.

Saludos.

Willy_N · #6 (**permalink**) 07/01/2010, 15:37

Pero digo yo,

¿Qué clase de código es esto?

Código HTML:

Ver original<div class="Parrafo" id="mainContent2">
    <div class="TiTuLoCUERPO" id="mainTituloTop">Noticias<br>
    </div>
    <div id="foto">Colocar aquí el contenido para  id "foto"</div>
    <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo CALISLorem ipsum III ENCUENTRO INTERNACIONAL dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

Lo único que debe haber es

Código HTML:

Ver original<div id="mainContent2">
   <h1>Noticias</h1>
    <img src="imagen.jpg" width="" height="" title="algo" alt="algo" />
   <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, 
    justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.
    Maecenas urna purus, fermentum id, molestie in, commodo CALISLorem ipsum III ENCUENTRO INTERNACIONAL dolor sit amet,
    consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy
   </p>
</div>

y un poco de css para dar el estilo que quieres. Para la imagen en un principio valdría

Código CSS:

Ver originalborder: 3px ridge #999999;
margin: 5px;
float: right;

pdnet · #7 (**permalink**) 07/01/2010, 21:38

Creo que la solución esta en anteponer el div de la imagen al al texto, solo cambialos de posición:

en lugar de:

Código HTML:

<div class="Parrafo" id="mainContent2">
    <div class="TiTuLoCUERPO" id="mainTituloTop">Noticias<br>
    </div>
    <div id="foto">Colocar aquí el contenido para  id "foto"</div>
    <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo CALISLorem ipsum III ENCUENTRO INTERNACIONAL dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

Usa:

Código HTML:

<div class="Parrafo" id="mainContent2">

    <div id="foto">Colocar aquí el contenido para  id "foto"</div>

    <div class="TiTuLoCUERPO" id="mainTituloTop">Noticias<br></div>

    <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo CALISLorem ipsum III ENCUENTRO INTERNACIONAL dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

el resto de css aunque lo puedes optimizar, pudes dejarlo como esta

eliasjsz · #8 (**permalink**) 08/01/2010, 13:05

podes hacer esto...
<div id="div_contenedor_de_imagen"> </div>
todo lo q keras....

eso si el id del div tiene q tener el float para la alineacion de las imagenes...

zoloquoki · #9 (**permalink**) 08/01/2010, 18:57

Hola a todos!!

antes que nada, gracias por vuestras respuestas!!

He estado probando las diferentes maneras de alinear el jodido div de la imagen al lado del texto, y sinceramente, de todos los post q habeis posteado, no ha obrado el milagro ni mucho menos de lo que esperaba yo. increible! creo que será el dreamweaver que no entiende estos códigos, pero vamos, sería un fallo enorme por parte del responsable que ha creado todo Adobe. no sé!

bueno, lo único que he podido hacer, es introducir mucho texto, y colocar el div de la imagen lo más arriba posible, y que baje hasta donde pueda, (lo que le salga de las pelotas

) pero que no sobrepase nunca el bottom del "maincontent". Y lástima que para los "maincontent" con poco texto no me sirva. Y como todos sabemos mb que una web sin imagen es tan fea como una "maceta sin flor".

Y si alguno de vosotros, habeis conseguido alinear a la perfección tanto sin div como con ello, (que sea con el dreamweaver cs3, claro) intenta por lo menos postear en este foro.

saludos!!

C2am · #10 (**permalink**) 08/01/2010, 19:05

Puedes colocar un link o un captura de pantalla para ver como te queda, porque me parece que no te comprendi muy bien que es lo que te esta sucediendo.
Saludos

La imagen usando el codigo que te deje:

zoloquoki · #11 (**permalink**) 08/01/2010, 19:40

Allá van las imagenes:

con mucho texto: aqui

con poco texto: aqui

En cuanto a lo de "mucho texto" he dejado lo más arriba posible, detras del "maintitulo" donde pone Noticias.

Y lo de poco texto, no sé el porq, y tampoco sea porq no quepa el div dentro del maincontent, que está en auto tanto en width como en height.

gracias!

P.D: si no os funciona los enlaces, ve a esa dirección: http://www.miweb.zxq.net/

C2am · #12 (**permalink**) 08/01/2010, 19:52

fijate como queda en:
mucho texto:
http://www.puebloyreforma.org.ar/fdw/Untitled-1.html
poco texto:
http://www.puebloyreforma.org.ar/fdw/Untitled-2.html

algo debe estar afectando a la imagen, algun estilo aplicado en algun lado.
Saludos

zoloquoki · #13 (**permalink**) 08/01/2010, 20:06

como será posible que a ti se te deje el div de la imagen justo despues del maintitulo??

no será la plantilla q he escogido que está afectando a la alineación?

O bien, será los margins aplicados a cada clase, es decir, la suma de los margin y deja al div de la imagen para abajo?

He revisado mil veces el codigo css y html, por si se ha repetido alguna clase con el mismo nombre, pero no encuentro el fallo.

q mal! a ver si reinstalando el dreamweaver, funcione, no crees?

gracias de todos modos!

C2am · #14 (**permalink**) 08/01/2010, 20:11

El dreamwaver no tiene nada que ver, yo lo use para hacer lo que te mostre.
Es una cuestión de códigos, html, css, no del editor que usas.
mejor sube lo que tienes y pasas el link, ahi veremos donde está el fallo.

saludos

zoloquoki · #15 (**permalink**) 08/01/2010, 20:23

mira en mi web.

http://www.miweb.zxq.net/

está el archivo css.

a ver si encontrais el fallo.

y espero q SI.

gracias!

C2am · #16 (**permalink**) 08/01/2010, 21:10

bueno
El problema viene porque se ubica debajo del elemento flotado anterior.

No se bien como ayudarte, ya que se trata de una plantilla, pero voy a intentar un par de cosas.
Saludos

Desactiva el float del menu sidebarIZQ y te darás cuenta de lo que te digo

para que no suceda esto, deberia estar maquetada con dos columnas, creo,
algo así:

No estudie bien la plantilla, así que puede que este diciendo cualquiera.

zoloquoki · #17 (**permalink**) 08/01/2010, 21:27

es cierto!!!

son los contenedores flotantes de la izquierda....!! puff!!

millones de gracias!

voy a ver si puedo solucionar. vaya tela!

C2am · #18 (**permalink**) 08/01/2010, 21:39

Prueba encerrar los sidebar dentro un div, yo le puse: "colizq"

Código HTML:

Ver original<div id="colizq">
 
  <div class="thrColFixHdr" id="sidebarIZQ"> 
    <div class="TiTuLoSIDEBAR" id="MenuSidebar"></div> 
    <div class="MenuSpry" id="sidebarM1">    </div> 
    <div class="MenuSpry" id="sidebarM2"> 
      <!-- end #sidebar4 --> 
    </div> 
    <div class="MenuSpry" id="sidebarM3">    </div> 
  </div> 
  <!-- /rbroundbox --> 
  <div id="sidebarDER-ABJ2"> 
    <div class="TiTuLoSIDEBAR" id="PATROCINADORSidebar"></div> 
    <div class="enlace" id="Patrocinador1"> 
      <p>Contacto Personal</p> 
      <p>Contacto Asociación</p> 
    </div> 
 
  </div> 
  
  </div>

y en style agregas:

Código CSS:

Ver original#colizq{
    float: left;
    background-color: #09C;
    display: block;
    }

Como quedo :
http://www.puebloyreforma.org.ar/fdw/Untitled-2.html

Modifica el color de fondo o sacalo, yo lo use para poder visualizarlo bien.
vas a tener que estudiar que esto no afecte la plantilla demasiado o tratar de modificarla, ya eso es decisión tuya.

Saludos

jomaruro · #19 (**permalink**) 09/01/2010, 05:04

Hola:

Creo que os estais liando de mala manera, es mucho más sencillo, cambia esto:

Código:

.thrColFixHdr #mainContent2 {
	padding: 1px 10px;
	margin: 20px 25px 15px 215px;
	border: 3px dotted #669900;
}

Añadíendole un overflow:auto;

Código CSS:

Ver original.thrColFixHdr #mainContent2 {
    padding: 1px 10px;
    margin: 20px 25px 15px 215px;
    border: 3px dotted #669900;
    overflow:auto;
}

Y habrás solucionado el problema.

Saludos.

C2am · #20 (**permalink**) 09/01/2010, 05:51

Tienes toda la razón del mundo Jomaruro!!
Con eso se soluciona apenas tocando el css de la plantilla.
Saludos y esperemos que zoloquoki lo implemente de este modo, bah, en realidad yo solo le había ayudado a descubrir que es lo que molestaba, pero no le había dado una solución, solo un parche, jaja.

jomaruro · #21 (**permalink**) 09/01/2010, 07:30

Hola:

Por lo menos el problema que tiene, lo que no sé es si le creará otros.

Saludos.

zoloquoki · #22 (**permalink**) 09/01/2010, 08:13

por fiiiin!!! ya esta todo solucionado, simplemente añadiendo al maincontent el overflow, y el div de la imagen se queda flotando dentro e independientemente.

Jomaruro, excelente!

C2am, menuda noche pasamos con las revisiones en busca del fallo. De verdad, te estoy muy agradecido por tu gran ayuda y esfuerzo. Encantado de compartir contigo.

abrazos pa todos!

jomaruro · #23 (**permalink**) 09/01/2010, 09:29

Hola:

Me alegro que lo hayas solucionado.

Saludos.

zoloquoki · #24 (**permalink**) 10/01/2010, 16:29

Hola!!

Acabo de colgar la web entera, y me están llegando unas cuantas quejas de que en algunos navegadores como el i.explorer q no se ve nada, o sea solo el fondo, jeje. y yo me he quedao o_O.

Y he comprobado con el validador W3C, y me dice que el "overflow" no es valido.

Será el overflow q está causando problemas al i.explorer?

gracias!

RusO91 · #25 (**permalink**) 11/01/2010, 07:14

Cita:

Iniciado por zoloquoki

Hola!!

Acabo de colgar la web entera, y me están llegando unas cuantas quejas de que en algunos navegadores como el i.explorer q no se ve nada, o sea solo el fondo, jeje. y yo me he quedao o_O.

Y he comprobado con el validador W3C, y me dice que el "overflow" no es valido.

Será el overflow q está causando problemas al i.explorer?

gracias!

decinos la url de la página...

jomaruro · #26 (**permalink**) 11/01/2010, 15:48

Hola:

Cita:

Iniciado por zoloquoki

Y he comprobado con el validador W3C, y me dice que el "overflow" no es valido.

Míra en la página del w3c.

Así que eso no es, pero sin tener tu URL...

Saludos.

zoloquoki · #27 (**permalink**) 11/01/2010, 17:33

Hola!

ayer estuve reseteando añadiendo al principio de la hoja de estilo:

* {margin:0; padding:0}

y por lo menos funciona con el i.explorer de la versión 8, pero las anteriores, no se ve correctamente, y con el chrome, con el overflow en auto, se ve como si fuese un palillo o sea, peor!

acá va mi url

gracias!

zoloquoki · #28 (**permalink**) 14/01/2010, 14:18

alguna novedad?

estoy esperando respuesta..

He estado probando en diferentes ordenadores, y aun sigue el problema de visualización de mi web en diferentes navegadores.

gracias!!

jomaruro · #29 (**permalink**) 16/01/2010, 03:56

Hola:

He probado en FF 3.5 y IE 7, y en los dos se ve correctamente. ¿Qué versión de IE es el que falla? IE8 no lo conozco pero por lo que tengo entendido tiene un modo de compatibilidad con versiones anteriores que te puede servir para solucionar el problema.

Saludos.