Foros del Web » Creando para Internet » CSS »

Galeria fotografica

Estas en el tema de Galeria fotografica en el foro de CSS en Foros del Web. Hola amigos del foro Tengo un problemilla, me baje una galeria fotografica muy buena en css, la alteré hasta el punto de adaptarla a mi ...
  #1 (permalink)  
Antiguo 04/08/2008, 13:01
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Exclamación Galeria fotografica

Hola amigos del foro

Tengo un problemilla, me baje una galeria fotografica muy buena en css, la alteré hasta el punto de adaptarla a mi gusto(con muchas dificultades de hecho), el problema es que necesito usar la misma galeria en la misma pagina pero unas lineas mas abajo. La galeria es una pestaña o tab que al pasar el mouse despliega 20 fotografias en orden usando los <ul><li> como esta de aqui:
http://www.cssplay.co.uk/menu/lightbox
solo que sin bordes de color, totalmente transparente, y se oculta al quitar el mouse, debajo de esta galeria hay texto escrito, y la galeria lo tapa al abrirse, eso esta bien, pero no tapa los nombres de las pestañas de la siguiente galeria, si no que lo deja encima de las fotos, y ese es el problema.
trate de explicarme lo mejor que pude, ahi les dejo el codigo que se usa:



<style type="text/css">



/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {
padding:0;
margin:0;
list-style:none;
width:635px;
height:auto;
position:relative;
z-index:10;
}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:13px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; font-family:Comic Sans MS}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}



.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; width:464px; padding:40px 60px; z-index:1;}


.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; width:464px; padding:40px 60px; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #000; margin:0px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.style1 {
font-family: "Comic Sans MS";
font-size: 18px;
color:#FF0000;
}
.style2 {
font-family:"Comic Sans Ms";
font-size:14px;
color:#000000;
font-weight:bold;
}
.style3 {
font-family:"comic Sans Ms";
font-size:14px;
color:#0000FF;
font-weight:bold;
}
.style5 {
font-weight: bold;
font-family: "Comic Sans MS";

}
</style>




y asi va el orden de las fotos en el body del html:

<div class="photo">
<ul class="topic">
<li><a class="set" href="fotos/en_adopcion"><strong>Galeria 1</strong></a>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>
<li><strong><a href="fotos/en_adopcion/imag_01.jpg"><img src="fotos/en_adopcion/imag_01.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_02.jpg"><span><img src="fotos/en_adopcion/imag_02.jpg" alt="probando" title="probando"/><br />Warm to Cold</span></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_03.jpg"><img src="fotos/en_adopcion/imag_03.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_04.jpg"><img src="fotos/en_adopcion/imag_04.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_05.jpg"><img src="fotos/en_adopcion/imag_05.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_06.jpg"><img src="fotos/en_adopcion/imag_06.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_07.jpg"><img src="fotos/en_adopcion/imag_07.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_08.jpg"><img src="fotos/en_adopcion/imag_08.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_09.jpg"><img src="fotos/en_adopcion/imag_09.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_10.jpg"><img src="fotos/en_adopcion/imag_10.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_11.jpg"><img src="fotos/en_adopcion/imag_11.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_12.jpg"><img src="fotos/en_adopcion/imag_12.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_13.jpg"><img src="fotos/en_adopcion/imag_13.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_14.jpg"><img src="fotos/en_adopcion/imag_14.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_15.jpg"><img src="fotos/en_adopcion/imag_15.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_16.jpg"><img src="fotos/en_adopcion/imag_16.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_17.jpg"><img src="fotos/en_adopcion/imag_17.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_18.jpg"><img src="fotos/en_adopcion/imag_18.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_19.jpg"><img src="fotos/en_adopcion/imag_19.jpg" alt="" title="" /></a></strong></li>
<li><strong><a href="fotos/en_adopcion/imag_20.jpg"><img src="fotos/en_adopcion/imag_20.jpg" alt="" title="" /></a></strong></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>



a proposito tampoco logro desplegar texto con las fotos, terrible ah...

Última edición por gVenom; 04/08/2008 a las 17:34
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 10:54.