Alinear dos imágenes a la derecha

andyto · #1 (**permalink**) 18/05/2005, 14:20

Hola a todos.

¿Cómo puedo alinear dos imagenes a la derecha dentro de un párrafo?
He usado float: right pero no funciona:

.imgD
{
border-right: #ab6d00 thin solid;
border-top: #ab6d00 thin solid;
float: right;
margin-left: 1em;
border-left: #ab6d00 thin solid;
margin-right: 1em;
border-bottom: #ab6d00 thin solid;

}

<img class="imgD" id = "imgfunA" width ="250" height="150" alt="" src="" runat="server"/>
<img class="imgD" id = "imgfunB" width ="250" height="150" runat="server" alt="" src="" runat="server"/>


ACA va el texto la imágen 

Lo muestra de la siguiente manera

texto texto texto [Imagen] [Imagen]
texto texto texto
texto texto texto

Pero yo quiero que se vea :

texto texto texto [Imagen]
texto texto texto
texto texto texto [Imagen]

Espero que me ayuden gracias.

luisch125 · #2 (**permalink**) 18/05/2005, 15:22

Has probado a poner el texto en una celda de una tabla y las imagenes en otra celda?
Es decir, una tabla de dos columnas y una fila, el texto en la celda izquierda y las imagenes en la celda de la derecha. Luego pones el borde de la tabla a cero para que no se vean y ya esta.
Venga, un saludo...

damianx · #3 (**permalink**) 18/05/2005, 15:23

Hola, no se como es el texto, pero de la forma mas facil sin cambiar casi nada de lo que mostraste seria colocar el texto en dos parrafos separados y colocar cada imagen al lado de cada parrafo.
imagen
parrafo
imagen
parrafo

saludos

CORE · #4 (**permalink**) 18/05/2005, 23:22

<img class="imgD" id = "imgfunA" width ="250" height="150" alt="" src="" runat="server"/>
<img class="imgD" id = "imgfunB" width ="250" height="150" runat="server" alt="" src="" runat="server"/>ACA va el texto la imágen 

cheka si asi solo metiendo las imagenes dentro del parrafo y antes del texto

saludos

andyto · #5 (**permalink**) 19/05/2005, 06:53

Cita:

Iniciado por luisch125

Has probado a poner el texto en una celda de una tabla y las imagenes en otra celda?
Es decir, una tabla de dos columnas y una fila, el texto en la celda izquierda y las imagenes en la celda de la derecha. Luego pones el borde de la tabla a cero para que no se vean y ya esta.
Venga, un saludo...

Uhmm, luisch125 por allí leí que las tablas sólo deberían usarse para tabular datos y no para acomodar elementos en el diseño.

O ¿Me estoy equivocando y sí se puede aplicar en este caso.?

Gracias de todas formas.

andyto · #6 (**permalink**) 19/05/2005, 07:00

Cita:

Iniciado por damianx

Hola, no se como es el texto, pero de la forma mas facil sin cambiar casi nada de lo que mostraste seria colocar el texto en dos parrafos separados y colocar cada imagen al lado de cada parrafo.
imagen
parrafo
imagen
parrafo

saludos

El texto, si te refires a su class, sólo le pongo la fuente y el color.
Por otra parte lo que dices de separar el texto en dos parrafos es buena, pero yo traigo el texto de una base de datos.
¿Cómo dividirlo en dos parrafos? Porque lo que yo quiero es lo siguiente:

Texto TextoTexto Texto Texto [Imagen]
Texto TextoTexto Texto Texto
Texto TextoTexto Texto Texto
Texto TextoTexto Texto Texto
Texto TextoTexto Texto Texto
Texto TextoTexto Texto Texto [Imagen]
Texto TextoTexto Texto Texto

La primera imágen puede alcanzar 3 lineas y luego la segunda imagen sigue despues de un , siempre el texto debe estar al lado izquierdo.

Gracias de todas formas.

andyto · #7 (**permalink**) 19/05/2005, 07:03

Cita:

Iniciado por CORE

<img class="imgD" id = "imgfunA" width ="250" height="150" alt="" src="" runat="server"/>
<img class="imgD" id = "imgfunB" width ="250" height="150" runat="server" alt="" src="" runat="server"/>ACA va el texto la imágen 

cheka si asi solo metiendo las imagenes dentro del parrafo y antes del texto

saludos

GRacias CORE, pero no me ha funcionado, igual me pone:.

texto [imagen][imagen]
texto
texto
texto texto texto texto
texto texto texto texto

¿Qué otra solución me sugieres?

luisch125 · #8 (**permalink**) 19/05/2005, 07:03

Bueno, las tablas tambien las puedes usar para colocar elementos en la web. De hecho, muchas veces te facilitan la organización de la página. No veo por que no deberían usarse...
Saludos.

CORE · #9 (**permalink**) 19/05/2005, 10:04

agrega a la clase

clear:both;

damianx · #10 (**permalink**) 19/05/2005, 10:44

Una posible solucion es que hagas una sola imagen de ambas imagenes (salvo que tambien las traigas del servidor).
La solucion de luisch25 no es la mejor es verdad, pero nadie te va a condenar si de vez en cuando usas una tabla para maquetear contenido. Las funcion de las tablas es disponer contenidos en forma tabular justamente, colocarias el texto en una celda y las imagenes en otra, no es que estas utilizando spacers o generando espacios en blanco con celdas vacias, eso es lo que esta mal de diseñar con tablas, no utilizar tablas en forma sencilla y aplicandole los estilos que correspondan.
Saludos.

CORE · #11 (**permalink**) 19/05/2005, 15:09

Acabo de hacer unas pruebas, me imagino que esto es lo que quieres?

el codigo es

Código:

<style type="text/css">
<!--
img {
	clear: both;
	float: right;
	margin: 10px;
	height: 100px;
	width: 120px;
}
p {
	width: 450px;
	background-color: #f4f4f4;
	text-align: justify;
	padding: 10px;
	font-size: 12px;
}
-->
</style>
</head>

<body>
<p><img src="sol.jpg"><img src="fares.jpg">L0orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

andyto · #12 (**permalink**) 20/05/2005, 14:38

damianx tiene razón sobre cuando se debe usar las tablas y cuando no, pero Core tiene la solución sin utilizar las tablas.
Sólo me faltaba poner el clear: both;

Gracias a todos por sus respuestas.

pixelperu · #13 (**permalink**) 01/06/2005, 09:21

Sería bueno que por iniciativa propia, los diseñadores en especial quienes provienen de las áreas del diseño gráfico, tomen en consideración que el uso primigenio de las tablas fué para "tabular" no para contener imágenes ni texto.
Pero el diseño web casi desde sus inicios adoptó el utilizarlas como contenedores de texto, imágenes y todo cuanto pudiera ser posible. Pero, y la accesibilidad?
Ahi entra en acción el CSS, que te permite posicionar cualquier elemento, en cualquier zona de la página, uses un diseño líquido, o sólido. Para muestras solo visiten http://www.csszengarden.com/ y elijan cualquiera de los modelos de web (en la columna de la dereha) y verán Todas las variantes de diseño que se pueden efectuar partiendo de un mismo archivo HTML, y variando solo el CSS.

Provecho con la vista.

Saludos cordiales