Fijar Capa html

Iniciado por Neibar, 25 Abril 2012, 08:41 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Neibar

25 Abril 2012, 08:41 AM
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!

_teiki

#1
26 Abril 2012, 04:13 AM
 Publica el código para poder ayudarte.

Neibar

#2
26 Abril 2012, 15:36 PM
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...)

Neibar

#3
26 Abril 2012, 17:02 PM
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

Neibar

#4
26 Abril 2012, 17:58 PM
ya encontré lo que buscaba, más o menos, se ve en éste ejemplo

supongo que será el "position: relative" :)


Código (html4strict) [Seleccionar]
<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&#233; 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 &amp; 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>
Imprimir
Ir Arriba Páginas1
Acciones del Usuario