[Ovillo] Posicionar texto e imagen
Esto que quiero hacer lo puedo hacer sencillo con tablas pero quiero complicar las cosas un poco y hacerlo con elementos DIV y CSS. Necesito posicionar una imagen al lado de un texto. Por ejemplo algo asi como esto: -- | Titulo de la noticia | -- | texto descriptivo | imagen | | texto descriptivo | imagen | | texto descriptivo | imagen | imagen | | imagen | -- | Fecha/Hora | Enlace | Etc | -- Creo que esta podria ser una solucion, pero no estoy seguro: div id=contenedor div id=texto style=float:left; Aqui el texto div div id=imagen style=float:right; img src=imagen.jpg div div id=mas_contenido clear:both; Fecha de Publicacion de la noticia | Link de la pagina | etcdiv /div Entienden lo que les quiero decir? Algun tutorial o ayuda? Salu2 -- ReynierPM 4to. Ing. Informática Linux User: #310201 El programador superhéroe aprende de compartir sus conocimientos. Es el referente de sus compañeros. Todo el mundo va a preguntarle y él, secretamente, lo fomenta porque es así como adquiere su legendaria sabiduría: escuchando ayudando a los demás... ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Posicionar texto e imagen
Hola, On 4/4/06, Reynier Perez Mira [EMAIL PROTECTED] wrote: Esto que quiero hacer lo puedo hacer sencillo con tablas pero quiero complicar las cosas un poco y hacerlo con elementos DIV y CSS. Necesito posicionar una imagen al lado de un texto. Por ejemplo algo asi como esto: -- | Titulo de la noticia | -- | texto descriptivo | imagen | | texto descriptivo | imagen | | texto descriptivo | imagen | imagen | | imagen | -- | Fecha/Hora | Enlace | Etc | -- Creo que esta podria ser una solucion, pero no estoy seguro: div id=contenedor div id=texto style=float:left; Aqui el texto div div id=imagen style=float:right; img src=imagen.jpg div div id=mas_contenido clear:both; Fecha de Publicacion de la noticia | Link de la pagina | etcdiv /div Entienden lo que les quiero decir? Algun tutorial o ayuda? Éste está bastante bien: http://css.maxdesign.com.au/floatutorial/index.htm Espero que te sirva. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] Posicionar texto e imagen
Perfecto, me ha servido de mucho pues ya logre ubicar la imagen justo al lado
del texto. Ahora lo que quiero hacer y no logro es posicionar dos imagenes al
lado de un texto. Me explico mejor. Tengo un estilo de esta forma:
div.noticia_titulo {
font-weight: bold;
font-size: 11px;
color: #00;
padding: 1px 2px 1px 2px;
background-color: #EE;
border: 1px none #FF;
width: 90%;
}
Cuyo correspondiente en HTML es como sigue:
div class=noticia_tituloSamsung retrasa a junio el lanzamiento del Blu-ray
en Estados Unidos/div
Ahora al lado de ese texto quiero poner dos imagenes que me salgan alineadas al
top del elemento DIV. Para ello he hecho lo siguiente:
div style=float:right; padding: 1px 0px 2px 2px;
vertical-align:top;com:TImage ImageUrl=images/btn-restore.png
AlternateText=Maximizar //div
div style=float:right; padding: 1px 0px 2px 2px;
vertical-align:top;com:TImage ImageUrl=images/btn-minimize.png
AlternateText=Minimizar //div
Pero no me funciona pues las imagenes salen al lado pero alineadas hacia abajo,
algo asi como a la linea de base del texto y no es eso lo que quiero. Sino algo
asi como esto
--
| Titulo de la noticia |img | img|
| mas titulo de la not |||
--
Comprenden? Salu2
--
ReynierPM
4to. Ing. Informática
Linux User: #310201
El programador superhéroe aprende de compartir sus conocimientos. Es el
referente de sus compañeros. Todo el mundo va a preguntarle y él, secretamente,
lo fomenta porque es así como adquiere su legendaria sabiduría: escuchando
ayudando a los demás...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Posicionar texto e imagen
Reynier Perez Mira escribió:
Pero no me funciona pues las imagenes salen al lado pero alineadas hacia abajo,
algo asi como a la linea de base del texto y no es eso lo que quiero. Sino algo
asi como esto
--
| Titulo de la noticia |img | img|
| mas titulo de la not |||
--
¿Esto te vale?
div {border: 1px dotted red;} /* Ver las cajas */
#texto, #imagen1, #imagen2 {float: left;}
#texto {width: 7em;}
y el html
div id=contenedor
div id=textolljkl lkljjkllksdfjlkjdsf sdjsldfs/div
div id=imagen1uno/div
div id=imagen2dos/div
/div
--
Saludos -=stripTM=-
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] Posicionar texto e imagen
Ya esta, perfecto no se me habia ocurrido darle la propiedad float:left al DIV
que contenia el texto.
Salu2
--
ReynierPM
4to. Ing. Informática
Linux User: #310201
El programador superhéroe aprende de compartir sus conocimientos. Es el
referente de sus compañeros. Todo el mundo va a preguntarle y él, secretamente,
lo fomenta porque es así como adquiere su legendaria sabiduría: escuchando
ayudando a los demás...
-Mensaje original-
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] En nombre de stripTM
Enviado el: Tuesday, April 04, 2006 2:28 PM
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Posicionar texto e imagen
Reynier Perez Mira escribió:
Pero no me funciona pues las imagenes salen al lado pero alineadas
hacia abajo, algo asi como a la linea de base del texto y
no es eso lo
que quiero. Sino algo asi como esto
--
| Titulo de la noticia |img | img|
| mas titulo de la not |||
--
¿Esto te vale?
div {border: 1px dotted red;} /* Ver las cajas */ #texto,
#imagen1, #imagen2 {float: left;} #texto {width: 7em;}
y el html
div id=contenedor
div id=textolljkl lkljjkllksdfjlkjdsf sdjsldfs/div
div id=imagen1uno/div
div id=imagen2dos/div
/div
--
Saludos -=stripTM=-
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o
desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] Posicionar texto e imagen
Gracias Abel, creo que optaré por la segunda solución.
-Mensaje original-
De: Abel Domínguez [mailto:[EMAIL PROTECTED]
Enviado el: viernes, 06 de mayo de 2005 14:40
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] (sin asunto)
Hola Fermín,
no me queda del todo claro a falta de ver tu codigo pero quizás te valga
algo asi:
img {float:left}
luego:
img src=tuimagen.gif
pTu texto/p
Con resultado final:
Imagen | Texto
Sino, siempre puedes optar por ponerla como fondo de tu parrafo:
p{
background-imagen: url(tuimagen.gif);
background-repeat: no-repeat:
background-position: 0px 0%;
padding-left: 10px
}
Donde padding-left le tienes que marcar, claro está, el ancho de tu imagen.
Saludos,
Abel.
- Original Message -
From: Medina Pizarro, Fermín [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, May 06, 2005 2:02 PM
Subject: [Ovillo] (sin asunto)
Hola a todos:
tengo una pequeña imagen y a su lado un texto. El texto me queda en la parte
inferior de la imagen y querría que me quedase en una posición centrada con
respecto a la imagen.
¿Sabeis cómo hacerlo con CSS?
Un saludo.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
