He encontrado una galería de fotos css que me vale y al adaptarla tengo un problema. No consigo que los iconos de la galería se separen. Tienen la propiedad display block dentro de un listado que tiene display inline.
Alguien puede ayudarme?
Os pongo parte del código:
#gallery ul {
list-style:none;
padding:0;
margin:0;
width:360px;
position:relative;
float:left;
}
#gallery ul li {
width:92px;
height:92px;
float:left;
margin: 10;
}
#gallery ul li a {
width:90px;
height:90px;
text-decoration:none;
}
#gallery ul li a span {display:none;}
#gallery ul li a img {
width:90px;
height:90px;
padding: 6px;
border: 1px solid #FFF;
margin: 50;
}
#gallery ul li a:hover {
white-space:normal;
border-color:#FFF;
}
#gallery ul li a:hover b {
position:absolute;
left:350px;
top:0;
width:548px;
height:400px;
text-align:center;
z-index:20;
}
#gallery ul li a:hover span {
display:block;
color:#333;
font-family:verdana, arial, sans-serif;
font-weight:normal;
font-size:11px;
width:350px;
margin:0 auto;
}
#gallery ul li a:hover img {
margin:0 auto 10px auto;
width:auto;
height:auto;
}
<div id="gallery">
<ul>
<li><a href="#nogo"><b><img src="../img/aseo.jpg" title="" alt="" /><span>Aseo de invitados, panelado en madera de cerezo. Residencia privada en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/biblioteca.jpg" title="" alt="" /><span>Cuarto de estar. Vivienda en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/comedor.jpg" title="" alt="" /><span>You can style the descriptive text as you like</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/cocina.jpg" title="" alt="" /><span>Cocina. Residencia privada en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/aseo2.jpg" title="" alt="" /><span>Aseo entelado. Apartamento en Jerez de la Frontera</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/bano.jpg" title="" alt="" /><span>Cuarto de baño. Apartamento en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/cortinas.jpg" title="" alt="" /><span>Tratamiento de ventana en dormitorio. Vivienda en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/molduras.jpg" title="" alt="" /><span>Portal. Residencia en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/rincon.jpg" title="" alt="" /><span>Rincón de lectura. Casa de Campo en Ciudad Real</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/copa.jpg" title="" alt="" /><span>Detalle vitrina</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/rinconera.jpg" title="" alt="" /><span>Office. Vivienda en Madrid</span></b></a></li>
<li><a href="#nogo"><b><img src="../img/chimenea.jpg" title="" alt="" /><span>Detalle chimenea</span></b></a></li>
</ul>
</div>
