Al cambiar de resolución se me desconfigura todo

elburdel · #1 (**permalink**) 08/05/2011, 03:34

Hola que tal?
Estoy desarrollanado una página web en html/css
Yo tengo un monitor de 1600x900.
Lo que ocurre, es que si deseo verla desde otra resolución se me desconfigura todo.
Hay algún código para que no ocurra esto?

Aca les muestro los codigos quee stoy usando

Código HTML:

 <head>
		<link rel="stylesheet" type="text/css" href="esqueleto.css" />
	</head>
	<body>
		<div id="encabezado">
			<div>
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="960" height="150"  id="FlashID" title="Tour de Rock">
  <param name="movie" value="banner.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="6.0.65.0" />
  <param name="expressinstall" value="file:///C|/Users/Alumno/Documents/Scripts/expressInstall.swf" />
  <object type="application/x-shockwave-flash" data="banner.swf" width="960" height="150">
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="file:///C|/Users/Alumno/Documents/Scripts/expressInstall.swf" />
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
  </object>
</object>
		</div>
		</div>
		<div id="botonera"/>
		<div><img src="botonera.gif" alt="Secciones"/></div>
		<div id="contenedor"/>
		<div><img src="indio.jpg" alt="Indio en Junin"/></div>
		<div id="otra"/>
		<div width="400" height="500"><img src="otra.jpg" width="200" height="300"></div>
	</body>
</html>

y este es el archivo CSS

Código HTML:

body{ margin: 0; padding: 0;  	 #C9C; background-color: #CCC;
}
#encabezado{ 
	position: fixed;
	top:3px;
	left: 18%;
	padding: 15px;
}
#botonera{ 
	position: fixed;
	top: 23.8%;
	left: 302px;
	width: 930px;
	background-color: #000000;
	padding: 15px;
	}
#contenedor{
position: fixed;
top: 30.8%;
left: 302px;
width: 950px;
background-color: #FFFFFF;
padding: 5px;
}
#otra{
position: fixed;
top: 222px;
left: 815px;<
padding: 5px;
background-color: #FFFFFF;
}

miktrv · #2 (**permalink**) 08/05/2011, 04:56

Hola buenas,

Puedes hacerlo de varias maneras. Yo uso medidas fijas, pero puedes usar técnicas para que tu diseño se adapte a la resolución de cada monitor.

Te aconsejo que le heches un vistazo a 960 grid system para maquetar, es cómodo, rápido y sencillo, y además te aseguras de que tu código sirve en todas partes.

Aquí la página oficial:

http://960.gs/

Y aquí una página con varios ejemplos que te pueden servir de guía

http://www.designinfluences.com/fluid960gs/

Un saludo!

elburdel · #3 (**permalink**) 08/05/2011, 09:22

OK,voy a investigar.
Pero ahora que lo pienso, si en vez de trabajar con pixeles trabajara con porcentajes no se me deberia solucionar el problema?

miktrv · #4 (**permalink**) 08/05/2011, 09:51

No he revisado tu css pero puedes probarlo, de todas maneras yo lo haría con grid system, te evitarás dolores de cabeza.

Un saludo!

C2am · #5 (**permalink**) 08/05/2011, 14:34

Hola
Tienes varios errores lo cuales seguramente son los responsables de que se desarme tu página:
Por ejemplo

Código HTML:

Ver original<div id="botonera"/>

El cierre de <div> debe ser </div>, nunca se cierran en sí mismas como hiciste.
La position:fixed no es la mejor para posicionar la página, pero eso depende que lo que pretendas.

saludos

elburdel · #6 (**permalink**) 08/05/2011, 16:16

Que posición usarias?

Use <div id=""/> porque sino no me lo validaba la W3,pero ya lo modifique.

C2am · #7 (**permalink**) 08/05/2011, 17:59

mmm, no creo que no te valide por eso, sino todo lo contrario. Pero debería ver tu página para emitir algun comentario al respecto.

En general no hace falta aclarar, con lo cual es static, pero en caso de necesitar posicionar con cierto grado de precision sería : relative. Y en caso muy particulares : absolute.
Fijate este capitulo:http://www.librosweb.es/css/capitulo5.html
saludos