maquetar texto e imágenes

Aresillo · #1 (**permalink**) 29/10/2008, 14:21

Hola..
Quería saber cual es el proceso para poder maquetar un texto poniendo imágenes entremedias... de tal forma que se pueda posicionar una imagen y el texto esté alrededor...puede ser con z-index al mismo nivel?

Aresillo!!

Aresillo · #2 (**permalink**) 29/10/2008, 14:46

Os dejo al código que he llegado y por el cual puedo posicionar imagenes a la izda o a la dcha sin problema... y si va en el centro u otra posición? como se hace...

Código PHP:

  <html>

<head>

<style>

#container{

margin:auto;

width:800px;

}

#principal{

text-align:justify;

}

#foto1{

    border:1px solid #000000;

    width:134px;

    height:138px;

    float: right;

    margin: 3px;

}

#foto2{

    border:1px solid #000000;

    width:134px;

    height:138px;

    float: left;

    margin: 3px;

}

</style>

</head>

<body>

<div id="container">

<div id="principal">

<p>LLorem

ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum

commodo orci. Nulla eget purus nec massa cursus ullamcorper. Donec quis

justo. Pellentesque fermentum. Etiam pharetra, ipsum eget faucibus

malesuada, ante elit tristique nibh, ut commodo sem dolor aliquam ante.

Aliquam ut leo rhoncus arcu dictum sodales. Morbi viverra, dui vel

mollis iaculis, urna libero <div id="foto1"><img src="../web/pictures/lagartijaagua.jpg" /></div>tincidunt leo, nec interdum ligula lacus

congue lacus. Nam porttitor, nibh quis scelerisque lobortis, neque diam

consectetuer magna, sit amet mattis diam quam vitae erat. Donec wisi

tortor, lacinia et, blandit nec, semper nec, urna. Aliquam erat

volutpat.</p>

            <p> Aliquam erat volutpat. Sed ac augue non

libero commodo lacinia. Morbi molestie augue at felis. Mauris ornare,

est ac imperdiet vehicula, tortor dui sagittis lacus, sed tempor lorem

tellus ut turpis. Donec dui est, rhoncus sit amet, bibendum sed, rutrum

sit amet, ligula. Suspendisse ac sapien ac mi posuere rutrum. Vivamus

sollicitudin, mi eu vehicula convallis, sem magna blandit purus, id

pellentesque augue dui vitae urna. Nam imperdiet. Curabitur libero.

Suspendisse sodales sem in nunc. Proin diam augue, nonummy non, posuere

in, lacinia eget, pede. Pellentesque felis sem, cursus mattis, commodo

et, condimentum egestas, quam. Morbi lacinia. Praesent pulvinar elit

vitae arcu. Integer sagittis metus ut justo. Etiam pharetra adipiscing

nunc. </p>

            <p> Etiam sodales nulla non neque. Duis

porttitor faucibus leo. Pellentesque habitant morbi <div id="foto2"><img src="../web/pictures/lagartijaagua.jpg" /></div>tristique senectus

et netus et malesuada fames ac turpis egestas. Mauris ipsum nunc,

sodales nec, faucibus quis, euismod at, arcu. Phasellus id odio. Aenean

nibh mauris, venenatis eget, commodo id, gravida ut, arcu. Pellentesque

dui metus, nonummy sit amet, aliquet sed, pretium sit amet, diam. Sed

dapibus rhoncus sem. Integer blandit elit at mauris. Praesent vel nunc

a massa lacinia pharetra. Etiam nibh arcu, rhoncus a, ultrices et,

feugiat in, ipsum. Phasellus suscipit tincidunt urna. </p>

            <p>

Vivamus mattis eros euismod lectus. Suspendisse potenti. Vestibulum

justo odio, ullamcorper a, semper in, eleifend non, turpis. Nunc urna

pede, blandit vehicula, gravida at, luctus a, leo. Nulla facilisi.

Etiam vitae elit ut nisl tempor pretium. Aliquam erat volutpat. Fusce

molestie commodo wisi. Proin pretium libero in eros. Donec blandit.

Mauris blandit, ligula non convallis laoreet, sapien nunc elementum

metus, eu accumsan sapien est sollicitudin mauris. Aliquam vulputate.

Nulla eget massa quis sapien pulvinar ornare. Integer suscipit magna

eget orci. Sed rutrum adipiscing tortor. Donec aliquet dapibus neque.

Aliquam sed arcu non est sollicitudin lobortis. </p>

            <p>

Sagittis lacus, sed tempor lorem tellus ut turpis. Donec dui est,

rhoncus sit amet, bibendum sed, rutrum sit amet, ligula. Suspendisse ac

sapien ac mi posuere rutrum. Vivamus sollicitudin, mi eu vehicula

convallis, sem magna blandit purus, id pellentesque augue dui vitae

urna. Nam imperdiet. Curabitur libero. Suspendisse sodales sem in nunc.

Proin diam augue, nonummy non, posuere in, lacinia eget, pede.

Pellentesque felis sem, cursus mattis, commodo et, condimentum egestas,

quam. Morbi lacinia. Praesent pulvinar elit vitae arcu. Integer

sagittis metus ut justo. Etiam pharetra adipiscing nunc. </p>

            <p>

Pellentesque habitant morbi tristique senectus et netus et malesuada

fames ac turpis egestas. Mauris ipsum nunc, sodales nec, faucibus quis,

euismod at, arcu. Phasellus id odio. Aenean nibh mauris, venenatis

eget, commodo id, gravida ut, arcu. Pellentesque dui metus, nonummy sit

amet, aliquet sed, pretium sit amet, diam. </p>

</div>

</div>

</body>

</html>

Aresillo!!

Calizman · #3 (**permalink**) 29/10/2008, 15:24

Hola Aresillo!

Realmente me gustaria ayudarte pero no entiendo mucho que es lo que quieres... por lo que entiendo... quieres que las imagenes te queden a la par del texto sin que se altere... creo que masomenos eso entiendo... que tal si pruebas encerrar cada parrafo en un div a manera de hacer cada div individual... porque veo que todo tu texto esta encerrado en un solo div y las imagenes en dos div diferentes... intenta algo asi

Cita:

<html>
<head>
<style>
#container{
margin:auto;
width:800px;
}
#principal{
text-align:justify;
}
#foto1{
border:1px solid #000000;
width:134px;
height:138px;
float: right;
margin: 3px;
}
#foto2{
border:1px solid #000000;
width:134px;
height:138px;
float: left;
margin: 3px;
}
</style>
<title>pagina</title></head>
<body>
<p>
</p><div id="container">
<div id="principal">
LLorem
ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum
commodo orci. Nulla eget purus nec massa cursus ullamcorper. Donec quis
justo. Pellentesque fermentum. Etiam pharetra, ipsum eget faucibus
malesuada, ante elit tristique nibh, ut commodo sem dolor aliquam ante.
Aliquam ut leo rhoncus arcu dictum sodales. Morbi viverra, dui vel
mollis iaculis, urna libero

</div></div>
<p>
</p><div id="container">
<div id="principal"><div id="foto1"><img style="float: right; width: 31px; height: 35px;" alt="" src="../web/pictures/lagartijaagua.jpg" /></div>
tincidunt leo, nec interdum ligula lacus
congue lacus. Nam porttitor, nibh quis scelerisque lobortis, neque diam
consectetuer magna, sit amet mattis diam quam vitae erat. Donec wisi
tortor, lacinia et, blandit nec, semper nec, urna. Aliquam erat
volutpat.
</div></div>

<p>
</p><div id="container">
<div id="principal">
Aliquam erat volutpat. Sed ac augue non
libero commodo lacinia. Morbi molestie augue at felis. Mauris ornare,
est ac imperdiet vehicula, tortor dui sagittis lacus, sed tempor lorem
tellus ut turpis. Donec dui est, rhoncus sit amet, bibendum sed, rutrum
sit amet, ligula. Suspendisse ac sapien ac mi posuere rutrum. Vivamus
sollicitudin, mi eu vehicula convallis, sem magna blandit purus, id
pellentesque augue dui vitae urna. Nam imperdiet. Curabitur libero.
Suspendisse sodales sem in nunc. Proin diam augue, nonummy non, posuere
in, lacinia eget, pede. Pellentesque felis sem, cursus mattis, commodo
et, condimentum egestas, quam. Morbi lacinia. Praesent pulvinar elit
vitae arcu. Integer sagittis metus ut justo. Etiam pharetra adipiscing
nunc.

</div></div>
<p>
</p><div id="container">
<div id="principal">
Etiam sodales nulla non neque. Duis
porttitor faucibus leo. Pellentesque habitant morbi

</div></div>
<p>
</p><div id="container">
<div id="principal">
<div id="foto2"><img src="../web/pictures/lagartijaagua.jpg" /></div>
tristique senectus
et netus et malesuada fames ac turpis egestas. Mauris ipsum nunc,
sodales nec, faucibus quis, euismod at, arcu. Phasellus id odio. Aenean
nibh mauris, venenatis eget, commodo id, gravida ut, arcu. Pellentesque
dui metus, nonummy sit amet, aliquet sed, pretium sit amet, diam. Sed
dapibus rhoncus sem. Integer blandit elit at mauris. Praesent vel nunc
a massa lacinia pharetra. Etiam nibh arcu, rhoncus a, ultrices et,
feugiat in, ipsum. Phasellus suscipit tincidunt urna.
</div></div>
<p>
</p><div id="container">
<div id="principal">
Vivamus mattis eros euismod lectus. Suspendisse potenti.
Vestibulum
justo odio, ullamcorper a, semper in, eleifend non, turpis. Nunc urna
pede, blandit vehicula, gravida at, luctus a, leo. Nulla facilisi.
Etiam vitae elit ut nisl tempor pretium. Aliquam erat volutpat. Fusce
molestie commodo wisi. Proin pretium libero in eros. Donec blandit.
Mauris blandit, ligula non convallis laoreet, sapien nunc elementum
metus, eu accumsan sapien est sollicitudin mauris. Aliquam vulputate.
Nulla eget massa quis sapien pulvinar ornare. Integer suscipit magna
eget orci. Sed rutrum adipiscing tortor. Donec aliquet dapibus neque.
Aliquam sed arcu non est sollicitudin lobortis.
</div></div>
<p>
</p><div id="container">
<div id="principal">
Sagittis lacus, sed tempor lorem tellus ut turpis. Donec dui est,
rhoncus sit amet, bibendum sed, rutrum sit amet, ligula. Suspendisse ac
sapien ac mi posuere rutrum. Vivamus sollicitudin, mi eu vehicula
convallis, sem magna blandit purus, id pellentesque augue dui vitae
urna. Nam imperdiet. Curabitur libero. Suspendisse sodales sem in nunc.
Proin diam augue, nonummy non, posuere in, lacinia eget, pede.
Pellentesque felis sem, cursus mattis, commodo et, condimentum egestas,
quam. Morbi lacinia. Praesent pulvinar elit vitae arcu. Integer
sagittis metus ut justo. Etiam pharetra adipiscing nunc.
</div></div>
<p>
</p><div id="container">
<div id="principal">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Mauris ipsum nunc, sodales nec, faucibus quis,
euismod at, arcu. Phasellus id odio. Aenean nibh mauris, venenatis
eget, commodo id, gravida ut, arcu. Pellentesque dui metus, nonummy sit
amet, aliquet sed, pretium sit amet, diam.
</div>
</div>
</body>
</html>

Aresillo · #4 (**permalink**) 29/10/2008, 15:58

Ok, lo único que hay que estar cuadrando el texto (tantas líneas según el alto de la imagen) y es un coñazo, pensé que habría algo más cómodo.
Por otro lado, que pasaría si alguien decide agrandar el texto? o si el ancho del div del texto es autoajustable a la página?

A alguien se le ocurre alguna otra cosilla..??
Gracias CaLiZzZ!

Aresillo!!

Calizman · #5 (**permalink**) 29/10/2008, 16:11

mmm... podrias pensar en poner el tamaño del div en % de la pagina... asi si alguien cambia el tamaño del texto... cambia el div tambien... no con px sino que con % ke dices? intentalo y me avisas... jeje...

No es la mejor solucion pero es lo que se me ocurre! si veo algo diferente por el mundo de la web no dudes en ke te lo pondre!

Saludos

Aresillo · #6 (**permalink**) 29/10/2008, 16:16

Gracias de nuevo!
Ya lo pruebo mañana!

Aresillo!!

Calizman · #7 (**permalink**) 29/10/2008, 16:17

ok!
De nada!

Saludos

Aresillo · #8 (**permalink**) 30/10/2008, 01:35

Nada CaLiZzZ,
la solución funciona pero no me vale si quiero poner una imagen en el centro y que el texto la bordee...
A ver si a alguien se le ocurre algo...?

Es raro porque esta duda tiene que ser normal no? y no la encuentro por ningún lado...

Un saludo!

Aresillo!!

Aresillo · #9 (**permalink**) 30/10/2008, 01:51

Qué tal CaliZzZ
Mira lo que he encontrado...
La demostración de la herramienta(en inglés)

Y aquí la propia herramienta...

No es exactamente lo que quiero pero me ha parecido curioso comentarlo... aunque me parece que es un jaleo de divs que flipas!

Aresillo!!

Aresillo · #10 (**permalink**) 30/10/2008, 03:09

Ya he hecho más o menos lo que quiero...
Link

Aresillo!!

Calizman · #11 (**permalink**) 31/10/2008, 13:17

Ok... revise los links que enviaste y pues espero que encuentres lo que buscas... realmente no muy entendi tu idea pero creo que aqui ayudamos a como podemos... jeje... habia pensado tambien en esto! jeje... creo que di con la respuesta y es una propiedad de la imagen... seria asi: <img src="../web/pictures/lagartijaagua.jpg" align="midle" /> pruebalo y si te sirve me avisas! jeje...

Saludos

Aresillo · #12 (**permalink**) 01/11/2008, 02:46

Ya lo he finiquitado poniendo un div para el texto y donde quiero dentro meto otro div por cada imagen... luego las posiciono y listo... he creado archivos png para las imágenes para su sombreado... y z-index para orden de solapamiento...
Lo único malo que se ve en ff y en ie7 o superior...

El resultado aquí

Aresillo!!

Calizman · #13 (**permalink**) 01/11/2008, 12:07

Ok me meti a verlo y si se ve bien... xD espero haberte ayudado... y sino pues igual aprendi algo nuevo! jeje...

Saludos