[css] Strona przewijana poziomo

[Publius]

Witam.

Chcialbym uzyskac efekt jak na stronie:
http://www.mfilomeno.com/peterlindbergh/The_Birds.html

ale oczywiscie wykorzystujac sam CSS bez tabeli. Chodzi mi o to, zeby obrazki wstawiac do kodu tylko w formie:

Kod: Zaznacz cały

<img src="04.jpg"/>

lub

Kod: Zaznacz cały

<div><img src="04.jpg"/></div>

i tak ustawic znaczniki img lub div w CSSie, zeby obrazki ustawialy sie automatycznie w poziomie. Probowalem juz z float, clear, wysokoscia strony w body, ale nie udalo mi sie... ciagle fotki wyswietlaly sie w pionie...

Z gory dzieki za odpowiedz!

[123456]

Najprostszym i najgorszym sposobem jest umieszczenie wszystkich

Kod: Zaznacz cały

<div><img src="04.jpg"/></div>

w jedym div'ie z szerokoscia taką jak szerokosc wszystkich zdjec, a div'y w ktorym beda zdjecia musza miec float:left.

[koziolek]

Kod: Zaznacz cały

div.ramka{
float: left;
margin-left: 1em; /*zapenia minimalne odstępy*/
width: 600px;
height: 400px;
}
div#obr1{
background-image: url("obr1.jpg");
}

Jak to działa. Na stronie umieszczamy n divów które w tłach mają nasze obrazki. Następnie odpowiednio skalujemy każdy z divów.

Po co tak? Otóż dzięki temu można ograniczyć kod html i wykorzystując style "inline" mieć pewność że nic się nie posypie. Użytkownicy IE6 nie będą mogli naszych obrazków zapisać tak od razu na dyski. pod FF i O i tak to mogą zrobić. Pozdrawiam

[Publius]

faktycznie sposob 123456 jest najprostszy, ale dlaczego najgorszy?


@ koziolek:

Twoj sposob wyglada ciekawie, ale niestety go troche nie kumam... w CSS sie juz troche bawie, ale pewnych rzeczy jeszcze nie wiem...

1. do czego odnosi sie:

Kod: Zaznacz cały

div#obr1{

oraz

Kod: Zaznacz cały

div.ramka{

2. dlaczego raz jest # po divie (div#obr1), a raz kropka (div.ramka)?

3. czy mam dla kazdego obrazka osobno robic styl? np.:

Kod: Zaznacz cały

div#obr1{ 
background-image: url("obr1.jpg");

div#obr2{ 
background-image: url("obr2.jpg");

div#obr3{ 
background-image: url("obr3.jpg");

toz to czasu zajmie, ze hoho... chodzilo mi raczej o szybki sposob, np taki jaki podal 123456

poczekam jednak na wyjasnienie z Twojej strony.

[123456]

ale dlaczego najgorszy?

Poniewaz trzeba przy kazdym dodaniu zdjecia zmienic szerokosc div'a. W niektorych przypadkach moze to byc problemem. Chociaz sposob podany przez koziolka jest jeszcze bardziej czasochlonny i trzeba na sztywno ustalic wysokosc i szerokosc ale nie mam zamiaru sie z nim wyklucac

Troche sie rozpedzilem i zaczalem odpowiadac na pytania kierowane nie do mnie i skasowalem zeby nie bylo ze sie wtracam.

[Publius]

hehe jesli jedynym minusem jest zmiana szerokosci ramki, to kupuje to

generalnie nie oceniam sposobu koziolka, dopoki go nie objasni

[koziolek]

hej!
# - oznacza id elementu
. - oznacza wartość class elementu

sztuczka wbrew pozorom nie jest taka czasochłonna jeżeli przed opublikowaniem fotek zrobisz jedną z tych rzeczy:
- zestanadaryzujesz rozmiar. Jeżeli wszystkie obrazki będą miały ten sam rozmiar nie będzie potrzeby nadawania divom różnych rozmiarów.
- generując stronę będziesz wpisywał style inline w których zdefiniujesz odpowiednie wartości.

jeszcze jedna metoda chyba najbardziej pokręcona i 123456 będzie protestował:

Kod: Zaznacz cały

img{display: inline;}

i umieszczamy tylko znaczniki <img> na stronie.

[123456]

Hehe faktycznie musze zaprotestowac . Ale robie to tylko dlatego, ze ta metoda nie dziala. Chyba, ze przegladarki mi sie popsuły

[koziolek]

bo najprawdopodobniej zapomniałeś o urokach htmla
<img src=".." width="150" height="160" alt=""/>

wysokość i szerokość podajemy w znaczniku. Uroki htmla a nie xhtmla

[123456]

Nie zapomnialem. Ani "z" ani "bez" "urokow" jakos nie wychodzi. Ale i tak nie uzywam img (sa oczywiscie wyjatki) wiec nie przejmuje sie "nie dzialaniem"