Volver al Foro de Diseño de páginas Web

Pie de página CSS posicionamiento con absoluta dos posicionado DIVs

  • JohnH
  • Born
  • Born
  • No Avatar
  • Registrado: Dic 28, 2011
  • Mensajes: 2
  • Loc: Minnesota
  • Status: Offline

Nota Diciembre 29th, 2011, 8:15 pm

Hola a todos. Tengo un problema de posicionamiento de mis etiquetas div. Tengo dos divs que son aboslutely posicionado que aparecen como cuadros a un visitante. Quiero mi pie de página para ir a la derecha por debajo de estos cuadros, pero muestra una superposición en la parte superior de los cuadros o en la parte superior detrás de los cuadros. ¿Hay algo Im haciendo mal? Aquí está el código html:
HTML Código: [ Select ]
<html>
<head>
<title>The title of the website</title>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<center>
<br>
<br>
<span itemprop="name"><h1>Header1</h1></span>
<h4>Header4</h4></center>
[ Home ]
<div id="wrap">
<div id="content4">
<p>Content 4</p></div>
<div id="content3">
<p>Content 3</p>
</div>
<div id="footer">Here is the footer
</div>
</div>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <title>The title of the website</title>
  4. <LINK rel="stylesheet" type="text/css" href="css/style.css">
  5. </head>
  6. <body>
  7. <center>
  8. <br>
  9. <br>
  10. <span itemprop="name"><h1>Header1</h1></span>
  11. <h4>Header4</h4></center>
  12. [ Home ]
  13. <div id="wrap">
  14. <div id="content4">
  15. <p>Content 4</p></div>
  16. <div id="content3">
  17. <p>Content 3</p>
  18. </div>
  19. <div id="footer">Here is the footer
  20. </div>
  21. </div>
  22. </body>
  23. </html>
  24.  


Y aquí está el código CSS
Código: [ Select ]
html {height:100%;}

body {
margin: 0;
background-image: url('../images/bg1.jpg');
background-repeat: repeat-x;
}
/* table menu */
#wrap {
margin:auto;
position:relative;
left:0 px;
background-color:red;
height:100%;
}
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#tablemenu
{
background-color: 3B5998;
text-align: left;
width: 100%;
border-top: 1;
border-left:0;
border-style: solid;
border-color: black;
border-radius: 10;
font-family: tahoma;
color: white;
font-size: 12px;
}
img.tablelines
{
position:relative;
left: 29px;
}
#content1
{
background-color:white;
text-align: center;
position: absolute;
left: 0px;
width: 400px;
height: auto;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 12px;
color: black;
}
#content2
{
background-color:white;
text-align: left;
position: absolute;
left: 430px;
width: 400px;
height: auto;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 12px;
color: black;
}
#content3
{
background-color:white;
text-align: center;
position: absolute;
left: 860px;
width: 400px;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 12px;
color: black;
}

#content4
{
background-color:white;
text-align: left;
position: absolute;
left: 0px;
width: 800px;
margin: 30px;
border-top:1;
border-right:1;
border-style:solid;
border-color:black;
font-size: 14px;
color: black;
}

#footer {
position: fixed;
bottom: 0px;
height:80px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
}
  1. html {height:100%;}
  3. body {
  4. margin: 0;
  5. background-image: url('../images/bg1.jpg');
  6. background-repeat: repeat-x;
  7. }
  8. /* table menu */
  9. #wrap {
  10. margin:auto;
  11. position:relative;
  12. left:0 px;
  13. background-color:red;
  14. height:100%;
  15. }
  16. #inner-wrap {
  17. padding-bottom:80px;
  18. }
  19. #inner-wrap:after {
  20. content:" ";
  21. display:block;
  22. clear:both;
  23. }
  24. #tablemenu
  25. {
  26. background-color: 3B5998;
  27. text-align: left;
  28. width: 100%;
  29. border-top: 1;
  30. border-left:0;
  31. border-style: solid;
  32. border-color: black;
  33. border-radius: 10;
  34. font-family: tahoma;
  35. color: white;
  36. font-size: 12px;
  37. }
  38. img.tablelines
  39. {
  40. position:relative;
  41. left: 29px;
  42. }
  43. #content1
  44. {
  45. background-color:white;
  46. text-align: center;
  47. position: absolute;
  48. left: 0px;
  49. width: 400px;
  50. height: auto;
  51. margin: 30px;
  52. border-top:1;
  53. border-right:1;
  54. border-style:solid;
  55. border-color:black;
  56. font-size: 12px;
  57. color: black;
  58. }
  59. #content2
  60. {
  61. background-color:white;
  62. text-align: left;
  63. position: absolute;
  64. left: 430px;
  65. width: 400px;
  66. height: auto;
  67. margin: 30px;
  68. border-top:1;
  69. border-right:1;
  70. border-style:solid;
  71. border-color:black;
  72. font-size: 12px;
  73. color: black;
  74. }
  75. #content3
  76. {
  77. background-color:white;
  78. text-align: center;
  79. position: absolute;
  80. left: 860px;
  81. width: 400px;
  82. margin: 30px;
  83. border-top:1;
  84. border-right:1;
  85. border-style:solid;
  86. border-color:black;
  87. font-size: 12px;
  88. color: black;
  89. }
  91. #content4
  92. {
  93. background-color:white;
  94. text-align: left;
  95. position: absolute;
  96. left: 0px;
  97. width: 800px;
  98. margin: 30px;
  99. border-top:1;
  100. border-right:1;
  101. border-style:solid;
  102. border-color:black;
  103. font-size: 14px;
  104. color: black;
  105. }
  107. #footer {
  108. position: fixed;
  109. bottom: 0px;
  110. height:80px;
  111. background-color: #333333;
  112. width:100%;
  113. color:#FF00FF;
  114. text-align:center;
  115. }

Cualquier ayuda sería muy apreciada, gracias!
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Diciembre 29th, 2011, 8:15 pm

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 1 mensaje
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 87 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC