Przyznaje, mam zadanie i potrzebuje rozwiazania.
Zadanie polega na umiejetnym spreparowaniu kodu css do gotowego kodu html, przy czym w kodzie html nie mozna dokonac zadnych zmian. A wynik jaki mam osiagnac mam na zdjeciu.
Utknalem na punkcie, gdzie 4 zdjecia mam ustawic w sposob: 2 na gorze obok siebie, 2 analogicznie w drugiej linijce.
Kod HTML:
Kod
<section>
<h2>Galeria</h2>
<ul class="sidebar-gallery">
<li><a class="colorbox" rel="bieszczady" href="img/photo1.jpg"><img src="img/thumb1.jpg" alt="" /></a></li>
<li><a class="colorbox" rel="bieszczady" href="img/photo2.jpg"><img src="img/thumb2.jpg" alt="" /></a></li>
<li><a class="colorbox" rel="bieszczady" href="img/photo3.jpg"><img src="img/thumb3.jpg" alt="" /></a></li>
<li><a class="colorbox" rel="bieszczady" href="img/photo4.jpg"><img src="img/thumb4.jpg" alt="" /></a></li>
</ul>
</section>
<h2>Galeria</h2>
<ul class="sidebar-gallery">
<li><a class="colorbox" rel="bieszczady" href="img/photo1.jpg"><img src="img/thumb1.jpg" alt="" /></a></li>
<li><a class="colorbox" rel="bieszczady" href="img/photo2.jpg"><img src="img/thumb2.jpg" alt="" /></a></li>
<li><a class="colorbox" rel="bieszczady" href="img/photo3.jpg"><img src="img/thumb3.jpg" alt="" /></a></li>
<li><a class="colorbox" rel="bieszczady" href="img/photo4.jpg"><img src="img/thumb4.jpg" alt="" /></a></li>
</ul>
</section>
Co proponujecie dac, aby byly obrazki jak wyzej opisywalem, manipulujac jedynie CSS?