ayuda con posicion absoluta.....

RIVERMILLOS · #1 (**permalink**) 20/04/2010, 11:36

hola tengo la siguiente estructura....con divs

Código:

<body>
<div class="contenedor">
<div class="encabezado">
<div id="iden"><a>Hola!! <?php echo $_SESSION['usuario']; ?></a></div>
</div>

<div class="cuerpo">

<h4>Servicio al cliente</h4>
<div class="item" id="cambiar_estado"><a href='FormulaAjax/Pqr.php' class='boxy' title='cambiar estado'>Cambiar estado</a> </div>


</div>
</body>

y este el css

Código:

/*Configuraciones globales*/

/*------------------------------------------------------------------------------------------------------------*/
* {margin:0; padding:0}
a {text-decoration:none;color:#FFF;}
ul{list-style: none;width:100%;font-family:sans-serif;font-size:100%;}
h1,h2,h3,h4{margin:5% 2% 3% 0%;font-family: Arial;color:red;}
h5{margin:0% 20% 0% 0%;font-family: Arial;color:white;}
BODY {font-family:sans-serif;font-size:smaller;background-color:black; background-image:url("mclaren.jpg");float:left; min-width: 770px;background-repeat: repeat-y;}
/*------------------------------------------------------------------------------------------------------------*/

.contenedor {
dwidth:80%;
height:100%;
position:absolute;
left:14%;
top:0%;
right:5%;
min-width: 1024px;

}
.cuerpo {
height:60%;
margin:20% 15% 1% 8%;
float:left;
padding:2% 1% 0% 1%;
min-height:500px;
min-width: 770px;
}

.item{
float: left;
margin:4%;
width: 18%;
height: 15%;
background-color: blue;
border-style:double;
background-image: url("item.bmp");
}

.encabezado {
width:76%;
height:20%;
position:absolute;
top:0%;
left:8%;
background-color:#696969;
min-width: 790px;
}

pero el problema es que los item no me sale como quiero me salen como aplastados y tienen que ser rectangulares.... de width: 18% por height: 15%

el width queda bien pero el height no queda como en 4%;

saludos

Calizman · #2 (**permalink**) 20/04/2010, 13:06

Saludos!

Si lo que veo es correcto... Estas manejando todo por porcentajes? (%) No has intentado manejar todo por pixeles? (px) Creo que te funcionaría mejor... ¿Por qué? ahora lo explico:

Al trabajar con porcentajes, dejas la libertad al navegador y a la resolución a manejar los números de una forma variable. Por ejemplo... Si estas en una resolución de 800 x 600, 50% de eso será menos que en una resolución de 1024 x 768 me explico?

Intenta cambiar los porcentajes por cantidades exactas con pixeles y seguro funciona.

Hasta Luego!

PD: En el .Contenedor tienes un dwidht que hasta el momento, no he visto que exista... Creo que hay una letra de más ahí.

RIVERMILLOS · #3 (**permalink**) 20/04/2010, 13:17

Hola muchas gracias por tu respuesta pero me falto decir algo jeje con ese code coloque ...el problema radica en que en .contenedor quiero posicionarlo con float y margin y no con absolute me han dicho que es mas profesional pero si le quito el posicion:absolute; hay es cuando se me dañan los item...

tambien he probado con px pero tampoco sirve

saludos

Calizman · #4 (**permalink**) 20/04/2010, 13:35

Hola!

Lo siento, sigo sin entender lo que quieres y sin entender eso de "con px tampoco sirve" asi que dejo el espacio para que otro forero te ayude.

Hasta Luego!

alexk · #5 (**permalink**) 20/04/2010, 14:49

ponle una posicion relativa al contenedor... pero no veo muy pro flotar este pero bueno... igual no consigo entender que es lo que quieres viendo el codigo... me parece un poco inexacto... para usar este tipo de medidas...

RIVERMILLOS · #6 (**permalink**) 20/04/2010, 15:11

es que cuando quito el absolute de contenedor se me daña el tamaño de todo asi

asi se ve con absulute:

y se lo quito y queda asi

quiero hacerlo con float y margin

saludos

wilo087 · #7 (**permalink**) 07/05/2010, 10:32

Bueno esta un poco incomodo, pero al quitar el abosolute tienes que darle un alto (height) en PX. no en %. tambien puedes quitar el float y indicarle un display:inline; te funcionaria igual, tambien con un ancho (width) en PX;

creo que te funcionaria mejor.

te quedaria aldo asi:

.menus {
display:inline;
margin: 10px;
width: auto; /*Esto es si quieres que la caja se adacte al tamaño del contenido*/
width: 140px /*Esto es si quieres que tenga un tamaño espesifico, osea todas el mismo tamaño*/
height: 76px;
text-aling:left;
padding:20px;

}