Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] rozmieszczenie zdjec w kolumnach
lutador
post
Post #1





Grupa: Zarejestrowani
Postów: 183
Pomógł: 3
Dołączył: 5.03.2007
Skąd: Opole

Ostrzeżenie: (0%)
-----


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.  
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 3)
Daiquiri
post
Post #2





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ




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".

Ten post edytował Daiquiri 22.12.2009, 11:35:40
Go to the top of the page
+Quote Post
lutador
post
Post #3





Grupa: Zarejestrowani
Postów: 183
Pomógł: 3
Dołączył: 5.03.2007
Skąd: Opole

Ostrzeżenie: (0%)
-----



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
Go to the top of the page
+Quote Post
Pilsener
post
Post #4





Grupa: Zarejestrowani
Postów: 1 590
Pomógł: 185
Dołączył: 19.04.2006
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 12:14