Foros del Web » Creando para Internet » CSS »

Problema con div

Estas en el tema de Problema con div en el foro de CSS en Foros del Web. Hola a todos tengo el siguiente problema. Tengo una div contenedor en donde englobo todas las divs, ésta tiene position: relative, bien. También tengo una ...
  #1 (permalink)  
Antiguo 14/05/2011, 23:54
 
Fecha de Ingreso: mayo-2010
Mensajes: 70
Antigüedad: 7 años, 6 meses
Puntos: 1
Problema con div

Hola a todos tengo el siguiente problema. Tengo una div contenedor en donde englobo todas las divs, ésta tiene position: relative, bien. También tengo una div para el banner una para la barra de navegacion y una para el margen derecho e izquierdo, el tema es con la div pie (pie de página) ésta div tiene el código siguiente
.pie{width:800px;
height:200px;
background-color:#009;
position: relative;}

increiblemente en el explorer me lo posiciona debajo y mientras voy agregando contenido al resto de las divs, esta respeta el position:absolute y baja, pero con mozilla y opera la div se me va hacia arriba de la página y además no me respeta el position:relative. espero haberme hecho entender gracias
  #2 (permalink)  
Antiguo 15/05/2011, 00:32
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con div

sin ver el código completo en cuestión es dificil ayudarte ya que al pie de pagina puede estar afectándolo indirectamente otro css o elemento html, pero intenta colocarle un clear:both

Código CSS:
Ver original
  1. .pie{width:800px;
  2. height:200px;
  3. background-color:#009;
  4. clear:both}

por otro lado, no es necesario especificar position:relative si no utilizas z-index o deseas posicionar otro elemento que se encuentre en su interior con position:absolute
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 15/05/2011, 21:45
 
Fecha de Ingreso: mayo-2010
Mensajes: 70
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Problema con div

Este es mi código css:

.contenedor{
width:800px;
height:1000px;
margin:0px auto 1000px auto;
background-color:#CCC;

}

.banner{
width:800px;
position:absolute;
height:150px;
margin:0px auto 150px auto;
background-color:#666
}

.barra {
width:800px;
position:absolute;
height:30px;
margin:150px auto auto auto;
background-color:#555;
left: 0px;
top: 0px;
}

.margen_izq {
width:150px;
height:670px;
background-color:#0F0;
margin-top:180px;
float:left
}

.contenido {
width:500px;
/*height:670px;*/
background-color:#FF0000;
margin-top:180px;
float:right
}

.margen_der {
width:150px;
height:670px;
background-color:#0F0;
margin-top:180px;
float:right
}

.pie{
width:800px;
height:200px;
clear:both;
/*no anda en ex*/
background-color:#009;
}
  #4 (permalink)  
Antiguo 15/05/2011, 22:02
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con div

aja ese es el código css y el html? por cierto no se si te fijaste que el editor en la parte de arriba dice hightlight, este sirve para englobar el código y que se distinga que tipo de código es
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 16/05/2011, 15:36
 
Fecha de Ingreso: mayo-2010
Mensajes: 70
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Problema con div

Este es el html:

Código HTML:
Ver original
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Documento sin título</title>
  4. <link href="estilos.css" rel="stylesheet" type="text/css" />
  5. </head>
  6.  
  7. <div class="contenedor" style="position:relative">
  8. <div class="banner">
  9. <div class="barra">
  10. </div><!--------Cierro div barra------------>
  11. <div class="margen_izq" style="position:relative"></div><!-------------Cierrro div margen izq----------------------->
  12. </div><!------Cierro div banner----------->
  13. <div class="margen_der" style="position:relative"></div>
  14. <div class="contenido" style="position:relative">
  15. <table width="500">
  16. <tr>
  17.   <td><pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  18.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  19.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  20.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  21.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  22.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  23.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  24.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  25.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  26.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  27.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  28.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  29.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  30.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  31.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  32.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  33.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  34.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  35.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  36.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  37.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  38.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  39.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  40.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  41.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  42.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  43.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  44.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  45.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  46.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  47.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  48.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  49.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  50.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  51.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  52.   <pre>putoooooOOOOOOOSSS</pre>
  53.   <pre>sadljsdljlfjljljljlllllllllllllllllllllllllllllllllllllllllll</pre>
  54. </td>
  55. </tr>
  56. </div>
  57. <!---------Cierro div contenido------------>
  58. <div class="pie" style="position:relative"></div>
  59. </div><!-----Cierro div contenedor-------->
  60.  
  61. </body>
  62. </html>
  #6 (permalink)  
Antiguo 16/05/2011, 15:42
 
Fecha de Ingreso: mayo-2010
Mensajes: 70
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Problema con div

Este es el html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="contenedor">
<div class="banner">
<div class="barra">
</div><!--------Cierro div barra------------>
<div class="margen_izq">
</div><!-------------Cierrro div margen izq----------------------->
</div><!------Cierro div banner----------->
<div class="margen_der">
</div>
<div class="contenido">
</div>
<!---------Cierro div contenido------------>
<div class="pie">
</div>
</div><!-----Cierro div contenedor-------->

</body>
</html>

ahhh!!! me olvidé de ponerte que en el css las divs: contenedor, contenido y los margenes tienen position:relative, igual tengo el mismo problema espero que con el html lo entiendas mejor gracias

Etiquetas: Ninguno
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:38.