Foros del Web » Creando para Internet » CSS »

maquetar texto e imágenes

Estas en el tema de maquetar texto e imágenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/10/2008, 15:21
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
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!!
  #2 (permalink)  
Antiguo 29/10/2008, 15:46
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
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:
<html>
<
head>
<
style>
#container{
margin:auto;
width:800px;
}
#principal{
text-align:justify;
}
#foto1{
    
border:1px solid #000000;
    
width:134px;
    
height:138px;
    
floatright;
    
margin3px;
}
#foto2{
    
border:1px solid #000000;
    
width:134px;
    
height:138px;
    
floatleft;
    
margin3px;
}
</
style>
</
head>
<
body>
<
div id="container">
<
div id="principal">
<
p>LLorem
ipsum dolor sit amet
consectetuer adipiscing elitNulla condimentum
commodo orci
Nulla eget purus nec massa cursus ullamcorperDonec quis
justo
Pellentesque fermentumEtiam pharetraipsum eget faucibus
malesuada
ante elit tristique nibhut commodo sem dolor aliquam ante.
Aliquam ut leo rhoncus arcu dictum sodalesMorbi viverradui vel
mollis iaculis
urna libero <div id="foto1"><img src="../web/pictures/lagartijaagua.jpg" /></div>tincidunt leonec interdum ligula lacus
congue lacus
Nam porttitornibh quis scelerisque lobortisneque diam
consectetuer magna
sit amet mattis diam quam vitae eratDonec wisi
tortor
lacinia etblandit necsemper necurnaAliquam erat
volutpat
.</p>
            <
pAliquam erat volutpatSed ac augue non
libero commodo lacinia
Morbi molestie augue at felisMauris ornare,
est ac imperdiet vehiculatortor dui sagittis lacussed tempor lorem
tellus ut turpis
Donec dui estrhoncus sit ametbibendum sedrutrum
sit amet
ligulaSuspendisse ac sapien ac mi posuere rutrumVivamus
sollicitudin
mi eu vehicula convallissem magna blandit purusid
pellentesque augue dui vitae urna
Nam imperdietCurabitur libero.
Suspendisse sodales sem in nuncProin diam auguenonummy nonposuere
in
lacinia egetpedePellentesque felis semcursus mattiscommodo
et
condimentum egestasquamMorbi laciniaPraesent pulvinar elit
vitae arcu
Integer sagittis metus ut justoEtiam pharetra adipiscing
nunc
. </p>
            <
pEtiam sodales nulla non nequeDuis
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 necfaucibus quiseuismod atarcuPhasellus id odioAenean
nibh mauris
venenatis egetcommodo idgravida utarcuPellentesque
dui metus
nonummy sit ametaliquet sedpretium sit ametdiamSed
dapibus rhoncus sem
Integer blandit elit at maurisPraesent vel nunc
a massa lacinia pharetra
Etiam nibh arcurhoncus aultrices et,
feugiat inipsumPhasellus suscipit tincidunt urna. </p>
            <
p>
Vivamus mattis eros euismod lectusSuspendisse potentiVestibulum
justo odio
ullamcorper asemper ineleifend nonturpisNunc urna
pede
blandit vehiculagravida atluctus aleoNulla facilisi.
Etiam vitae elit ut nisl tempor pretiumAliquam erat volutpatFusce
molestie commodo wisi
Proin pretium libero in erosDonec blandit.
Mauris blanditligula non convallis laoreetsapien nunc elementum
metus
eu accumsan sapien est sollicitudin maurisAliquam vulputate.
Nulla eget massa quis sapien pulvinar ornareInteger suscipit magna
eget orci
Sed rutrum adipiscing tortorDonec aliquet dapibus neque.
Aliquam sed arcu non est sollicitudin lobortis. </p>
            <
p>
Sagittis lacussed tempor lorem tellus ut turpisDonec dui est,
rhoncus sit ametbibendum sedrutrum sit ametligulaSuspendisse ac
sapien ac mi posuere rutrum
Vivamus sollicitudinmi eu vehicula
convallis
sem magna blandit purusid pellentesque augue dui vitae
urna
Nam imperdietCurabitur liberoSuspendisse sodales sem in nunc.
Proin diam auguenonummy nonposuere inlacinia egetpede.
Pellentesque felis semcursus mattiscommodo etcondimentum egestas,
quamMorbi laciniaPraesent pulvinar elit vitae arcuInteger
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 nuncsodales necfaucibus quis,
euismod atarcuPhasellus id odioAenean nibh maurisvenenatis
eget
commodo idgravida utarcuPellentesque dui metusnonummy sit
amet
aliquet sedpretium sit ametdiam. </p>
</
div>
</
div>
</
body>
</
html
Aresillo!!
  #3 (permalink)  
Antiguo 29/10/2008, 16:24
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
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>
  #4 (permalink)  
Antiguo 29/10/2008, 16:58
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
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!!
  #5 (permalink)  
Antiguo 29/10/2008, 17:11
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
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
  #6 (permalink)  
Antiguo 29/10/2008, 17:16
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: maquetar texto e imágenes

Gracias de nuevo!
Ya lo pruebo mañana!

Aresillo!!
  #7 (permalink)  
Antiguo 29/10/2008, 17:17
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: maquetar texto e imágenes

ok!
De nada!

Saludos
  #8 (permalink)  
Antiguo 30/10/2008, 02:35
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
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!!
  #9 (permalink)  
Antiguo 30/10/2008, 02:51
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
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!!
  #10 (permalink)  
Antiguo 30/10/2008, 04:09
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: maquetar texto e imágenes

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

Aresillo!!
  #11 (permalink)  
Antiguo 31/10/2008, 14:17
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
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
  #12 (permalink)  
Antiguo 01/11/2008, 03:46
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
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!!
  #13 (permalink)  
Antiguo 01/11/2008, 13:07
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:46.