Foros del Web » Creando para Internet » CSS »

Problema usando float y position, perdiendo el alto de div viendose mal los demas div

Estas en el tema de Problema usando float y position, perdiendo el alto de div viendose mal los demas div en el foro de CSS en Foros del Web. Muchas gracias por leer mi problemilla, tengo el siguiente ejemplo http://www.websalvador.com/ejemplos/ejemplo-montar-div-sobreotros.html resulta que deseo en mi diseño tengo tres div contenedores principales: cont-encabezado (color amarillo), ...
  #1 (permalink)  
Antiguo 19/07/2012, 23:21
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 12 años, 8 meses
Puntos: 2
Problema usando float y position, perdiendo el alto de div viendose mal los demas div

Muchas gracias por leer mi problemilla, tengo el siguiente ejemplo http://www.websalvador.com/ejemplos/ejemplo-montar-div-sobreotros.html resulta que deseo en mi diseño tengo tres div contenedores principales: cont-encabezado (color amarillo), cont-cuerpo (color rojo) y cont-pie-pagina (color azul).

Deseo que de la apariencia que el div cont-cuerpo (color rojo)esta montado sobre los dos restantes tal como se ve en mi ejemplo, claro se ve así porque le puse a un div que esta dentro un alto especifico (<div id="cuerpo-design" style="height:700px">) pero si saco este valor se ve mal como este ejemplo http://www.websalvador.com/ejemplos/ejemplo-montar-div-sobreotros-mal.html.

Mi problema es el siguiente como los elementos div que están dentro de "cont-cuerpo" están usando float para ubicarlos y position absolute y relative para dar la apariencia de montado encima, no se porque no respeta su valor de alto que debe tener y el div cont-pie-pagina se va inmediatamente arriba debajo de cont-encabezado sin tomar en cuenta a cont-cuerpo.

La solución tal sea dando un valor height:xxx px como lo hice en http://www.websalvador.com/ejemplos/ejemplo-montar-div-sobreotros.html pero si el div se le agrega párrafos el alto crecería y quiero usarlo para varias paginas no solo para uno, siempre se me presenta este error cuando en unos div uso float y en los demás no.

POr fa tal vez algo estoy pasando por alto les agradeceré un montón.

En los ejemplo html estan los ejemplos css.
__________________
Studio Web Salvador http://www.acuarel.pe/
  #2 (permalink)  
Antiguo 20/07/2012, 11:19
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

Por fa alguna alguna sugerencia, les agradeceré mucho si tal vez me escriben si no entienden para explicarles porfa.
__________________
Studio Web Salvador http://www.acuarel.pe/
  #3 (permalink)  
Antiguo 20/07/2012, 13:24
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

POrfa realmente es urgente no puedo avanzar mi diseño con este problema, tal vez sea muy obvio la respuesta que no me la dan pero porfa les agradecere
__________________
Studio Web Salvador http://www.acuarel.pe/
  #4 (permalink)  
Antiguo 20/07/2012, 15:42
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

Yo creo que atacaste mal el problema no se para que usaste position absolute si con margins negativos se puede hacer.

Ahí te va un ejemplo

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <title>Hola</title>
  3.     <style type="text/css">
  4.         *{margin:0 auto;}
  5.         .primero{
  6.             background-color:yellow;
  7.             padding: 40px 0;
  8.             width:960px;
  9.             position: relative;
  10.         }
  11.         .segundo{
  12.             background-color: red;
  13.             padding: 100px 0;
  14.             width:900px;
  15.             position: relative;
  16.             z-index:2;
  17.             margin-top:-30px;
  18.             margin-bottom:-30px;
  19.         }
  20.         .tercero{
  21.             background-color: blue;
  22.             width:960px;
  23.             padding: 40px 0;
  24.             position: relative;
  25.         }
  26.     </style>
  27. </head>
  28.     <div class="primero"></div>
  29.     <div class="segundo"></div>
  30.     <div class="tercero"></div>
  31. </body>

de ahí te puedes dar una idea.
  #5 (permalink)  
Antiguo 21/07/2012, 12:31
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

Muchas gracias por responder, lo estoy chequeando y parece que es la respuesta lo voy a probar y responderé como me va, siempre pense que si un elemento queria posicionarlo deberia ser absolute dentro de un div relative, creo que tengo que informarme mejor gracias
__________________
Studio Web Salvador http://www.acuarel.pe/
  #6 (permalink)  
Antiguo 21/07/2012, 12:35
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

Un favor memoadian este código *{margin:0 auto;} se refiere que todos los div van a coger estar centrados???? pues a algunos van a flotar a la derecha y a la izquierda.
__________________
Studio Web Salvador http://www.acuarel.pe/
  #7 (permalink)  
Antiguo 21/07/2012, 13:28
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

si, en si es un reste, lo que hace que todos los divs poisition:relative estén centrados. De todos modos si tu especificas:

.segundo{
float:left;
margin:5px;
}

no tendrás ningun problema.
  #8 (permalink)  
Antiguo 17/08/2012, 09:03
Avatar de WebSalvador  
Fecha de Ingreso: agosto-2011
Ubicación: Lima - Perú
Mensajes: 171
Antigüedad: 12 años, 8 meses
Puntos: 2
Respuesta: Problema usando float y position, perdiendo el alto de div viendose mal lo

Excelente finalmente pude realizar la web con tus sugerencias aquí esta http://www.tecnimaxservice.com/
__________________
Studio Web Salvador http://www.acuarel.pe/

Etiquetas: float, position
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 05:27.