Foros del Web » Creando para Internet » CSS »

Fwd: galeria de imagenes con menu

Estas en el tema de Fwd: galeria de imagenes con menu en el foro de CSS en Foros del Web. hola a todos¡¡ Trato de colocar un albun de fotos sobre una pagina sin tener que salir de esta y sin que la ampliaciones de ...
  #1 (permalink)  
Antiguo 06/05/2010, 03:11
 
Fecha de Ingreso: mayo-2010
Mensajes: 1
Antigüedad: 7 años, 7 meses
Puntos: 0
Exclamación Fwd: galeria de imagenes con menu

hola a todos¡¡
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">&copy 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>
  #2 (permalink)  
Antiguo 06/05/2010, 07:05
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola marksanfer. Bienvenido al foro.

Muevo tu tema al foro de CSS desde Web general.

Saludos,

Etiquetas: galeria, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:39.