Foros del web, para los que viven de bits

hscnet · 28-mar-2007, 03:57

Os cuento:
Estoy haciendo una página que necesito que salga ocupando todo el espacio del navegador en resoluciones que van desde 800x600 hasta 1280x1024. En cuanto al width ya lo tengo solucionado, pero el height me está dando problemas y no lo consigo. A ver si alguien me echa una ayudita. Os paso el código HTML y el CSS

Código HTML

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<link href="intranet2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenido">
<div id="cabecera"><span class="subcabecera1"><img src="escudo.jpg"></span><span class="subcabecera2"><img src="sombras.gif"></span></div>
<h1>
<a href="intranet.htm" title="Inicio">Inicio</a>  |  <a href="mapa.htm" title="Mapa Web">Mapa Web</a>  |  <a href="mailto:intranet.imserso@mtas.es" title="Sugerencias">Sugerencias</a>  |  <a href="ayuda.htm" title="Ayuda">Ayuda</a>
</h1>
<div id="centroizq"></div>
<div id="centrodch">
<h3>Enlaces</h3>
</div>
<div id="centrocnt"></div>
<h2>IMSERSO © 2007</h2>
</div>
</body>
</html>

Código CSS

Cita:

html {
padding:0px;
margin:0px;
/*height: 100%;*/
}
body {
font-size: 10px;
font-family: Verdana;
color: #003366;
padding: 0px;
margin: 0px;
/*height: 100%;*/
}
/*h1 {
margin: 0px;
}*/
#contenido {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
#cabecera {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 67px;
background: url(fondo.jpg);
background-repeat: repeat;
z-index: 1;
}
.subcabecera1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
.subcabecera2 {
position: absolute;
top: 0px;
left: 350px;
z-index: 2;
}
h1 {
position: absolute;
top: 67px;
left: 0px;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #006699;
background-color: #ECE9D8;
margin: 0px;
padding-top: 3px;
padding-left: 10px;
padding-bottom: 4px;
border-top: 1px solid #003366;
border-bottom: 1px solid #003366;
font-weight: normal;
}
h1 a:link, a:visited, a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
text-decoration: none;
}
h1 a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003366;
text-decoration: none;
}
#centroizq {
position: absolute;
top: 93px;
left: 0px;
width: 200px;
margin: 0px;
padding: 0px;
/*height: 420px;*/
background-color: #006699;
border-right: 1px solid #003366;
}
#centrocnt {
margin: 0px 190px 0px 190px;
padding: 0px;
background-color: #ffffff;
height: 420px;
}
#centrodch {
position: absolute;
top: 93px;
right: 0px;
width: 200px;
margin: 0px;
padding: 0px;
/*height: 420;*/
background-color: #006699;
border-left: 1px solid #003366;
}
h2 {
position: absolute;
top: 495px;
left: 0px;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-color: #ECE9D8;
margin: 0px;
padding-top: 1px;
padding-left: 10px;
padding-bottom: 2px;
border-top: 1px solid #003366;
text-align: center;
font-weight: normal;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-color: #ECE9D8;
margin: 0px;
padding-top: 1px;
padding-left: 10px;
padding-bottom: 2px;
border-bottom: 1px solid #003366;
text-align: center;
font-weight: normal;
}

Al hacer lo del width he visto que la solución era dejar el div central sin definir la propiedad width y como los dos laterales tienen un ancho definido, el div central se ajusta a lo que necesite. Además el valor de position en los dos divs laterales es absolute, mientras que en el central al no venir definido creo que se entiende que es como relative.
Pero esto mismo no lo puedo reproducir en cuanto a la altura porque en principio solo tengo dos capas, y no tres como en el width, y además la capa que debería ir con position:relative la tengo que dejar en absolute para que me funcione lo del width.

Bueno, no sé si me habré expresado bien y me entendereis, pero espero que alguien lo haga y me dé una solución.

Gracias.

hscnet · 30-mar-2007, 02:35

A ver si alguien se anima y me da una respuesta

jesusbet · 30-mar-2007, 13:19

A mi humilde entender, el height de un elemento siempre es relativo a su contenido o definido, nunca relativo a la resolución. Puedes usar un min-heigh y max-height, aunque esto no te lo respeta IE.

No sé para qué lo necesites, pero lo que podrías hacer es detectar con javascript la resolución de tu visitante y aplicar una hoja de estilos para cada resolución... pero es una posible solución, pero es muy rebuscado y no vale la pena...

Saludos

28-mar-2007, 03:57	#1 (permalink)
hscnet Fecha de Ingreso: diciembre-2003 Mensajes: 65	Problema con el height Os cuento: Estoy haciendo una página que necesito que salga ocupando todo el espacio del navegador en resoluciones que van desde 800x600 hasta 1280x1024. En cuanto al width ya lo tengo solucionado, pero el height me está dando problemas y no lo consigo. A ver si alguien me echa una ayudita. Os paso el código HTML y el CSS Código HTML Cita: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>New Document</title> <link href="intranet2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="contenido"> <div id="cabecera"><span class="subcabecera1"><img src="escudo.jpg"></span><span class="subcabecera2"><img src="sombras.gif"></span></div> <h1> <a href="intranet.htm" title="Inicio">Inicio</a>  \|  <a href="mapa.htm" title="Mapa Web">Mapa Web</a>  \|  <a href="mailto:intranet.imserso@mtas.es" title="Sugerencias">Sugerencias</a>  \|  <a href="ayuda.htm" title="Ayuda">Ayuda</a> </h1> <div id="centroizq"></div> <div id="centrodch"> <h3>Enlaces</h3> </div> <div id="centrocnt"></div> <h2>IMSERSO © 2007</h2> </div> </body> </html> Código CSS Cita: html { padding:0px; margin:0px; /height: 100%;/ } body { font-size: 10px; font-family: Verdana; color: #003366; padding: 0px; margin: 0px; /height: 100%;/ } /h1 { margin: 0px; }/ #contenido { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } #cabecera { position: absolute; top: 0px; left: 0px; width: 100%; height: 67px; background: url(fondo.jpg); background-repeat: repeat; z-index: 1; } .subcabecera1 { position: absolute; top: 0px; left: 0px; z-index: 2; } .subcabecera2 { position: absolute; top: 0px; left: 350px; z-index: 2; } h1 { position: absolute; top: 67px; left: 0px; width: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #006699; background-color: #ECE9D8; margin: 0px; padding-top: 3px; padding-left: 10px; padding-bottom: 4px; border-top: 1px solid #003366; border-bottom: 1px solid #003366; font-weight: normal; } h1 a:link, a:visited, a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #006699; text-decoration: none; } h1 a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #003366; text-decoration: none; } #centroizq { position: absolute; top: 93px; left: 0px; width: 200px; margin: 0px; padding: 0px; /height: 420px;/ background-color: #006699; border-right: 1px solid #003366; } #centrocnt { margin: 0px 190px 0px 190px; padding: 0px; background-color: #ffffff; height: 420px; } #centrodch { position: absolute; top: 93px; right: 0px; width: 200px; margin: 0px; padding: 0px; /height: 420;/ background-color: #006699; border-left: 1px solid #003366; } h2 { position: absolute; top: 495px; left: 0px; width: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #006699; background-color: #ECE9D8; margin: 0px; padding-top: 1px; padding-left: 10px; padding-bottom: 2px; border-top: 1px solid #003366; text-align: center; font-weight: normal; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #006699; background-color: #ECE9D8; margin: 0px; padding-top: 1px; padding-left: 10px; padding-bottom: 2px; border-bottom: 1px solid #003366; text-align: center; font-weight: normal; } Al hacer lo del width he visto que la solución era dejar el div central sin definir la propiedad width y como los dos laterales tienen un ancho definido, el div central se ajusta a lo que necesite. Además el valor de position en los dos divs laterales es absolute, mientras que en el central al no venir definido creo que se entiende que es como relative. Pero esto mismo no lo puedo reproducir en cuanto a la altura porque en principio solo tengo dos capas, y no tres como en el width, y además la capa que debería ir con position:relative la tengo que dejar en absolute para que me funcione lo del width. Bueno, no sé si me habré expresado bien y me entendereis, pero espero que alguien lo haga y me dé una solución. Gracias.

30-mar-2007, 02:35	#2 (permalink)
hscnet Fecha de Ingreso: diciembre-2003 Mensajes: 65	Re: Problema con el height A ver si alguien se anima y me da una respuesta

30-mar-2007, 13:19	#3 (permalink)
jesusbet Fecha de Ingreso: mayo-2004 Ubicación: Monterrey, MX Mensajes: 2.676	Re: Problema con el height A mi humilde entender, el height de un elemento siempre es relativo a su contenido o definido, nunca relativo a la resolución. Puedes usar un min-heigh y max-height, aunque esto no te lo respeta IE. No sé para qué lo necesites, pero lo que podrías hacer es detectar con javascript la resolución de tu visitante y aplicar una hoja de estilos para cada resolución... pero es una posible solución, pero es muy rebuscado y no vale la pena... Saludos __________________ 512 Megas

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado