Foros del Web » Creando para Internet » HTML »

alinear 2 imagenes en linea.

Estas en el tema de alinear 2 imagenes en linea. en el foro de HTML en Foros del Web. Hola amigos, tengo 2 imagenes con un poco de texto en la parte inferior, encerrados en divs. o sea, tengo 2 divs. estos divs, contienen ...
  #1 (permalink)  
Antiguo 19/07/2010, 19:16
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
alinear 2 imagenes en linea.

Hola amigos, tengo 2 imagenes con un poco de texto en la parte inferior, encerrados en divs.

o sea, tengo 2 divs.

estos divs, contienen en su interior 3 divs y un ID del texto.
con lo que.

el primer div es top. y he agregado una imagen background que es la parte superior de una caja redondeada.

el segundo div es content. he agregado una imagen background milimetrica y se repite en Y, para que abarque segun el contenido, dentro de este div he puesto tanto la imagen como el texto (el texto entre <b id="txt1"></b>)

el tercero es bottom, en este agregue la misma imagen background que top, pero volteada, o sea, que simulara el cierra de la caja redondeada.

ahora practicamente puedo decir que el SEGUNDO DIV, contiene exactamente lo mismo. (lo unico que cambiaria es la imagen y el texto del content)

y ahora:
He puesto a los background, al igual que el texto, ancho 350px (width).
y al visualizar en el navegador un div (o mejor dicho, una caja redondeada, con su respectivo content andetro) me sale el segundo abajo del primero.

y quiero que me salga exactamente igual, solo que uno alineado a la izquierda y otro a la derecha.

AYUDA =D please!!

TD: por cierto, al contenido completo de cada caja, les mencione que los encerre en divs.

les puse div id="caja1" y div id="caja2"
saludos!!
  #2 (permalink)  
Antiguo 20/07/2010, 01:40
 
Fecha de Ingreso: mayo-2010
Mensajes: 84
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: alinear 2 imagenes en linea.

asegúrate que la propiedad float esté correcta, o sea left o right, y que los anchos de los divs interiores no superan el ancho total del div exterior.
__________________
http://www.pcexpansion.es
  #3 (permalink)  
Antiguo 20/07/2010, 02:40
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: alinear 2 imagenes en linea.

XxflezhaxX

Tengo la impresión de que esto ya te lo he respondido en otra oportunidad. mira bien y aprendelo como si fuera la tabla del 2, la clave esta en position: relative y float:left , lo demás un poco de estética para que las visualices correctamente, una vez que tengas las capas 1 y 2 les metes dentro lo que quieras.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Divs alineadas hacia la izquierda</title>
  6. <style type="text/css">
  7. <!--
  8. div#Div1 {
  9.     position:relative;
  10.     width:200px;
  11.     height:115px;
  12.     z-index:1;
  13.     background-color: #993300;
  14.     float: left;
  15.    border: solid #000 1px;
  16.    margin-right: 5px;
  17. }
  18. div#Div2 {
  19.     position:relative;
  20.     width:200px;
  21.     height:115px;
  22.     z-index:2;
  23.     background-color: #0099FF;
  24.     float: left;
  25.     border: solid #000 1px;
  26. }
  27. -->
  28. </head>
  29.  
  30. <div id="Div1">contenido</div>
  31. <div id="Div2">contenido</div>
  32. </body>
  33. </html>


Saludos
  #4 (permalink)  
Antiguo 20/07/2010, 09:36
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: alinear 2 imagenes en linea.

Hola amigo, tu condigo si funciona.
Solo que tengo en duda, para que eso de z-index??

y ahora!! he tratado de similar ese codigo en un archivo que tengo, pero no me sale el resultado.

Estare practicando, tengo q lograrlo =P
Gracias
  #5 (permalink)  
Antiguo 20/07/2010, 10:02
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: alinear 2 imagenes en linea.

XxflezhaxX:

Cuando tienes varios divs en una misma página, y llegado el caso de que estos se superpongan, la propiedad z-index determina el orden en que las capas se apilan unas sobre otras, z-index: 2 hará que la capa con ese valor se ubique sobre otra capa con z-index: 1, siempre y cuando ocupen o corpantan una misma posición.

Pero la teoría es un poco aburrida, te recomiendo visites esta página
http://www.tjkdesign.com/articles/z-...ents_stack.asp

Está en inglés, pero creo que vas a encontrarla muy interesante, arrastra las capas de colores que están a la izquierda y empieza a jugar con los valores de z-index y las posiciones (fixed, static, absolute y relative)

Saludos
  #6 (permalink)  
Antiguo 20/07/2010, 14:39
 
Fecha de Ingreso: julio-2010
Ubicación: Michoacan
Mensajes: 9
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: alinear 2 imagenes en linea.

en la pagina w3schools encontraras mas informacion relacionada con divisiones, estilos y posiciones esta en ingles pero es muy ligero....
espero que te funcione
saludos!!!!

Etiquetas: alinear, imagenes, linea
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 21:09.