13/11/2012, 15:58
|
| | | Fecha de Ingreso: marzo-2009
Mensajes: 10
Antigüedad: 15 años, 9 meses Puntos: 0 | |
 Problemas con height de una capa
Que tal, tengo el siguiente código :
Código:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content='text/html; charset="UTF-8"' />
<title>Test Noticias!</title>
<link rel="stylesheet" type="text/css" href="http://www.henki.com.ar/berisso/estilos/navbar.css" />
<link rel="stylesheet" type="text/css" href="http://www.henki.com.ar/berisso/estilos/general.css" />
<link rel="icon" type="image/ico" href="imagenes/favicon.ico" />
</head>
<body>
<div id="contenedor_sitio" style="position:relative; background-color:#cf987a; top:0px; width:1024px; padding: 0px; margin: 0 auto;">
<div id="encabezado_sitio" style="position:absolute; background-color:#ddcdc5; top: 0px; width:100%; height:200px; border: 1px solid #000000;">
<div id="logo_sitio" style="position:absolute; background-image: url(imagenes/encabezado_test1.jpg); top:0; left: 0px; width:1024px; height: 200px;">
</div>
</div>
<div id="navegacion_sitio" style="position:absolute; top: 205px; width:100%; height:30px;">
<div id="navegacion_sitio_izquierda" style="position:absolute; background-image: url(imagenes/navbar_izquierda.png); top: 0px; left: 0px; width:16px; height:30px;">
</div>
<div id="navegacion_sitio_centro" style="position:absolute; background-image: url(imagenes/navbar_centro.png); top: 0px; left: 16px; width:993px; height:30px;">
<ul id="nav_bar">
<li><a href="index.php">Inicio</a></li>
<li><a href="noticia_test.php">Noticia test</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
<li><a href="#">Test5</a></li>
<li><a href="#">Test6</a></li>
</ul>
</div>
<div id="navegacion_sitio_derecha" style="position:absolute; background-image: url(imagenes/navbar_derecha.png); top: 0px; left: 1009px; width:16px; height:30px;">
</div>
</div>
<div id="contenido_sitio" style="position:absolute; background-color:#cf987a; left:0px; top: 235px; width:1024px;">
<div id="contenido_noticia" style="position:absolute; background-color:#cf987a; top: 0px; left: 0px; width:1024px; ">
<div id="noticia_titulo" style="position:absolute; background-color:#6c2601; color: #e3e086; top: 4px; left: 4px; height: 22px; width:798px; font-size: 16px; font-weight: bold; font-family: Arial;">
<span style="padding: 2px;">
Noticia centro 1
</span>
</div>
<div id="noticia_texto" style="position:absolute; top: 24px; margin: 4px; left: 0px; width:798px;">
<img src="imagenes/noticia_test1.jpg" alt="imagen_noticia" />
<p style="padding: 10px;">
Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba.
</p>
</div>
</div>
<div id="noticias_contenido_derecha" style="position:absolute; background-color:#cf987a; top: 0px; left: 795px; width:230px; height:870px;">
<div id="noticia_derecha1" style="position:relative; top:5px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
<h3>Noticia der 1</h3>
<span>
Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba...(<a href="noticia_test.php">más</a>)
</span>
</div>
<div id="noticia_derecha2" style="position:relative; top:7px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
<h3>Noticia der 2</h3>
<span>
Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba...(<a href="noticia_test.php">más</a>)
</span>
</div>
<div id="noticia_derecha3" style="position:relative; top:9px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
<h3>Noticia der 3</h3>
<span>
Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba, esto es una noticia de prueba.Esto es una noticia de prueba, esto es una noticia de prueba. Esto es una noticia de prueba...(<a href="noticia_test.php">más</a>)
</span>
</div>
<div id="noticia_derecha4" style="position:relative; top:11px; left:5px; width: 220px; height: 200px; border: 1px solid black;">
<span>
<img src="imagenes/publicidad_media_carni.png" href="#" alt="publicidad"></img>
</span>
</div>
</div>
</div>
</div>
<div id="footer_sitio" style="position:relative; width:1024px; height: 50px; padding:0; margin: 0 auto;">
<div id="footer_sitio_izquierda" style="position:absolute; background-image: url(imagenes/footer_izquierda.png); top: 0px; left: 0px; width:16px; height:30px;">
</div>
<div id="footer_sitio_centro" style="position:absolute; color: #e3e086; background-image: url(imagenes/footer_centro.png); top: 0px; left: 16px; width:993px; height:30px;">
<center>
<span> © 2012 Henki Test - Este es un pie de página de prueba.</span>
</center>
</div>
<div id="footer_sitio_derecha" style="position:absolute; background-image: url(imagenes/footer_derecha.png); top: 0px; left: 1009px; width:16px; height:30px;">
</div>
</div>
</body>
</html>
El sitio esta dividido en dos divs principales: "contenedor_sitio" y "footer_sitio". Los dos tienen la propiedad "position" en relative. El tema es que el div "contenedor_sitio" no está modificando su height según el contenido ( no le puse propiedad height), y el div "footer_sitio" aparece arriba de todo, como si "contenedor_sitio" no tuviera height.
Alguien podría indicarme en que me estoy equivocando?
PD: uso propiedades "style" por que estoy haciendo una especie de boceto, si gusta entonces sale css.
Última edición por ACIDWARRIOR; 13/11/2012 a las 15:59
Razón: informacion extra
|