DIVS no quiero que se aniden!

hvaliente · #1 (**permalink**) 23/07/2009, 02:13

Hola a todos,

mediante programación saco un texto al cual sí tiene fotos relacionadas las situo a la derecha en una div flotante, pero la cuestión es que cuando no hay mucho texto a la izquierda del div flotante y comienza otro texto con otra div flotante a la derecha se me montan,

textotextotextotextotextotextotextotextotexto------div
textotextotextotextotextotextotextotextotexto
textotextotexto---div
textotexto--div

yo lo que quiero es
textotextotextotextotextotextotextotextotexto -------div
textotextotextotextotextotextotextotextotexto
textotextotexto-----------------------------------------------div
textotexto-----------------------------------------------------div

espero que lo entendais.. como podría solucionarlo?

hades87 · #2 (**permalink**) 23/07/2009, 02:19

Pues ponles un margin, no?

hvaliente · #3 (**permalink**) 23/07/2009, 02:36

UN EJEMPLO, PONLE UNA IMAGEN QUE NO ME DEJA A MI POR EL SPAM O NO SE QUE...
lo que quiero es que las divs no se aniden y se fuerzen a colocarse a la derecha

<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<style>
.marco_der
{
float: right;
margin-left: 10px;
display:inline-table;
font-style:italic;
text-align:right;
}

.marco_der img
{
border: 1px solid #CCC;
padding: 2px;
margin: 0px 5px 0px 0;
}
</style>

<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <div class="marco_der"><img src="" /></div>Proin congue aliquet mi. Nullam sodales sodales diam. In a dolor. Morbi placerat lacus quis leo. Aliquam quam quam, condimentum ut, sollicitudin non, eleifend ut, lorem. Phasellus enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar placerat risus. Maecenas vulputate ultrices purus. Nunc vehicula ipsum at sapien.
<div class="marco_der"><img src="" /></div>
Etiam consectetuer tristique sapien. Suspendisse augue diam, malesuada in, blandit at, rutrum a, arcu. Nunc lectus dolor, faucibus sit amet, accumsan eu, consectetuer eu, orci. Duis ut erat. Phasellus orci velit, porttitor a, placerat vitae, fringilla sed, lorem. Vestibulum aliquet erat consectetuer justo. Quisque eget lectus eu ipsum feugiat accumsan. <div class="marco_der"><img src="" /></div>Duis venenatis tellus vel odio. Pellentesque condimentum mollis tortor. Nullam imperdiet auctor wisi. Quisque sed dui ut nibh vulputate sagittis. Donec ac sem.
</body>
</html>

kseso? · #4 (**permalink**) 23/07/2009, 03:46

Los elementos flotados no hacen crecer a su caja contenedora. Así que hay que "limpiar el float". Vamos, provocar que crezca. Para ello se añade a la caja contenedora "overflow:hidden" (o 'auto').
Display y float en el mismo selector como que no,

Y display:inline-table sólo tiene sentido si va a contener elementos con display:table-row y display:table-cell (que por cierto, ie no los entiende)

Un saludo

hvaliente · #5 (**permalink**) 23/07/2009, 03:53

div.marco_der
{
margin-left: 10px;
font-style:italic;
text-align:right;
overflow:hidden;
float:right;

}

me sigue haciendo lo mismo.... ayuda please!

kseso? · #6 (**permalink**) 23/07/2009, 05:19

Hola Hvaliente:
no dices qué estructura quieres conseguir. Así que te pongo una donde las imágenes está a la derecha con su texto a la izquierda. Y cada bloque de texto-imagen en su línea (en la horizontal)
Si lo que quisieras es que se posicione cada '.marco_der' uno al lado del otro, sólo tienes que aumentar (o eliminar) el #contenedor y a cada '.marco_der' flotarlo (mejor 'left' para que lo veas de izq a derecha según los vas escribiendo en el html) dándole una anchura.
Las imágenes que utilizo tienen todas las mismas medidas por estética.

Bueno, mira a ver este código y en base a él comentamos.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none;  position: relative;}
#contenedor {
width:600px;
margin:0 auto;
border:1px solid #444;
overflow:hidden;
}
.marco_der {
margin-left: 10px;
overflow: hidden;
}
.marco_der p {
font-size:1em;
font-style:italic;
}
.marco_der h3 {
font-size: 1.2em;
}
.marco_der img {
float:right;
border: 1px solid #CCC;
padding: 5px;
margin: 0 5px 5px 0;
background: #555;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="marco_der"><img src="index2_files/1.jpg" /><h3>PRIMERA CAJA:</h3>
<p>Proin congue aliquet mi. Nullam sodales sodales diam. In a dolor. Morbi placerat lacus quis leo. Aliquam quam quam, condimentum ut, sollicitudin non, eleifend ut, lorem. Phasellus enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar placerat risus. Maecenas vulputate ultrices purus. Nunc vehicula ipsum at sapien.</p></div>
 
<div class="marco_der"><img src="index2_files/2.jpg" /><h3>SEGUNDA CAJA:</h3>
<p>Etiam consectetuer tristique sapien. Suspendisse augue diam, malesuada in, blandit at, rutrum a, arcu. Nunc lectus dolor, faucibus sit amet, accumsan eu, consectetuer eu, orci. Duis ut erat. Phasellus orci velit, porttitor a, placerat vitae, fringilla sed, lorem. Vestibulum aliquet erat consectetuer justo. Quisque eget lectus eu ipsum feugiat accumsan. Phasellus orci velit, porttitor a, placerat vitae, fringilla sed, lorem. Vestibulum aliquet erat consectetuer justo. Quisque eget lectus eu ipsum feugiat accumsan.</p></div>
 
<div class="marco_der"><img src="index2_files/3.jpg" /><h3>TERCERA CAJA:</h3><p>Duis venenatis tellus vel odio. Pellentesque condimentum mollis tortor. Nullam imperdiet auctor wisi. Quisque sed dui ut nibh vulputate sagittis. Donec ac sem</p></div>
</div>
</body>
</html>

Un saludo

hvaliente · #7 (**permalink**) 23/07/2009, 09:07

gracias por tu atencion lo primero, te comento, no tengo mucho control sobre el etiquetado, te cuento:

tengo un FCKEDITOR en un privado para que los usuarios pongan el texto que deseen y si ponen [foto] paso por una funcion que pone la foto de esta manera:

<div class="marco_der"><a class="pop" href="userfiles/LAFOTO.JPG" rel="group" title="tITULO"><img class="mythumb" src="userfiles/LAFOTO.jpg" /></a></div>

desearía que dandose cualquier condicion, esa capa marco_der saliera siempre a la derecha...

se que es complicado pero a ver cómo me podríais ayudar...

tu codigo funciona OK, pero se dan las condiciones correctas para que funcione...

ayuda!!!

kseso? · #8 (**permalink**) 23/07/2009, 09:21

Hola de nuevo
¿Tienes en línea tu página? Si pudiésemos verlo sería mejor. Si por alguna razón no quieres hacerla pública, al menos coloca el código generado por el navegador (tanto el html como el css) de esa parte.

Mientras, cuando dices:

Cita:

desearía que dandose cualquier condicion, esa capa marco_der saliera siempre a la derecha...

¿a la derecha de qué?. Porque 'marco_der' estará contenido en alguna caja y dentro de una página.

Comenta y nos divertimos un poco

Un saludo

hvaliente · #9 (**permalink**) 23/07/2009, 09:30

www org /beta / ver_hermandad.aspx?idh=2&t=37&id=45
corrige la URL que no me deja el foro por la antiguedad... cómo lo puedo hacer!

kseso? · #10 (**permalink**) 23/07/2009, 09:44

Edito: lo siguiente está escrito sin tener en cuenta tu comentario. Lo publicaste mientras yo lo armaba

En lo que comentas sobre lo anterior:
a tu imagen le aplicas una clase (<img class="mythumb"...) así que en el css tendrá que tener esa clase definida.
Sobre el código que pusiste en el #3, lo he dejado así:

Código html:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none;  position: relative;}
.marco_der {
margin-left: 10px;
font-style:italic;
margin: 5px 10px 0;
clear:both;
overflow:hidden;
}
 
.mythumb {
border: 1px solid #CCC;
padding: 2px;
margin: 0px 5px 0px 0;
float: right;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="marco_der"><img class="mythumb" src="index2_files/1.jpg" />
Proin congue aliquet mi. Nullam sodales sodales diam. In a dolor. Morbi placerat lacus quis leo. Aliquam quam quam, condimentum ut, sollicitudin non, eleifend ut, lorem. Phasellus enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In pulvinar placerat risus. Maecenas vulputate ultrices purus. Nunc vehicula ipsum at sapien.</div>
 
<div class="marco_der"><img class="mythumb" src="index2_files/2.jpg" />
Etiam consectetuer tristique sapien. Suspendisse augue diam, malesuada in, blandit at, rutrum a, arcu. Nunc lectus dolor, faucibus sit amet, accumsan eu, consectetuer eu, orci. Duis ut erat. Phasellus orci velit, porttitor a, placerat vitae, fringilla sed, lorem. Vestibulum aliquet erat consectetuer justo. Quisque eget lectus eu ipsum feugiat accumsan. Phasellus orci velit, porttitor a, placerat vitae, fringilla sed, lorem. Vestibulum aliquet erat consectetuer justo. Quisque eget lectus eu ipsum feugiat accumsan.</div>
 
<div class="marco_der"><img class="mythumb" src="index2_files/3.jpg" />Duis venenatis tellus vel odio. Pellentesque condimentum mollis tortor. Nullam imperdiet auctor wisi. Quisque sed dui ut nibh vulputate sagittis. Donec ac sem</div>
</div>
</body>
</html>

ahora quedaría pendiente el que la imagen la colocas dentro de un enlace con la clase 'pop'.

Si te fijas en el html, la imagen la coloco antes que el texto, si va después, el resultado es distinto (se colocaría a la derecha pero debajo del texto)

Un saludo

hvaliente · #11 (**permalink**) 23/07/2009, 09:57

keseso? te agradezco sinceramente toda tu ayuda pero no puedo!! no se que c*** hacer!!!

kseso? · #12 (**permalink**) 23/07/2009, 10:12

Déjame un ratito, me bajo tu página y jugamos un rato con ella
Pero ya te adelanto, el cómo hagas tú para implementarlo en tu programación va a ser cosa tuya

Dicho de otra forma, ¿si te altero el html para que cada "título, imagen y texto explicativo" estén contenidos en su div te será problema para adaptarlo a la programación asp que usas?

Otra cosa, veo que alguna imagen queda dentro de un enlace, que no tiene destino, ¿es obligatorio que esté contenida dentro de <a>?

Un saludo

hvaliente · #13 (**permalink**) 23/07/2009, 10:12

vale, ya lo tengo!!! la cuestión es que como no tendré mucho control sobre el código va a ser j*d*do pero ya veré como salgo, MILES DE gracias!

hvaliente · #14 (**permalink**) 23/07/2009, 10:14

todo lo que me propongas será muy bienvenido muchisimas gracias!!!

"Otra cosa, veo que alguna imagen queda dentro de un enlace, que no tiene destino, ¿es obligatorio que esté contenida dentro de <a>?"
no veo el caso tras buscar en el html que se genera, pero si se dá, puedes obviarlo..

gracias!

kseso? · #15 (**permalink**) 23/07/2009, 11:27

Bueno, creí que sería algo más entretenido (la parte de (x)html + css

Te coloco la parte de los códigos que he modificado/añadido en tu archivo "style_general.css"

Código css:

Ver original* {margin:0;padding:0; border:0; outline:none;  position: relative;}
 
.marco_der
{/*modificado*/
margin:10px 0 0;
overflow:hidden;
}
.mythumb
{/*modificado*/
border:1px solid #CDCDCD;
float:right;
margin:5px 0 5px 5px;
padding:5px;
}
 
.marco_der h3 {/*añadido*/
text-transform: uppercase;
text-align:center;
letter-spacing:0.07em;
font-family:Georgia;
font-size: 1.2em;
padding: 5px;
background: #eee;
color: #202020;
border:1px solid #CDCDCD;
margin-bottom:10px;
}
.marco_der p {/*añadido*/
font-family: verdana;
font-size: 1em;
color: #444;
}
#contenedor
{/*modificado*/
    width: 560px;
    overflow:hidden;
 
}

En el resto de css no he mirado, ni tampoco si estos cambios influirán en el resto del sitio.
En el html generado lo he modificado para que quede así (sólo pongo el primer ".marco_der")

Código html:

Ver original<div id="contenedor">
<!--a partir de aquí las modificaciones -->                                               
<div class="marco_der">
   <h3>SANTA CENA</h3>
   <img class="mythumb" src="hvaliente_files/thumb_ultima_cena.jpg" />
   <p>Este paso de misterio es la &uacute;ltima incorporaci&oacute;n en nuestro desfile procesional, efectu&aacute;ndolo por primera vez en la Semana Santa de 1996. Fue realizado por Adri&aacute;n L&rsquo;abadie y se bendijo en la Funci&oacute;n del IV Domingo de Cuaresma por el Sr. Cura P&aacute;rroco D. Jos&eacute; Navarro Chaparro.<br />
Esta obra pudo llevarse a cabo gracias a los donativos, en su mayor parte an&oacute;nimos de distintas pe rsonas, tanto hermanos como no hermanos de nuestra Cofrad&iacute;a, as&iacute; como por rifas y venta de loter&iacute;a realizados por la Junta Directiva.<br />
Componen este grupo escult&oacute;rico los doce ap&oacute;stoles y la imagen de Jes&uacute;s, con infinidad de detalles que pueden apreciarse en cada una de las tallas, realizado en madera de roble. El trono es obra del carpintero de nuestra localidad D. Justo Ortega y las cartelas laterales, frontales y el llamador que son obra del hermano de nuestra Cofrad&iacute;a &Aacute;ngel Garc&iacute;a-Mu&ntilde;oz.<br />
Es el paso que inicia nuestra Estaci&oacute;n de Penitencia, el Jueves Santo; tambi&eacute;n tiene marcha procesional propia, compuesta por D. Evelio Alonso (Junior) titulada &ldquo;Santa Cena &ldquo;(Canto a una gran obra); se interpreta a la salida del Templo Parroquial y durante la procesi&oacute;n.<br />
   </p>
   </div>
<!-- seguirían el resto de "marco_der" -->
</div>
<!-- final de contenedor -->

Y aquí una imagen de cómo lo veo

Si hay algo que no, lo comentas.

Ahora es cosa tuya aplicar los cambios en la programación.

Un saludo