Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Galeria zdjęć, Pozycjonowanie miniaturek a'la tabela
dyniaq
post 22.07.2008, 10:01:50
Post #1





Grupa: Zarejestrowani
Postów: 34
Pomógł: 4
Dołączył: 31.07.2006
Skąd: Oława

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

W tabeli łatwo sobie wyrównać miniaturki. Ale jak za pomocą CSS'a wyrównać obrazki, żeby były ładnie w wierszach i kolumnach. Zaznaczam, że nie wszystkie obrazki "panoramiczne", niektóre są robione "pionowo" i wtedy się rozjeżdża cały szyk, bo mają inną wysokość niż te "panoramiczne".

[HTML] pobierz, plaintext 
  1. <div id="images">
  2.             <a href="photos/G_4830.JPG" rel="lightbox.roadtrip" title="G_4830"><img src="photos/thumbs/thumb_G_4830.JPG" alt="G_4830"/></a>
  3.             <a href="photos/IMG_1960.JPG" rel="lightbox.roadtrip" title="IMG_1960"><img src="photos/thumbs/thumb_IMG_1960.JPG" alt="IMG_1960"/></a>
  4.             <a href="photos/IMG_1961.JPG" rel="lightbox.roadtrip" title="IMG_1961"><img src="photos/thumbs/thumb_IMG_1961.JPG" alt="IMG_1961"/></a>
  5.             <a href="photos/IMG_1962.JPG" rel="lightbox.roadtrip" title="IMG_1962"><img src="photos/thumbs/thumb_IMG_1962.JPG" alt="IMG_1962"/></a>
  6. </div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. #images{
  2.     border: 2px solid #efefe1;
  3.     background-color: #ffffff;
  4. }
  5.  
  6. #images img{
  7.     margin: 5px;
  8.     padding: 10px;
  9.     border: 1px solid #efefe1;
  10.     background-color: #fafafa;
  11.     float: left;
  12.     width: 15%;
  13. }
  14.  
  15. #images a:visited img {
  16.     border: 1px dashed #fafafa;
  17.     background-color: #fff;
  18. }
  19.  
  20. #images a:hover img {
  21.     border: 1px solid #aa5;
  22.     background-color: #fafaf1;
  23. }
[HTML] pobierz, plaintext


Czy ktoś poradził sobie kiedyś z tym problemem? Proszę o pomoc.

Z poważaniem, Michał

Ten post edytował dyniaq 22.07.2008, 10:04:43
Go to the top of the page
+Quote Post
Piotrwusek
post 22.07.2008, 10:36:13
Post #2





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X----

ja bym to uznał za dane tabelowe i obsadził w tabelce
Go to the top of the page
+Quote Post
Kreton
post 22.07.2008, 16:45:35
Post #3





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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

Ale nie są danymi tabelarycznymi. A możesz oznaczać zdjęcia klasami ? Odzdielając panoramiczne od robionych pionowo ? Czy nie chcesz się babrać bo nikt za Ciebie takiego kodu nie wygeneruje ?
Go to the top of the page
+Quote Post
dyniaq
post 23.07.2008, 21:18:41
Post #4





Grupa: Zarejestrowani
Postów: 34
Pomógł: 4
Dołączył: 31.07.2006
Skąd: Oława

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

Piotrwusek
No tak na łatwiznę to nie można iść.

Kreton
No da się. Wszystko z automatu leci, więc coś tam się wymyśli, żeby określić, czy panoramiczne, czy nie. A jeżeli już będą dwie różne klasy to wtedy co?


--------------------
~ kim jest Ta, co mi w oczach zasadza takie drzewo? ~
Go to the top of the page
+Quote Post
trucksweb
post 23.07.2008, 21:25:04
Post #5





Grupa: Zarejestrowani
Postów: 1 199
Pomógł: 31
Dołączył: 22.03.2004
Skąd: Warszawa

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

poczytaj http://kurs.browsehappy.pl/CSS/Table

da sie zrobic


--------------------
Rozmawia dwóch dyrektorów:
- Jaki jest twój ideał sekretarki?
- 20-letnia dziewczyna z 30-letnim doświadczeniem.
Go to the top of the page
+Quote Post
Kreton
post 24.07.2008, 12:01:05
Post #6





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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

Bo wtedy będziesz mógł sobie ładnie wyrównać obrazki w pionie i w poziomie. Bez tych klas się nie da bo vertical-align nie działa ani sztuczka z line-height na obrazku, który dostał w stylach display: inline. Sprawdzałem w Operze.

Rozumiem, że generujesz miniaturki i wszystkie maja takie same rozmiary, w sensie. Np. panoramiczne: 150x250 a pionowe 250x150 przykładowo ?
Go to the top of the page
+Quote Post
dyniaq
post 24.07.2008, 12:13:30
Post #7





Grupa: Zarejestrowani
Postów: 34
Pomógł: 4
Dołączył: 31.07.2006
Skąd: Oława

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

Już prawie wszystko działa (pod FF3.0). Zastosowałem sposób z wykorzystaniem display:table. Wszystko ładnie z tym, że nie wiem, jak wyśrodkować teraz obrazek.

Podsyłam kodziki:

[HTML] pobierz, plaintext 
  1. <div id="images">
  2.         <ul>
  3.           <li><a href="photos/G_4830.JPG" rel="lightbox.roadtrip" title="G_4830"><img src="photos/thumbs/thumb_G_4830.JPG" alt="G_4830" class="vertical" /></a></li>
  4.           <li><a href="photos/IMG_1960.JPG" rel="lightbox.roadtrip" title="IMG_1960"><img src="photos/thumbs/thumb_IMG_1960.JPG" alt="IMG_1960" class="horizontal" /></a></li>
  5.         </ul>
  6.       </div>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. #images ul {
  2.     display:              table;
  3.     table-layout:         fixed;
  4.     background-color:     #fff;
  5.     border:               1px dashed #ddd;
  6.     padding:              0.5%;
  7. }
  8.  
  9. #images li {
  10.     display:              table-cell;
  11.     float:                left;
  12.     width:                150px;
  13.     height:               150px;
  14.     border:               1px dashed #ddd;
  15.     margin:               0.5%;
  16.     overflow:             hidden;
  17. }
  18.  
  19. #images a {
  20.     display: block;
  21.     margin: 0;
  22.     padding: 5px;
  23.     border:               1px solid #aa5;
  24.     background-color:     #fafafa;
  25.     overflow: hidden;
  26. }
  27.  
  28. #images img {
  29.     border: 1px dashed #fafafa;
  30.     display: block;
  31. }
  32.  
  33. #images img.horizontal { width: 100%; }
  34. #images img.vertical { height: 135px; }
  35.  
  36. #images a:visited img {
  37.     border: 1px dashed #fafafa;
  38.     background-color: #fff;
  39. }
  40.  
  41. #images a:hover img {
  42.     border: 1px solid #aa5;
  43.     background-color: #fafaf1;
  44. }
[HTML] pobierz, plaintext


--------------------
~ kim jest Ta, co mi w oczach zasadza takie drzewo? ~
Go to the top of the page
+Quote Post
Kreton
post 24.07.2008, 12:21:43
Post #8





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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

Dobrze było by się zorientować czy działa to na IE 6 i 7 , nie ?
Go to the top of the page
+Quote Post
dyniaq
post 24.07.2008, 12:28:43
Post #9





Grupa: Zarejestrowani
Postów: 34
Pomógł: 4
Dołączył: 31.07.2006
Skąd: Oława

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

No na razie to się tym nie martwię. Najpierw ma działać na normalnych przeglądarkach.
A IE6 nawet mi nie chce wyświetlić czegokolwiek bo ma jakiś problem z deklaracjami XML.

A wracając do sedna. Wiesz jak wyśrodkować te obrazki?


--------------------
~ kim jest Ta, co mi w oczach zasadza takie drzewo? ~
Go to the top of the page
+Quote Post
Kreton
post 24.07.2008, 15:35:09
Post #10





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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

Chodzi o to to, że w poziomie możesz bez problemu wyśrodkować obrazek. Jeśli jest elementem blokowym to :
Kod
margin: 0 auto;
.
Problem jest jak chcesz wyśrodkować w pionie. Ważne jest określenie czy to panorama czy pionowe. Załóżmy masz swoje zdjęcie w kontrzenerze o wysokości 300px. Zdjęcia panoramiczne maja 150px wysokosci a pionowe 250px. I teraz aby obrazek był wyśrodkowany w pionie musisz nadac odpowienie marginesy, czyli
Kod
margin: 75px 0
dla panoramicznego i
Kod
margin: 25px 0
dla pionowego.
Wyskokość zdjęcia i marginesu po zsumowaniu wyniesie 300px czyli tylke ile chcesz. Wszystko będzie i w pionie i w poziomie. Rozumiesz o co mi chodzi?

Ten post edytował Kreton 24.07.2008, 15:35:50
Go to the top of the page
+Quote Post
dyniaq
post 24.07.2008, 18:28:42
Post #11





Grupa: Zarejestrowani
Postów: 34
Pomógł: 4
Dołączył: 31.07.2006
Skąd: Oława

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

Dziękuję za pomoc. Wszystko ładnie śmiga. Choć trochę lipa, że trzeba to taką okrężną drogą osiągać. No i mimo wszystko metoda wciąż jest trochę "na sztywno". Mam nadzieję, że kiedyś doczekam dnia, kiedy będzie można wszystko ładnie w CSSie zrobić i nie będzie już IE biggrin.gif Pozdrawiam


--------------------
~ kim jest Ta, co mi w oczach zasadza takie drzewo? ~
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2025 - 02:54
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn