GoldenLine
Zaloguj się
Magdalena K.

Magdalena K. Grafik

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Cześć

Czy mógłby mi ktoś pomóc. Chodzi o to,że potrzebuje ustawić na stronie kilka obrazków różnej wielkości w 5 rzędach poziomo. Próbowałam to sama zrobić ale albo IE nie łapie o co mi chodzi albo po prostu coś pisze nie tak. Proszę o pomoc i dziękuje z góry.
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

<div style="width: 800px;">



	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />

	<img src="img.jpg" style="float: left;" />



</div>


Tak najprościej. Szerokość kontenera div ustalasz sobie w zależności od wielkości miniaturek. Jeśli miniaturki podobnej wielkości to powinny ładnie się rozłożyć.
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy



<ul>

<li><img src="sciezka.jpg" alt="" /></li>

<li><img src="sciezka.jpg" alt="" /></li>

<li><img src="sciezka.jpg" alt="" /></li>

<li><img src="sciezka.jpg" alt="" /></li>

</ul>



ul {

list-style: none;

}

ul li {

display: inline;

}
Link do wypowiedziLink
Magdalena K.

Magdalena K. Grafik

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Dziękuję za szybką pomoc:)
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

@Krystian, Twój kod nie jest zbyt semantyczny. UL to lista wypunktowana :-) Taki drobny szczegół, bez urazy. Pozdrawiam
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Kamil Brenk:
@Krystian, Twój kod nie jest zbyt semantyczny. UL to lista wypunktowana :-) Taki drobny szczegół, bez urazy. Pozdrawiam
Przyganiał kocioł garnkowi :)
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Kamil Brenk:
@Krystian, Twój kod nie jest zbyt semantyczny. UL to lista wypunktowana :-) Taki drobny szczegół, bez urazy. Pozdrawiam

W takim razie jaki jest najlepszy sposób? ;) Bo floaty dla początkujących nie są miłe czasami. Lista obrazków = ul jak dla mnie. Zresztą gdzie widzę jakieś galerie to na <ul> są...


Przyganiał kocioł garnkowi :)


Nie ma to jak offtop :)
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Kamil Brenk:
@Krystian, Twój kod nie jest zbyt semantyczny. UL to lista wypunktowana :-) Taki drobny szczegół, bez urazy. Pozdrawiam

Myślę, że dla Magdy semantyka kodu ma raczej małe znaczenie. Poza tym, UL dla - jakby nie było - wypunktowania fotografii, jest jak najbardziej OK. W momencie, gdy trzeba będzie dodać jakieś dodatkowe "bajery" do zdjęć, można będzie wszystkie dodatkowe znaczniki (np. h1, p, span) umieszczać w LI.
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Rafał - Nieckula:
Kamil Brenk:
@Krystian, Twój kod nie jest zbyt semantyczny. UL to lista wypunktowana :-) Taki drobny szczegół, bez urazy. Pozdrawiam

Myślę, że dla Magdy semantyka kodu ma raczej małe znaczenie. Poza tym, UL dla - jakby nie było - wypunktowania fotografii, jest jak najbardziej OK. W momencie, gdy trzeba będzie dodać jakieś dodatkowe "bajery" do zdjęć, można będzie wszystkie dodatkowe znaczniki (np. h1, p, span) umieszczać w LI.

EDIT:
@Krystian: czy "display:inline;" działa poprawnie pod każdą przeglądarką? Nie chce mi się teraz tego testować, a kiedyś miałem z tym jakieś problemy pod IE (oczywiście). Jak to wygląda teraz?
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Rafał, display: inline zadziała wszędzie. Gorzej z obsługą np. display: table-cell czy display: block-inline, ale nie o to tutaj chodzi.

Jak tak w sumie pomyślę to może być i UL. Dodatkowy znacznik nad każdym zdjęciem LI daje więcej możliwości formatowania i wtedy można bardziej poszaleć z ostylowaniem :-) Po prostu zawsze zdjęcia wrzucam w kontener DIV, jakoś bardziej wydawało mi się to właściwe.
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Kamil Brenk:
Rafał, display: inline zadziała wszędzie. Gorzej z obsługą np. display: table-cell czy display: block-inline, ale nie o to tutaj chodzi.
{display: inline-block;} to lepsze rozwiązanie niż floaty, tylko trzeba wiedzieć jak je używać. Polecam google.
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Rafał - Nieckula:
EDIT:
@Krystian: czy "display:inline;" działa poprawnie pod każdą przeglądarką?

http://www.quirksmode.org/css/display.html
Link do wypowiedziLink

konto usunięte

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Adam Pawliczek:
Kamil Brenk:
Rafał, display: inline zadziała wszędzie. Gorzej z obsługą np. display: table-cell czy display: block-inline, ale nie o to tutaj chodzi.
{display: inline-block;} to lepsze rozwiązanie niż floaty, tylko trzeba wiedzieć jak je używać. Polecam google.

inline-block nie dziala poprawnie w IE... a napewno nie z divami, moze img ma wiecej szczescia. Lepiej zastosowac floata i sie nie martwic.
Link do wypowiedziLink
Wojciech Bielecki

Wojciech Bielecki {{ Architekt
oprogramowania |
Programista }}

Temat: css - zdjęcia w rzędach poziomo - brak pomysłu - pomocy

Z moich obserwacji i testów wywnioskowałem, że jeżeli zastosujemy inline-block na elementy z natury blokowe to pod IE mogę wyjść ciekawe rzeczy czasami. Natomiast dla elementów liniowych dla IE spisuje się to całkiem nieźle, bo nieraz zdarza mi się z tego korzystać :) no i wiadomo ze pod IE6 to nie zadziała, a ostatnio zauważam, że mimo iż przeglądarka miała oficjalny pogrzeb to jednak sporo osób dalej z niej korzysta. (chyba raczej z nieświadomości)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Pomocy - brak polskich znak...




Wyślij zaproszenie do
Anuluj