Foros del Web » Creando para Internet » CSS »

Problema con posicionamiento

Estas en el tema de Problema con posicionamiento en el foro de CSS en Foros del Web. Hola soy algo nuevo con el diseño con css , creo q estoy planteando mal la forma con la que busco que tres divs esten ...
  #1 (permalink)  
Antiguo 24/11/2010, 19:20
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años
Puntos: 0
Problema con posicionamiento

Hola soy algo nuevo con el diseño con css , creo q estoy planteando mal la forma con la que busco que tres divs esten en fila dentro de un div mas grande, por ejemplo tome un div "Banner" donde dentro hay 3 divs (B_P1,B_P2 y B_P3) B_P1 tiene float:left , B_P3 tiene float:right y para q esten en la misma linea los divs use la propiedad Display:inline-block , anda todo perfecto pero cuando lo ejecuto en chrome se desarma todo.aca adjunto el css y el html.
div {
margin:0px;
padding:none;
border:none;
}
#B_P1 , #B_P2 , #B_P3 {Display:inline-block;}
#Banner{
margin:0px auto;
width:100%;
height:168px;
}
#B_P1 , #B_P2 , #B_P3{height:100%;}
#B_P1{
float:left;
width:83px;
background-image:url(Banner_1.jpg);
background-repeat:no-repeat;
background-color:#000;
}
#B_P2{
width:917px;
background-image:url(Banner_2.jpg);
background-repeat:repeat-x;
}
#B_P3{
float:right;
width:91px;
background-image:url(Banner_3.png);
}

Html:
<Body>
<div id="Banner">
<div id="B_P1">
</div>
<div id="B_P2">
</div>
<div id="B_P3">
</div>
</div>
</Body>
  #2 (permalink)  
Antiguo 24/11/2010, 19:51
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Problema con posicionamiento

No me detuve a revisar mucho el codigo por falta de tiempo, pero normalmente las simulacion de tablas con css se crea con listas:

Una ayuda, utiliza 960 framework...puedes aprender mucho de su implementacion.

Código:
<Body>
<head>
<style>
UL.col3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 15px 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}

UL.col3 LI
{
PADDING-RIGHT: 2px;
DISPLAY: inline;
PADDING-LEFT: 2px;
FLOAT: left;
PADDING-BOTTOM: 2px;
WIDTH: 30%;
PADDING-TOP: 2px
} 
</style>
</head>
<ul class="col3">
<li>Lo que sea</li>
<li>Segunda opcion</li>
<li>Tercera cosa</li>
<li>Otra cosa, que aparecerá en la primera columna</li>
<li>Otra cosa para la segunda columna</li>
<li>Y esto para la tercera columna</li>
</ul>
</Body>
Tambien esta l uso de este codigo en el div contenedor.
Código:
white-space: nowrap;
Saludos,

Última edición por SPAWN3000; 24/11/2010 a las 20:00

Etiquetas: posicionamiento
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 18:44.