Saludos. En primer lugar gracias por adelantado a quien se tome su tiempo para ayudarme.
Soy un "vieja escuela" (de los que llenaban todo de tablas, y de frames... si, lo reconozco), que trata de adaptarse por exigencias "del guión" y sufro del mal del div... No hay manera de conseguir controlar un div travieso. Os cuento el problema:
Trato de hacer una página que va a llevar contenido dinámico. y tengo todo preparado, pero hay un div que no logro que se quede en su sitio. Es el "footer" que contendría el pie de página. No soy capaz de hacer que salga al final de la página, por algo que se me escapa (producto de mi ignorancia) en lugar de salir en la parte superior.
Para no "ensuciar" el foro, pongo el código limpio, solamente con los divs a ver si algun alma caritativa y sabia en conocimientos me puede echar una mano.
Código 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>
<link rel="stylesheet" href="css/divside.css" type="text/css" charset="iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="general">
<div id="envoltura">
<div id="header">
<div id="logo">logo</div>
<div id="tjdr">promo</div>
</div>
<div id="nav">
<div id="head-no">decoracion--></div>
<div id="head-pip">menu--></div>
<div id="prominent">submenu--></div>
<div id="clear"></div>
<div id="pages">
<div id="columone">A una sola columna--></div>
<div id="colum1">Columna Izquierda--></div>
<div id="colum2">Columna Dcha--></div>
<div id="columone">Una columna bajo doble columna--></div>
</div>
</div>
</div>
</div>
<div id="footer">pie de pagina--></div>
</body>
</html>
y el CSS
Código CSS:
Ver originalbody {
text-align: center;
font: 12px arial, sans-serif;
color: #777;
background-color: #eee;
margin:0 auto 0 auto;
width:756px;
}
#general {
width: 756px;
text-align: center;
vertical-align: middle;
top: 50%;
position:relative
}
#envoltura {
text-align: left;
margin: auto;
width: 755px;
position:absolute
}
#header {
width: 755px;
height: 97px;
}
#logo {
float: left;
width: 319px;
height: 97px;
margin-left: 3px;
}
#tjdr {
float:right;
margin-top: 10px;
}
#nav {
height: 350px;
position:absolute;
}
#nav a {
color: #E7E4E4;
text-decoration: none;
}
#nav a:hover {
color: #8DC9F5;
text-decoration: none;
}
#nav ul {
padding: 1px 0 0 0px;
margin: 0;
list-style:none;
position: relative;
z-index: 1;
}
#nav li {
list-style:none;
margin: 0;
}
#nav li#m1 { margin: 53px 81px; }
#nav li#m2 { margin: -14px 13px; }
#nav li#m3 { margin: 31px 15px; }
#nav li#m4 { margin: -11px 10px; }
#nav li#m5 { margin: 31px 2px; }
#head-no {
position: 97px;
float:left;
visibility:visible;
width: 385px;
height: 370px;
background-repeat: repeat-x;
background-position: center top;
}
#head-pip {
float:right;
background-position: left top;
background-color:#00223B;
position: top;
width: 370px;
height: 253px;
}
#prominent {
margin: 253px 0 0 0px;
background-color:#ffffff;
height:98px;
width:370;
}
#prominent table {
background-color:#ffffff;
height:98px;
width:370;
}
#clear {
clear:inherit;
}
/* CONTENIDO DINAMICO */
#pages {
position:absolute;
width: 755px;
}
#colum1 {
background-color:#ff0000;
float:left;
width:49%;
position: 97px;
}
#colum2 {
background-color:#ff00ff;
float:right;
width:49%;
position: 497px;
}
#columone {
clear:both;
background-color:#00ff00;
width:100%;
position: 97px;
}
#footer {
text-align: center;
font: 12px arial, sans-serif;
color: #696969;
width:100%;
position:relative;
}
a ver si alguien puede ayudarme a colocar el pie al pie de la página y no en el lugar del cabecero. Seguramente sea una chorrada, pero llevo horas dandole vueltas y sin ver ese "detalle" que se me escapa.
De nuevo, gracias por anticipado!