Problema 100% alto pantalla con html-css

huesi · #1 (**permalink**) 06/09/2011, 05:22

Buenos días... Llevo leídos varios hilos acerca de la configuración de la página al 100% del alto de pantalla. Creo que he configurado todo como indican, incluyendo el 100% al body y html, pero aún así no consigo que aparezca correctamente... Les dejo el código por si pueden ayudarme. Gracias

<title>
XXXXXXXX
</title>
<script> Script de imagenes
</script>

</head>
<body onload=azar()>

<table align="left">
<tr>
<td class="tabla"><div class="logo"><a href="/web.html"><img src="/habitat.png" width="200px"></a></div>
<div class="texto_menu">
<a href="/presentacion.html">Presentación</a><br>
<a href="/ideario.html">Ideario</a><br>
<a href="/funcion.html">Función</a><br>

<a href="/presentacion.html">Experiencias</a><br>
<a href="/presentacion.html">Enlaces</a><br>
<a href="/presentacion.html">Contacto</a></div></td>
<td class="tabla"><img name=imagen1 class="foto"></td>
<td class="tabla"><img name=imagen2 class="foto"></td>
</tr>
<tr class="tabla">
<td class="tabla"><img name=imagen3 class="foto"></td>

<td class="tabla"><img name=imagen4 class="foto"></td>
<td class="tabla"><img name=imagen5 class="foto"></td>
</tr>
<tr class="tabla">
<td class="tabla"><img name=imagen6 class="foto"></td>
<td class="tabla"><img name=imagen7 class="foto"></td>
<td class="tabla"><img name=imagen8 class="foto"></td>
</tr>
</table>
</body>
</html>

El CSS es el siguiente:
.logo {
display: inline;
float: left;
margin-left: -20px;
vertical-align: top;
width: 350px;
}
.texto_menu {
display: inline;
float: left;
font-family: 'Arial Black',Gadget,sans-serif;
font-size: 13px;
padding-top: 65px;
}
.foto {
border: 0 solid #000000;
width: 350px;
}
.tabla {
font-size: 12px;
height: 262px;
overflow: hidden;
padding: 6px 8px;
text-align: justify;
vertical-align: top;
width: 350px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
h2 {
margin-bottom: -20px;
margin-left: 3px;
}
h3, h4, h5 {
margin-left: 3px;
position: relative;
}

Muchas gracias

emprear · #2 (**permalink**) 06/09/2011, 08:47

Primero, supongo que aquí abreviaste

Código HTML:

Ver original<title>
 XXXXXXXX
 </title>
 <script> Script de imagenes
 </script>
 
</head>

Pero si tenés declarado un Doctype y la apertura de html.

Segundo, en todo tu código no se vé un height: 100%; para ningún elemento. así que la expresión

Cita:

Creo que he configurado todo como indican

no sé a que obedece.

Revisá y postea de nuevo

Saludos

huesi · #3 (**permalink**) 06/09/2011, 14:44

Buenas otra vez...

Cita:

Iniciado por emprear

Primero, supongo que aquí abreviaste

Código HTML:

Ver original<title>
 XXXXXXXX
 </title>
 <script> Script de imagenes
 </script>
 
</head>

Si, perdona... abrevié... Os dejo el código completo excepto el título de la página e un script (que es algo largo, sólo es para tener una serie de imágenes qeu cambien aleatoriamente):

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link href="style.css" rel="stylesheet" type="text/css"/>

<title>
Título...
</title>
<script type="text/javascript">
Aqui va es script...
</script>

<style type="text/css">
html, body {
margin:0px;
height:100%;
}
</style>

</head>
<body onload=azar()>

<table style="padding: 0.3em 0.4em" height="100%">
<tr>
	<td><div class="logo"><a href="/web.html"> <img src="http://fugaemrede.info/xacobe/habitat.png" width="55%" alt="logotipo HabitatSocial"/> </a></div>
	<div class="texto_menu">
				<a href="/presentacion.html">Presentaci&oacute;n</a><br/>
				<a href="/ideario.html">Ideario</a><br/>
				<a href="/funcion.html">Funci&oacute;n</a><br/>
				<a href="/presentacion.html">Experiencias</a><br/>
				<a href="/presentacion.html">Enlaces</a><br/>
				<a href="/presentacion.html">Contacto</a></div></td>
	<td><img name=imagen1 class="foto" alt="imaxe dossier" /></td>
	<td><img name=imagen2 class="foto" alt="imaxe dossier" /></td>
	</tr>
<tr>
	<td><img name=imagen3 class="foto" alt="imaxe dossier" /></td>
	<td><img name=imagen4 class="foto" alt="imaxe dossier" /></td>
	<td><img name=imagen5 class="foto" alt="imaxe dossier" /></td>
</tr>
<tr>
	<td><img name=imagen6 class="foto" alt="imaxe dossier" /></td>
	<td><img name=imagen7 class="foto" alt="imaxe dossier" /></td>
	<td><img name=imagen8 class="foto" alt="imaxe dossier"/></td>
</tr>
</table>
</body> 
</html>

Y es cierto que no aparecía un height 100% a elemento alguno ni al html y body, como indican por el foro... Siento las molestias. el problema ha sido que estoy haciendo pruebas y copié el archivo erróneo, el que me da una configuración correcta pero que no está configurado con un alto 100%... Este sería el CSS:

Código:

html, body {
    height: 100%;
    margin: 0;
}
.logo {
    display: inline;
    float: left;

}
.texto_menu {
    display: inline;
    float: left;
    font-family: times New Roman;
    font-size: 1em;
    padding-top: 3em;
}
.foto {
    border: 0 solid #000000;
   height: 100%;
}
a:link, a:visited {
    color: #000000;
    text-decoration: none;
}
a:active {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: underline;
}

td {

height: 33%;
padding: 0.3em 0.4em;

}

Gracias de nuevo y siento las molestias!

ArturoGallegos · #4 (**permalink**) 06/09/2011, 16:19

que raro el código que has colocado a mi si me funciona, quizás no lo distingues por falta de un background en la tabla

agrega al final de tu css y veras que si esta cubriendo el 100%

Código CSS:

Ver originaltable{background:#fe0;}

mmm o quizás tienes algo mas que no has mostrado que impide que cresca al 100% ???

huesi · #5 (**permalink**) 06/09/2011, 17:00

Buenos días

Cita:

que raro el código que has colocado a mi si me funciona, quizás no lo distingues por falta de un background en la tabla

El caso es que con el código exactamente como lo pongo, si que funciona tal cual el alto 100%... pero porque no se muestran las imágenes...

Cita:

mmm o quizás tienes algo mas que no has mostrado que impide que cresca al 100% ???

Ya digo que lo único que no se muestran son las imágenes! En el head hay un script para mostrar imágenes de forma aleatoria... Pero podría cambiar eso la forma en que se muestra el alto al 100%??
De hecho, el problema que tengo no es que "no crezca" hasta el 100%, sino el contrario... que el alto es mayor y aparece scroll en el lateral derecho... y yo querría que desapareciera y el alto ocupase al 100%, es decir, se redujese un poco...

Pongo el códido del script por si acaso es por eso? O no tendría por qué serlo? Será por las imágenes?

Muchas gracias por la ayuda!

ArturoGallegos · #6 (**permalink**) 06/09/2011, 17:09

Cita:

Iniciado por huesi

De hecho, el problema que tengo no es que "no crezca" hasta el 100%, sino el contrario... que el alto es mayor y aparece scroll en el lateral derecho... y yo querría que desapareciera y el alto ocupase al 100%, es decir, se redujese un poco...

haber como que en este fragmento patine un poco, dejame ver si entendi tu problema....

tu tabla si crece el 100% de alto pero cuando el contenido supera el 100% aparece el scroll y tu deseas que el contenido reduzca su altura para que se ajuste al 100%

o de plano no entendí?

huesi · #7 (**permalink**) 06/09/2011, 17:14

Cita:

Iniciado por Ag666

tu tabla si crece el 100% de alto pero cuando el contenido supera el 100% aparece el scroll y tu deseas que el contenido reduzca su altura para que se ajuste al 100%
o de plano no entendí?

Si, efectivamente. En mi equipo lo veo mayor y aparece scroll, y por lo tanto yo querría que se viese al 100%. Pero tengo otro compañero en un equipo que me dice que lo ve más pequeño y que no le ocupa todo el alto de la página...

Entonces, efectivamente, lo que querría es que en TODOS los casos, cualquiera que sea la pantalla, se vea el alto al 100% (los que tengan pantalla y resolución grande, que les crezca hasta el 100%; los que les ocupe más y le aparezca el scroll, pues que desaparezca ese scroll y lo vean al 100%)

Pero no tengo mucha idea, igual es demasiado!
Muchas gracias de nuevo, Ag666

huesi · #8 (**permalink**) 08/09/2011, 01:59

Arriba, por si alguien tiene la solución!

Gracias anticipadas!

emprear · #9 (**permalink**) 08/09/2011, 07:08

huesi:

Por lo que planteas, todo tu problema debe de estar girando entorno del alto de tus imágenes, los cuales no aparecen en tu código. S ia suma de estas supera la resolución del usuario, indefectiblemente le hará scroll. Pdrías utilizar la propiedad max-height, para limitar el alto de las mismas, pero eso supondría que hagas los calculos partiendo de una resolución de pantalla minima y dejando un margen por la eventual diferencia entre las configuraciónes del navegador (barras de herramientas, barras de busqueda, barra de estado, extensiones varias,etc)

Saludos

huesi · #10 (**permalink**) 08/09/2011, 17:47

Buenas, Emprear...
Gracias por la contestación. Voy a intentar modificar los atributos de las imágenes, a ver si consigo cambios significativos con eso... De todas formas, por el momento sigo perdido porque los tamaños de las imágenes los marco en CSS y deberían ajustarse al alto de la pantalla siguiendo los pasos marcados...

En cuanto consiga algo posteo. Si mientras se os ocurre algo más, aquí estoy!
Gracias