Fwd: galeria de imagenes con menu Trato de colocar un albun de fotos sobre una pagina sin tener que salir de esta y sin que la ampliaciones de tamaño tapen a las miniaturas.tambien para organizarlas le coloco un menu por familias.Bien en firefox esta todo colocadito pero en explorer se va todo al carajo.
1º una cosa que me falta seria cargar la familias en el container de scroll.
2º como hacerlor compatible en otros navegadores.
3º Hay alguna forma de que el texto de la familia activa apareciera en la cabecera sin salir de la pagina?
espero noticias,saludos¡¡
os adjunto html y css.
<html>
<head>
<style type="text/css">
body {text-align: center ;background-color:gold;}
#navegacion {background-color: #F5DEB3 ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 35px; }
#global {width:800px ; position:relative;margin:4px auto }
#scroller {width:800px; height:500px; position:relative;padding:5px 0; background:#f0fff4; margin:0 auto 60px auto;}
#scroller em {display:block; width:229px; height:235px; position:relative; float:right; border:1px solid #ddd;} /*hace el cuadro pequeño de visualizacion*/
#scroller span {display:block; width:560px; height:500px; position:relative; float:left; border:1px solid #ddd;} /*hace el cuadro grande de visualizacion*/
#scroller span b#copyright {font-size:10px; color:#888; position:absolute; bottom:5px; right:20px; font-family:georgia, verdana, arial, sans-serif; font-weight:normal;} /*coloca el texto de copyright en angulo inferior dercho del containes scroller*/
#scroller b#thumbs {display:block; width:220px; height:245px; overflow:auto; float:right; margin-top:7px;border:1px solid #ccc; border-width:1px 0 1px 1px; padding:5px;}
/*genera un contenedor que alberga los thumbs o miniaturas*/
#scroller b#thumbs a {display:block; float:left; margin:0 10px 10px 0; background:#f8f8ff; width:50px; height:50px; border:1px solid #000;}
/*marca las dimensiones de las diapositivas*/
#scroller b#thumbs a img {width:50px; height:50px; border:0;}
#scroller b#thumbs a:hover {border:1px dotted #ccc; background:#fff url(click_on.gif);}
#scroller b#thumbs a:active, #scroller b#thumbs a:focus {border:1px solid #fff; background:#fff; outline:0;}
#scroller b#thumbs a:hover img {display:block; position:absolute; background:#aaa; z-index:500;}
#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img {display:block; position:absolute; background:#aaa; z-index:100;}
#scroller b#thumbs a:hover img.hr {width:210px; height:200px; right:10px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:hover img.vt {width:120px; height:160px; right:55px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr {width:470px; height:430px; left:20px; top:7px; border:1px solid #333;}
#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt {width:240px; height:320px; left:60px; top:7px; border:1px solid #333;}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
</style>
<!--[if IE]>
<style type="text/css">
#scroller b {
scrollbar-arrow-color: #333;
scrollbar-3dlight-color: #bbb;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #bbb;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #bbb;
scrollbar-track-color: #fff;
}
</style>
<![endif]-->
</head>
<body>
<div id="global">
<h1>MOBILIARIO DE SALON</h1>
<div id="navegacion">
<ul>
<li><a href="#">Dormitorio</a></li><li><a href="#">Comedor</a></li>
<li><a href="#">Jardin</a></li><li><a href="#".h
tml">Lamparas</a></li><li><a href="#">Regalos</a></li><li><a href="#">Varios</a></li><li><a href="#">Esculturas</a></li>
</ul>
</div>
<div id="scroller">
<em></em>
<span><b id="copyright">© 2010 Mark_Sanfer</b></span>
<b id="thumbs">
<a href="#nogo"><img class="hr" src="fotos/uno.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/dos.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/tres.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/cuatro.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/cinco.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/seis.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/siete.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/ocho.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/nueve.jpg"/></a>
<a href="#nogo"><img class="vt" src="fotos/diez.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/once.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/doce.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/trece.jpg" /></a>
<a href="#nogo"><img class="vt" src="fotos/catorce.jpg"/></a>
<a href="#nogo"><img class="hr" src="fotos/quince.jpg"/></a>
<a href="#nogo"><img class="hr" src="fotos/dseis.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/dsiete.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/docho.jpg"/></a>
<a href="#nogo"><img class="hr" src="fotos/dnueve.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/veinte.jpg"/></a>
<a href="#nogo"><img class="vt" src="fotos/vuno.jpg" /></a>
<a href="#nogo"><img class="vt" src="fotos/vdos.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/vtres.jpg"/></a>
<a href="#nogo"><img class="vt" src="fotos/vcuatro.jpg"/></a>
<a href="#nogo"><img class="hr" src="fotos/vcinco.jpg" /></a>
<a href="#nogo"><img class="vt" src="fotos/vseis.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/vsiete.jpg" /></a>
<a href="#nogo"><img class="vt" src="fotos/vocho.jpg" /></a>
<a href="#nogo"><img class="vt" src="fotos/vnueve.jpg" /></a>
<a href="#nogo"><img class="hr" src="fotos/treinta.jpg" /></a>
</b>
</div>
</div>
</body>
</html>
