Foros del Web » Creando para Internet » CSS »

Añadir fila a galeria de fotos de CSSPlay

Estas en el tema de Añadir fila a galeria de fotos de CSSPlay en el foro de CSS en Foros del Web. Hola! Estoy tratando de adaptar ami sitio la galeria de fotos de CSSPlay cssplay.co.uk/menu/gallery.html Como pueden ver, tiene 2 filas de 5 fotos cada una. ...
  #1 (permalink)  
Antiguo 31/05/2007, 18:29
 
Fecha de Ingreso: marzo-2007
Mensajes: 6
Antigüedad: 10 años, 9 meses
Puntos: 0
Añadir fila a galeria de fotos de CSSPlay

Hola!

Estoy tratando de adaptar ami sitio la galeria de fotos de CSSPlay

cssplay.co.uk/menu/gallery.html

Como pueden ver, tiene 2 filas de 5 fotos cada una. Lo que necesito es que pueda añadir al menos 1 fila mas. Es decir, en lugar de 10 fotos que sean 15. Este es el codigo:


Código HTML:
.a, .a:visited {color:#000;}
#container {position:relative; width:600px; height:700px; background:#000; border:1px solid #000; margin:10px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; bottom:250px; left:0; color:#eee; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}

a.slidea {background:url(gal/sph1.jpg);}
a.slideb {background:url(gal/sph2.jpg);}
a.slidec {background:url(gal/sph3.jpg);}
a.slided {background:url(gal/sph4.jpg);}
a.slidee {background:url(gal/sph5.jpg);}
a.slidef {background:url(gal/spv1.jpg);}
a.slideg {background:url(gal/spv2.jpg);}
a.slideh {background:url(gal/spv3.jpg);}
a.slidei {background:url(gal/spv4.jpg);}
a.slidej {background:url(gal/spv5.jpg);}



a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#fff; background:#000; text-align:center; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}

a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}


a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

a.gallery:hover span {visibility:visible; z-index:100;}

a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
Y el html el siguiente:

Código HTML:
<div id="container">
<b>Photographs<br />by kind permission of<br />/b>
<a class="gallery slidea" href="#nogo"><span><img src="gal/simonh1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="gal/simonh2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="gal/simonh3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span></a>
<a class="gallery slided" href="#nogo"><span><img src="gal/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="gal/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="gal/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="gal/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="gal/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="gal/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div> 

El problema es que cuando intento añadir 5 fotos más (en el CSS añado 5 clases slide y en el html igual) en lugar de aparecer en la siguiente fila, se salen del layer "container" y aparecen hasta abao de la página. ¡Como puedo hacer para que se agregen justo debajo?

Gracias.

Samuel.
  #2 (permalink)  
Antiguo 03/06/2007, 16:04
 
Fecha de Ingreso: junio-2007
Mensajes: 4
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Añadir fila a galeria de fotos de CSSPlay

huy te juro que si puediera te ayudaria pero queciera saber como hacer una galeria en mi web que es lo que tengo que hacer, me ayudarias
  #3 (permalink)  
Antiguo 05/06/2007, 09:07
Avatar de RBZ
RBZ
Moderador
 
Fecha de Ingreso: noviembre-2005
Ubicación: Sevilla España
Mensajes: 11.540
Antigüedad: 12 años
Puntos: 2034
Re: Añadir fila a galeria de fotos de CSSPlay

Pega el código del intento para revisar el error. Si pones una página de muestra mejor.
__________________
Sevilla monumentos de Sevilla Fotos de la ciudad
ViajeV
  #4 (permalink)  
Antiguo 19/06/2007, 17:33
 
Fecha de Ingreso: abril-2007
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 1
Re: Añadir fila a galeria de fotos de CSSPlay

yo tengo el mismo problema., pero no solo quiero agregar fotos a la galeria, sino que sean filas de 6. ese asunto lo logre sacando un titulo en el html que molestaba. pero, si quiero agregar fotos, no me resulta. este es el cogido:

Código:
.a, .a:visited {color:#000;}
#container {position:relative; width:800px; height:900px; background:#000; border:1px solid #000; margin:0px auto;}
#container b {font-weight:normal; width:600px; text-align:center; position:absolute; top:20px; left:0; color:#eee; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; line-height:1.7em; z-index:1;}

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:7px 21px; position:relative; cursor:default;}

a.slidea {background:url(1.jpg);}
a.slideb {background:url(2.jpg);}
a.slidec {background:url(3.jpg);}
a.slided {background:url(gal/sph4.jpg);}
a.slidee {background:url(gal/sph5.jpg);}
a.slidef {background:url(gal/spv1.jpg);}
a.slideg {background:url(gal/spv2.jpg);}
a.slideh {background:url(gal/spv3.jpg);}
a.slidei {background:url(gal/spv4.jpg);}
a.slidej {background:url(gal/spv5.jpg);}
a.slidek {background:url(gal/spv5.jpg);}
a.slidel {background:url(gal/spv5.jpg);}
a.slidem {background:url(gal/spv5.jpg);}
a.sliden {background:url(gal/spv5.jpg);}
a.slideo {background:url(gal/spv5.jpg);}



a.gallery span {visibility:hidden; display:block; position:absolute; width:580px; height:500px; top:189px; left:9px; color:#fff; background:#000; text-align:center; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}

a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-608px; top:89px;}
a.slideg span {left:-13px; top:89px;}
a.slideh span {left:-132px; top:89px;}
a.slidei span {left:-251px; top:89px;}
a.slidej span {left:-370px; top:89px;}
a.slidek span {left:-489px; top:89px;}
a.slidel span {left:-608px; top:89px;}
a.slidem span {left:-489px; top:89px;}
a.sliden span {left:-489px; top:89px;}
a.slideo span {left:-489px; top:89px;}


a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;}

a.gallery:hover span {visibility:visible; z-index:100;}

a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;}

a.gallery:active, a.gallery:focus {border:1px solid #c00; z-index:10;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}

y el html:

Código:
<body>
<div id="container">

<a class="gallery slidea" href="#nogo"><span><img src="1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span></a>
<a class="gallery slided" href="#nogo"><span><img src="gal/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="gal/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="gal/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="gal/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="gal/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="gal/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div>
<a class="gallery slidek" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div>
<a class="gallery slidel" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div>
<a class="gallery slidem" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div>
<a class="gallery sliden" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div>
<a class="gallery slideo" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a></div>
</body>
</html>
muchas gracias!!
  #5 (permalink)  
Antiguo 19/06/2007, 18:05
 
Fecha de Ingreso: abril-2007
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 1
Re: Añadir fila a galeria de fotos de CSSPlay

asunto solucionado.

era un problema en el cierre del div del contenedor, osea, el html queda asi

Código:
<body>
<div id="container">

<a class="gallery slidea" href="#nogo"><span><img src="1.jpg" alt="Warm to Cold" title="Warm to Cold" /><br />Warm to Cold</span></a>
<a class="gallery slideb" href="#nogo"><span><img src="2.jpg" alt="Wheels" title="Wheels" /><br />Wheels</span></a>
<a class="gallery slidec" href="#nogo"><span><img src="3.jpg" alt="Urban Squirrel" title="Urban Squirrel" /><br />Urban Squirrel</span></a>
<a class="gallery slided" href="#nogo"><span><img src="gal/simonh4.jpg" alt="Mother and Daughter" title="Mother and Daughter" /><br />Mother and Daughter</span></a>
<a class="gallery slidee" href="#nogo"><span><img src="gal/simonh5.jpg" alt="River Junk" title="River Junk" /><br />River Junk</span></a>
<a class="gallery slidef" href="#nogo"><span><img src="gal/simonv1.jpg" alt="Portrait One" title="Portrait One" /><br />Portrait One</span></a>
<a class="gallery slideg" href="#nogo"><span><img src="gal/simonv2.jpg" alt="Portrait Two" title="Portrait Two" /><br />Portrait Two</span></a>
<a class="gallery slideh" href="#nogo"><span><img src="gal/simonv3.jpg" alt="Portrait Three" title="Portrait Three" /><br />Portrait Three</span></a>
<a class="gallery slidei" href="#nogo"><span><img src="gal/simonv4.jpg" alt="Bow and Fiddle rock" title="Bow and Fiddle rock" /><br />Bow and Fiddle rock</span></a>
<a class="gallery slidej" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
<a class="gallery slidek" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
<a class="gallery slidel" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
<a class="gallery slidem" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
<a class="gallery sliden" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>
<a class="gallery slideo" href="#nogo"><span><img src="gal/simonv5.jpg" alt="The Pose" title="The Pose" /><br />The Pose</span></a>

</div>

</body>
</html>
en lugar del html citado anteriormente
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 08:20.