Hola, estoy tratando de hacer una galería de imágenes para poner en mi web y que ilustre mi trabajo como diseñador gráfico.
Ví algunos ejemplos en el sitio [URL="http://www.cssplay.co.uk"]cssplay[/URL] y conseguí algo que se parece mucho a lo que necesito, solamente que no consigo poner comentarios por debajo de las fotos.
Podrían ayudarme a corregir este problema?
Pongo los estilos CSS:
Código:
<style type="text/css">
/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
color:#000;
}
/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album {
width:320px;
height:360px;
background:#eee url(gallery/trabajos.jpg) 0 40px no-repeat;
border:1px solid #aaa;
margin-top: 0;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
padding:0;
margin:320px 0 0 0;
list-style-type:none;
position:relative;
width:320px;
}
/* remove the default image border */
.gallery img {
border:0;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
font-size:11px;
float:left;
text-decoration:none;
color:#000;
background:#fff;
text-align:center;
width:26px;
height:26px;
line-height:24px;
border:1px solid #444;
margin:2px;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute;
top:-320px;
left:0;
visibility:hidden;
border:0;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-280px;
}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
left:0;
border-left:40px solid #eee;
border-right:40px solid #eee;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
background:#444;
color:#fff;
outline:0;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
visibility:visible;
outline:0;
}
</style>
y el html: hay una referencia a un estilo que se llama "#nogo"... pero no lo veo en el CSS y no se lo que es (igual funciona cuando hago la presentación en la web, pero quiero saber si puedoi sacarlo de ahi porque venía dentro del código del sitio citado mas arriba.
Código HTML:
<body>
<div id="info">
<h2>A simple CSS photo-album</h2>
<h3>31th July 2006</h3>
<div id="album">
<ul class="gallery">
<li><a href="#nogo" tabindex="1">01<img class="landscape" src="gallery/landscape_1.jpg" alt="landscape image 1" title="landscape image 1" /></a></li>
<li><a href="#nogo" tabindex="1">02<img class="landscape" src="gallery/landscape_2.jpg" alt="landscape image 2" title="landscape image 2" /></a></li>
<li><a href="#nogo" tabindex="1">03<img class="portrait" src="gallery/portrait_1.jpg" alt="portrait image 1" title="portrait image 1" /></a></li>
<li><a href="#nogo" tabindex="1">04<img class="portrait" src="gallery/portrait_2.jpg" alt="portrait image 2" title="portrait image 2" /></a></li>
<li><a href="#nogo" tabindex="1">05<img class="landscape" src="gallery/landscape_3.jpg" alt="landscape image 3" title="landscape image 3" /></a></li>
<li><a href="#nogo" tabindex="1">06<img class="portrait" src="gallery/portrait_3.jpg" alt="portrait image 3" title="portrait image 3" /></a></li>
<li><a href="#nogo" tabindex="1">07<img class="landscape" src="gallery/landscape_4.jpg" alt="landscape image 4" title="landscape image 4" /></a></li>
<li><a href="#nogo" tabindex="1">08<img class="landscape" src="gallery/landscape_5.jpg" alt="landscape image 5" title="landscape image 5" /></a></li>
<li><a href="#nogo" tabindex="1">09<img class="portrait" src="gallery/portrait_4.jpg" alt="portrait image 4" title="portrait image 4" /></a></li>
<li><a href="#nogo" tabindex="1">10<img class="portrait" src="gallery/portrait_5.jpg" alt="portrait image 5" title="portrait image 5" /></a></li>
</ul>
</div>
</div>
</body>
Después si les parece podemos discutir otros ejemplos de galerías de imágenes
aqui pongo el ejemplo exacto de CSS play:
[URL="http://www.cssplay.co.uk/menu/photo_album.html"]http://www.cssplay.co.uk/menu/photo_album.html[/URL]