Foros del Web » Creando para Internet » HTML »

Alinear dos imágenes a la derecha

Estas en el tema de Alinear dos imágenes a la derecha en el foro de HTML en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 18/05/2005, 15:20
 
Fecha de Ingreso: septiembre-2004
Mensajes: 19
Antigüedad: 13 años, 2 meses
Puntos: 0
Alinear dos imágenes a la derecha

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"/>


<p class ="texto" id ="funciones">
ACA va el texto la imágen </p>

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.
  #2 (permalink)  
Antiguo 18/05/2005, 16:22
Avatar de luisch125  
Fecha de Ingreso: mayo-2005
Ubicación: Elche, Alicante
Mensajes: 632
Antigüedad: 12 años, 7 meses
Puntos: 3
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...
  #3 (permalink)  
Antiguo 18/05/2005, 16:23
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
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
  #4 (permalink)  
Antiguo 19/05/2005, 00:22
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
<p class ="texto" id ="funciones">
<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 </p>

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

saludos
  #5 (permalink)  
Antiguo 19/05/2005, 07:53
 
Fecha de Ingreso: septiembre-2004
Mensajes: 19
Antigüedad: 13 años, 2 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 19/05/2005, 08:00
 
Fecha de Ingreso: septiembre-2004
Mensajes: 19
Antigüedad: 13 años, 2 meses
Puntos: 0
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 <br>, siempre el texto debe estar al lado izquierdo.

Gracias de todas formas.
  #7 (permalink)  
Antiguo 19/05/2005, 08:03
 
Fecha de Ingreso: septiembre-2004
Mensajes: 19
Antigüedad: 13 años, 2 meses
Puntos: 0
Cita:
Iniciado por CORE
<p class ="texto" id ="funciones">
<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 </p>

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?
  #8 (permalink)  
Antiguo 19/05/2005, 08:03
Avatar de luisch125  
Fecha de Ingreso: mayo-2005
Ubicación: Elche, Alicante
Mensajes: 632
Antigüedad: 12 años, 7 meses
Puntos: 3
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.
  #9 (permalink)  
Antiguo 19/05/2005, 11:04
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
agrega a la clase

clear:both;
  #10 (permalink)  
Antiguo 19/05/2005, 11:44
 
Fecha de Ingreso: mayo-2005
Mensajes: 306
Antigüedad: 12 años, 6 meses
Puntos: 0
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.
  #11 (permalink)  
Antiguo 19/05/2005, 16:09
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3


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>
  #12 (permalink)  
Antiguo 20/05/2005, 15:38
 
Fecha de Ingreso: septiembre-2004
Mensajes: 19
Antigüedad: 13 años, 2 meses
Puntos: 0
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.
  #13 (permalink)  
Antiguo 01/06/2005, 10:21
Avatar de pixelperu  
Fecha de Ingreso: noviembre-2004
Mensajes: 16
Antigüedad: 13 años
Puntos: 0
Ventajas del CSS - Muestras

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

Última edición por pixelperu; 01/06/2005 a las 10:26 Razón: Añadir información
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 10:28.