Foros del Web » Creando para Internet » CSS »

Posicionamiento de div en firefox

Estas en el tema de Posicionamiento de div en firefox en el foro de CSS en Foros del Web. Buenas! Tengo el siguiente código en css: /* CSS Document */ body { margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #container { width:1003px; top:0px; margin-left:auto; margin-right:auto; ...
  #1 (permalink)  
Antiguo 19/09/2008, 03:17
 
Fecha de Ingreso: septiembre-2008
Mensajes: 37
Antigüedad: 9 años, 3 meses
Puntos: 0
Posicionamiento de div en firefox

Buenas!

Tengo el siguiente código en css:

/* CSS Document */
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
width:1003px;
top:0px;
margin-left:auto;
margin-right:auto;
background-color:#000000;
position:relative;
}
#cabecera {
width:1003px;
height:160px;
position:relative;
background-color:#333333;
}
#container_principal {
width:1003px;
position:relative;
background-color:#666666;
margin-top:29px;
margin-bottom:29px;
/*height:300px;*/
}
#columna_izquierda {
width:224px;
position:relative;
float:left;
background-color:#999999;
margin-left: 16px;
}
#container_columna_derecha {
width:763px;
float:right;
position:relative;
background-color:#CCCCCC;
}
#container_cuadros {
width:224px;
position:relative;
}
#cuadros_izq_sup {
width:224px;
height:44px;
line-height:44px;
padding-left:55px;
position:relative;
margin:0px;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-cabecera.png);
}
#cuadros_izq_cen {
width:224px;
position:relative;
background-repeat:repeat-y;
padding-left:55px;
padding-top:15px;
padding-bottom:5px;
background-image:url(../imagenes/cuadros-centro.png);
}
#cuadros_izq_inf {
width:224px;
height:16px;
position:relative;
background-repeat:no-repeat;
background-image:url(../imagenes/cuadros-inferior.png);
}
#pie_pagina {
width:1003px;
position:absolute;
background-color:#0066FF;
height:32px;
}

Y el siguiente código en html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pruebas CSS</title>
<link rel="stylesheet" type="text/css" href="includes/estilos-pregunta.css" />
</head>

<body>
<div id="container">
<div id="cabecera"><img src="imagenes/cabecera.png" alt="cabecera" width="1003" height="160" /></div>
<div id="container_principal">
<div id="columna_izquierda">
<div id="container_cuadros">
<div id="cuadros_izq_sup">T&iacute;tulo cuadro</div>
<div id="cuadros_izq_cen">
<p><br /><br /></p>
</div>
<div id="cuadros_izq_inf"></div>
</div>
</div>
<div id="container_columna_derecha">
<br /><br />
</div>
</div>
<div id="pie_pagina">PIE PAGINA</div>
</div>

</body>
</html>


El problema lo tengo con el div "pie_pagina", en internet explorer me lo pone bien, al pie de página, pero en firefox me lo pone inmediatamente después de la cabecera.
Si en el css le pongo una altura a #container_principal, entonces el pie de página aparece en la parte inferior, pero sin respetar el margin-bottom de #container_principal...

Seguro que me dejo algo, pero no lo veo...

Gracias!
  #2 (permalink)  
Antiguo 19/09/2008, 08:08
 
Fecha de Ingreso: septiembre-2008
Mensajes: 37
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Posicionamiento de div en firefox

Alguna sugerencia?
  #3 (permalink)  
Antiguo 19/09/2008, 08:17
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Posicionamiento de div en firefox

fijate si esto te sirve:
Código html:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2.   <head>
  3.     <title>New Document</title>
  4.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  5.     <style>
  6. body {
  7. margin:0px;
  8. font-family:Arial, Helvetica, sans-serif;
  9. font-size:12px;
  10. }
  11. #container {
  12. width:1003px;
  13. top:0px;
  14. margin-left:auto;
  15. margin-right:auto;
  16. background-color:#000000;
  17. position:relative;
  18. }
  19. #cabecera {
  20. width:1003px;
  21. height:160px;
  22. position:relative;
  23. background-color:#333333;
  24. }
  25. #container_principal {
  26. width:1003px;
  27. position:relative;
  28. background-color:#666666;
  29. margin-top:29px;
  30. margin-bottom:29px;
  31. overflow:hidden;
  32. }
  33. #columna_izquierda {
  34. width:224px;
  35. position:relative;
  36. float:left;
  37. background-color:#999999;
  38. margin-left: 16px;
  39. }
  40. #container_columna_derecha {
  41. width:763px;
  42. float:right;
  43. position:relative;
  44. background-color:#CCCCCC;
  45. }
  46. #container_cuadros {
  47. width:224px;
  48. position:relative;
  49. overflow:hidden;
  50. }
  51. #cuadros_izq_sup {
  52. width:224px;
  53. height:44px;
  54. line-height:44px;
  55. padding-left:55px;
  56. position:relative;
  57. margin:0px;
  58. background-repeat:no-repeat;
  59. background-image:url(../imagenes/cuadros-cabecera.png);
  60. }
  61. #cuadros_izq_cen {
  62. width:224px;
  63. position:relative;
  64. background-repeat:repeat-y;
  65. padding-left:55px;
  66. padding-top:15px;
  67. padding-bottom:5px;
  68. background-image:url(../imagenes/cuadros-centro.png);
  69. }
  70. #cuadros_izq_inf {
  71. width:224px;
  72. height:16px;
  73. position:relative;
  74. background-repeat:no-repeat;
  75. background-image:url(../imagenes/cuadros-inferior.png);
  76. }
  77. #pie_pagina {
  78. width:1003px;
  79. position:absolute;
  80. background-color:#0066FF;
  81. height:32px;
  82. }
  83.     </style>
  84.   </head>
  85.   <body>
  86.  
  87. <div id="container">
  88. <div id="cabecera"><img src="imagenes/cabecera.png" alt="cabecera" width="1003" height="160" /></div>
  89. <div id="container_principal">
  90. <div id="columna_izquierda">
  91. <div id="container_cuadros">
  92. <div id="cuadros_izq_sup">T&iacute;tulo cuadro</div>
  93. <div id="cuadros_izq_cen">
  94. <p><br /><br /></p>
  95. </div>
  96. <div id="cuadros_izq_inf"></div>
  97. </div>
  98. </div>
  99. <div id="container_columna_derecha">
  100. <br /><br />
  101. </div>
  102. </div>
  103. <div id="pie_pagina">PIE PAGINA</div>
  104. </div>
  105.  
  106.   </body>
  107. </html>

  #4 (permalink)  
Antiguo 19/09/2008, 09:11
 
Fecha de Ingreso: septiembre-2008
Mensajes: 37
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Posicionamiento de div en firefox

Hola DragonX,

Gracias por responder.

Se ve mejor, ya que el pie de página aparece en su sitio, pero no respeta el margin-bottom de #container_principal.

Se te ocurre algo?

Saludos!
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 10:01.