Fotogalerie se stejnou výškou řádku
21. 07. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Rychost, rychlost, rychlost - zrychlete své stránky
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
Tematicky související články
- Fotogalerie se zmenšenými obrázky a popisky
- Třísloupcový layout se stejnou délkou všech panelů
- Záložkové menu vysouvající se dolů
- Záložkové menu vysouvající se nahoru
- Vychytaný třísloupcový fluidní layout se stejnou délkou panelů
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
