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!!
29/10/2008, 14:21
| ||||
| ||||
| maquetar texto e imágenes 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!! |
|
29/10/2008, 14:46
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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: |
|
29/10/2008, 15:24
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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> |
|
29/10/2008, 15:58
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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!! |
|
29/10/2008, 16:11
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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 |
|
30/10/2008, 01:35
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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!! |
|
30/10/2008, 01:51
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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!! |
|
31/10/2008, 13:17
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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 |
|
01/11/2008, 02:46
| ||||
| ||||
| Respuesta: maquetar texto e imágenes 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!! |
|
01/11/2008, 12:07
| ||||
| ||||
| Respuesta: maquetar texto e imágenes Ok me meti a verlo y si se ve bien... xD espero haberte ayudado... y sino pues igual aprendi algo nuevo! jeje... Saludos |
