Foros del Web » Creando para Internet » CSS »

ayuda con posicion absoluta.....

Estas en el tema de ayuda con posicion absoluta..... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/04/2010, 12:36
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
ayuda con posicion absoluta.....

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
  #2 (permalink)  
Antiguo 20/04/2010, 14:06
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: ayuda con posicion absoluta.....

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í.
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 20/04/2010, 14:17
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con posicion absoluta.....

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
  #4 (permalink)  
Antiguo 20/04/2010, 14:35
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: ayuda con posicion absoluta.....

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 20/04/2010, 15:49
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: ayuda con posicion absoluta.....

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...
  #6 (permalink)  
Antiguo 20/04/2010, 16:11
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con posicion absoluta.....

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
  #7 (permalink)  
Antiguo 07/05/2010, 11:32
 
Fecha de Ingreso: agosto-2009
Mensajes: 78
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: ayuda con posicion absoluta.....

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;

}

Etiquetas: posicion
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 17:06.