alinear 2 imagenes en linea.

XxflezhaxX · #1 (**permalink**) 19/07/2010, 18:16

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!!

pcexpansion · #2 (**permalink**) 20/07/2010, 00:40

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.

emprear · #3 (**permalink**) 20/07/2010, 01:40

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs alineadas hacia la izquierda</title>
<style type="text/css">
<!--
div#Div1 {
    position:relative;
    width:200px;
    height:115px;
    z-index:1;
    background-color: #993300;
    float: left;
    border: solid #000 1px;
    margin-right: 5px;
}
div#Div2 {
    position:relative;
    width:200px;
    height:115px;
    z-index:2;
    background-color: #0099FF;
    float: left;
    border: solid #000 1px;
}
-->
</style>
</head>
 
<body>
<div id="Div1">contenido</div>
<div id="Div2">contenido</div>
</body>
</html>

Saludos

XxflezhaxX · #4 (**permalink**) 20/07/2010, 08:36

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

emprear · #5 (**permalink**) 20/07/2010, 09:02

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

FgBeto · #6 (**permalink**) 20/07/2010, 13:39

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!!!!