Fotogalerie se stejnou výškou řádku

21. července 2006

•

Tato galerie ukazuje kombinaci několika CSS vlastností, pomocí nichž je dosaženo pružnosti fotogalerie a zároveň stejné výšky řádků v případě, že je některá kartička ve stejném řádku vyšší než jiná.

Zde si můžete prohlédnout výsledek

Toto řešení bylo publikováno na serveru www.brunildo.org. Bližší popis najdete v článku Thumbnail Image Gallery

Zdrojový kód je zde záměrně zhuštěn kvůli správnému zobrazení v některých prohlížečích.

CSS

.thumbwrap
{
border: 1px solid #999;
padding: 15px 8px;
background-color: #def;
margin: 0;
color: black;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
text-align: center;
width: 95%;
}
.thumbwrap li
{
display: -moz-inline-box;
display: inline-block;
/*\*/ vertical-align: bottom; /**/
margin: 0 7px 15px 7px;
border: solid #999 1px;
padding: 0;
}
.thumbwrap li>a
{
/*\*/ display: table; /**/
width: 199px;
}
.thumbwrap a
{
display: block;
text-decoration: none;
color: #000;
background-color: #ffe;
cursor: pointer;
padding-top: 13px;
}
.thumbwrap img
{
border: solid 1px black;
vertical-align: bottom;
}
.thumbwrap a:hover
{
background-color: #fdc;
}
.thumbwrap .caption
{
display: block;
padding: .3em 5px;
font-size: .9em;
line-height: 1.1;
w\idth: 189px; /* Moz, IE6 */
}
@media all and (min-width: 0px)
{
.thumbwrap li
{
vertical-align: top;
}
.thumbwrap li a
{
display: inline-block;
vertical-align: top;
}
.thumbwrap
{
display: inline-block;
}
}

CSS pro IE

<!–[if IE]><style>
.thumbwrap li {
width: 201px;
w\idth: 199px;
display: inline;
}
.thumbwrap {
height: 0;
he\ight: auto;
zoom: 1;
display: inline;
}
</style><![endif]–>

XHTML

<html>
<body>
<ul class=“thumbwrap“><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-01.jpg“ /></span><span class=“caption“>lorem</span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-02.jpg“ /></span><span class=“caption“>ipsum</span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-03.jpg“ /></span><span class=“caption“>dolor</span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-04.jpg“ /></span><span class=“caption“>sit amet</span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-05.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-06.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-08.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-09.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-10.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-11.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-12.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-13.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-14.jpg“ /></span><span class=“caption“></span></a></div></li><li><div><a href=“#“><span class=“wrimg“><span></span><img alt=“fokta“ src=“101-15.jpg“ /></span><span class=“caption“></span></a></div></li></ul>
</body>
</html>

Předchozí článek Bye Bye Embed

Další článek Hříchy pro šíleného korektora - Quo vadis, češtino?