Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] rozmieszczenie zdjec w kolumnach
Forum PHP.pl > Forum > Przedszkole
lutador
Witam,

mam problem z prawidlowym rozmieszczeniem obrazków. Chcialbym ulozyc je tak:

X X X
X X X
X X X
...........
a mam tak :/
X
X
X
X
...

  1.  
  2. .katalog ul {
  3. list-style-type:none;
  4. overflow: hidden;
  5.  
  6. }
  7.  
  8. .katalog li {
  9. background: none;
  10. clear: none;
  11. margin: 0;
  12. position: relative;
  13. padding-left: 11px;
  14. padding-bottom: 20px;
  15. width: 50px;
  16. }
  17. .katalog li.First {
  18. padding-left: 0;
  19. }
  20.  
  21. <div class="katalog">
  22. <ul>
  23. <li class="First"><a href="image/katalog/kat-1.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-1.jpg" width="200" height="140" alt="Katalog" /></a> </li>
  24.  
  25. <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-2.jpg" width="200" height="140" alt="Katalog" /></a> </li>
  26.  
  27. <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-3.jpg" width="200" height="140" alt="Katalog" /></a> </li>
  28.  
  29. <li class="First"><a href="image/katalog/kat-1.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-1.jpg" width="200" height="140" alt="Katalog" /></a> </li>
  30.  
  31. <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-2.jpg" width="200" height="140" alt="Katalog" /></a> </li>
  32.  
  33. <li><a href="image/katalog/kat-2.jpg" rel="lightbox" title="Katalog strona1"><img src="image/katalog/kat-3.jpg" width="200" height="140" alt="Katalog" /></a> </li>
  34.  
  35. </ul>
  36. </div>
  37.  
Daiquiri
Dodaj do katalog li takie coś:
  1. float: left;


Lub do .katalog li.First, ale wtedy wszystkie elementy, które mają być w jednej linii muszą być "First".
lutador

Nie dziala to dobrze :/ jak float: left; jest w katalog li to wszystkie zdjecia sa w jednej poziomej linii. Jezeli jest w katalog first to tylko te zdjecia sa w poziomej linii (zawsze tej samej) a pozostale w pionie
Pilsener
Jak chcesz ułożyć obrazki w wiersze i kolumny to użyj tabeli, po co kombinować? Tabela ma tą zaletę, że dopasowuje się do okna i możesz łatwo zmienić liczbę wierszy oraz kolumn bez ekwalibrystyki w CSS. A width i height w <img> nie lepiej zrobić w css, jeśli wszystkie mają mieć identyczny rozmiar?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.