Tabla con tamaño de la resolución de pantalla

frins89 · #1 (**permalink**) 29/06/2010, 11:28

hola, estaba haciendo unas pruebas y se me había ocurrido hacer una tabla fuese toda la resolución de pantalla pero restando una cantidad especifica para porque los laterales contendrán unas imágenes de 200px. El código que tengo hecho y no funciona es este:

Código PHP:

  
<script language="javascript" type="text/javascript">

function ancho(){
    var resolucion;
    resolucion = screen.width - 200;
    document.getElementById('fondo').width = resolucion;
    }

</script>
<table id="fondo" width="javascript: ancho()" border="1">

Hace bastante que no programo y tengo que refrescar muchas cosas...

frins89 · #2 (**permalink**) 29/06/2010, 11:58

Me auto contesto, la soluciones esta:

Código HTML:

<body onload="ancho()">
<script language="javascript" type="text/javascript">

function ancho(){
	
	var resolucion = screen.width - 15;
	document.getElementById('fondo').width = resolucion;
	}
</script>
<table  id="fondo"  border="1" style="margin:auto">

minkweb · #3 (**permalink**) 29/06/2010, 12:07

bueno, dentro de la propiedad width no hara nada, debe ir al cerrar la tabla

y debes tener en cuenta que existen diferentes formas de obtener el ancho de la pantalla por navegador...

y la linea
var resolucion;

esta de mas...

deirdre · #4 (**permalink**) 29/06/2010, 17:31

Hola frins89

Y no es "pedir demasiado" el querer utilizar javascript para eso. ¿No es mejor un simple ajuste en el css para que la tabla se adapte a los valores de pantalla ajustada con el menos que ocuparán las imágenes?.

En tu planteamiento no veo la utilidad de usar javascript. También puede ser que no te entienda bien.

Bye

minkweb · #5 (**permalink**) 30/06/2010, 12:11

¿Como harias tu esa resta?.. pienso yo que hacer eso va con % (por si redimencionan la ventana), se podria dar 80% a la tabla y 20% a los banners, pero eso depende de el ancho de la ventana

¿Como le harias?

deirdre · #6 (**permalink**) 30/06/2010, 18:24

Hola minkweb

Quizás te refieres a esto (si es que te he entendido bien -que creo que sí-)

Copia y pega esto en un html limpio y lo pruebas:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	overflow: auto;
}
#tabla {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #444;
	background-color: #ffc;
}
.celda_dcha {
	width: 200px;
	border: 1px solid #444;
	background-color: #cfc;
}
</style>
</head>

<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
	<tr>
		<td>Contenido</td>
		<td class="celda_dcha">Columna para imágenes</td>
	</tr>
</table>
</body>

</html>

Bye

- Si cambias el tamaño de la ventana, verás que se adapta a cualquier resolución.

nilmora · #7 (**permalink**) 23/08/2011, 21:51

* {
margin: 0;
padding: 0;
overflow: auto;

que significa este codigo, porque lo use pero me desajusta otras tablas que tengo en la pagina y no pude dejar la tabla principal pegada en la parte superior del navegador
www.enometepe.info

nilmora · #8 (**permalink**) 23/08/2011, 21:53

como poner un footer como el de esta pagina ajustado al final de la ventana del navegador, help please

www.enometepe.info
[email protected]