Buenas, estoy empezando con una web, y tengo el pequeño problema de que al cambiar resoluciones del navegador no se hace más pequeño o más grande sino que se va moviendo todo el contenido.
Alguien sabe fijarlo?
gracias de antemanO!
Publica el código para poder ayudarte.
bueno, más bien quisiera saber qué poner en el css para fijar cada capa en una posición, ya que como todos sabemos, no se ve igual firefox/chrome/safari/explorer
más que nada es eso.. igualmente, habia pensado en hacer un script que vaya identificando el navegador y según cuál esté usando el usuario, cargar una hoja de estilos, o directamente cargar los estilos en la misma pagina (si, queda feo, pero...)
me olvidé comentar también que el mayor problema es que al ir cambiando de resoluciones, la pagina en si, aumenta o disminuye moviendose todo el contenido en diagonal (segun se amplie o se reduzca)
para que os agáis una idea, en este mismo foro, si amplias o reduces el tamaño, (ctrl+ruedecita raton), los elementos permanecen en su posición, quisiera conseguir eso.
pd. ctrl+0 para volver a la posición inicial
ya encontré lo que buscaba, más o menos, se ve en éste ejemplo
supongo que será el "position: relative" :)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> it's a dogs life - example #11</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
/* choose a suitable font and center the #container div in Internet Explorer */
body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
/* The containing box for the gallery. */
#container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; border:1px solid #aaa;}
/* Removing the list bullets and indentation - add size - and position */
#container ul {width:198px; height:386px; padding:0; margin:5px; list-style-type:none; float:right;}
#container li {float:left;}
/* Remove the images and text from sight */
#container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; overflow:hidden; background:#fff;}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
#container a.slidea {background:url(../images/p1_t.jpg); height:93px; width:60px;}
#container a.slideb {background:url(../images/p2_t.jpg); height:93px; width:60px;}
#container a.slidec {background:url(../images/p3_t.jpg); height:93px; width:60px;}
#container a.slided {background:url(../images/p4_t.jpg); height:60px; width:93px;}
* html #container a.slided {width:91px; w\idth:93px;}
#container a.slidee {background:url(../images/p5_t.jpg); height:60px; width:93px;}
#container a.slidef {background:url(../images/p6_t.jpg); height:60px; width:93px;}
* html #container a.slidef {width:91px; w\idth:93px;}
#container a.slideg {background:url(../images/p7_t.jpg); height:60px; width:93px;}
#container a.slideh {background:url(../images/p8_t.jpg); height:93px; width:60px;}
#container a.slidei {background:url(../images/p9_t.jpg); height:93px; width:60px;}
#container a.slidej {background:url(../images/p10_t.jpg); height:93px; width:60px;}
#container a.slidek {background:url(../images/p11_t.jpg); height:60px; width:93px;}
* html #container a.slidek {width:91px; w\idth:93px;}
#container a.slidel {background:url(../images/p12_t.jpg); height:60px; width:93px;}
/* styling the hovers */
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
#container a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="../images/p1.jpg" alt="Alpha" title="Alpha" /><br />ALPHA<br />Photographed by Dorota Mrowka, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="../images/p2.jpg" alt="Minie" title="Minie" /><br />MINIE<br />Photographed by José Antonio Assis, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="../images/p3.jpg" alt="Megan" title="Megan" /><br />MEGAN<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slided" href="#nogo"><span><img src="../images/p4.jpg" alt="Nancy" title="Nancy" /><br />NANCY<br />Photographed by Philip Keller, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidee" href="#nogo"><span><img src="../images/p5.jpg" alt="Missy" title="Missy" /><br />MISSY & PANDA<br />Photographed by Kat Shurtz, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidef" href="#nogo"><span><img src="../images/p6.jpg" alt="Stray pup" title="Stray pup" /><br />STRAY PUP<br />Photographed by Bethan Hazell, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slideg" href="#nogo"><span><img src="../images/p7.jpg" alt="Rolo" title="Rolo" /><br />ROLO<br />Photographed by Paul Leach, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slideh" href="#nogo"><span><img src="../images/p8.jpg" alt="Gigio" title="Gigio" /><br />GIGIO<br />Photographed by Davide Guglielmo, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidei" href="#nogo"><span><img src="../images/p9.jpg" alt="Westy pup" title="Westy Pup" /><br />WESTY PUP<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidej" href="#nogo"><span><img src="../images/p10.jpg" alt="Giga Byte" title="Fishing" /><br />GIGA BYTE<br />Photographed by Jefras, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidek" href="#nogo"><span><img src="../images/p11.jpg" alt="Puppy" title="Puppy" /><br />PUPPY<br />Photographed by Clodiney Cruz, courtesy of the stock.xchng</span></a></li>
<li><a class="gallery slidel" href="#nogo"><span><img src="../images/p12.jpg" alt="Buffy" title="Buffy" /><br />BUFFY<br />Photographed by Rob Waterhouse, courtesy of the stock.xchng</span></a></li>
</ul>
</div>
</body>
</html>