od zera do webmastera

dziwy i divy /cześć2

Wyszło nam poprzednio, że DIVy mają swoją przyrodzoną skłonność do układania się jeden pod drugim, a nie chcą wcale obok siebie, nawet jak ch zawartość by na to pozwalała. żeby moć zaprojektować ciekawy układ strony musimy mieć możliwość 2 DIV-y obok siebie. Sprobujmy ustawić je sąsiadująco w poziomie.

typ 05
1
2
3

#r-typ05 {border:2px solid red; background-color: #fff; width: 25%; float: left;}
#g-typ05 {border:2px solid green; background-color: #fff; width: 25%; float: left;}
#b-typ05 {border:2px solid blue; background-color: #fff; width: 25%; float: left;}

Za to że się udało odpowiedzialna jest cecha FLOAT, opływanie użyteczne to bywa równierz, gdy chcemy by tekst opływał zdjęcie. Tu DIV probuje opłynąc DIV poprzedzajacy, w efekcie ustawia się jeden obok drugiego.


Tu poniżej inny sposób. Oparty na POSITION ABSOLUTE. Na oko jest to to samo co wyżej, ale kod wygląda odmiennie. Ale DIVy udało ustawiś cię koło siebie w jednej linni.

typ 04
1
2
3

#r-typ04 {border:2px solid red; background-color: #fff; width: 48px; position:absolute; left:1px}
#g-typ04 {border:2px solid green; background-color: #fff; width: 48px; position:absolute; left:52px}
#b-typ04 {border:2px solid blue; background-color: #fff; width: 48px; position:absolute; left:104px}

I przypomnienie, że DIV nadrzędny musi mieć ustawienie POSITION:RELATIVE inaczej pozycja DIV-ów nie będzie się odnosić do niego a do człej strony i DIVy nam powyskakują poza nasz DIV-stanowiący przykład.

Następny znany mi sposób na DIV-y w rządku w poziomie

typ 06

1
2
3

#r-typ06 {border:2px solid red; background-color: #fff; width: 25%; display: inline;}
#g-typ06 {border:2px solid green; background-color: #fff; width: 25%; display: inline;}
#b-typ06 {border:2px solid blue; background-color: #fff; width: 25%; display: inline;}

Inny sposób to użycie DISPLAY z wartością INLINE. Po naszemu mówiąc to tu kazemy DIVom by zachowywały się jak znaki w tekscie. Tu nie możemy wpływać na szerokość DIVa tak jak nie i nie mozna nadac tekstowi cechy WIDTH

To teraz tak przykład mini układu jaki jest typowy dla stron internetowych i Tak niech POLE bedzie szarym miejscem na nagłówek
R bedzie miejscem na menu boczne
G miejscem na treść
B stopka
i tak powstal zarys najmniejszej strony WWW świata :-)
Te cechy juz wykorzystywaliśmy wszystkie po za jedną nowością CLEAR z wartościa BOTH dla B. Takie coś trzeba dodawać jęśłi poprzednio był użyty FLOAT, Zatrzymujo o opływanie i następne elementy nie probują już opływać.

typ 07
1
2
3

#r-typ07 {border:2px solid red; background-color: #fff; width: 40px; height: 72px; float: left; position:relative; top:15px;}
#g-typ07 {border:2px solid green; background-color: #fff; width: 150px; height: 72px; float: left; position:relative; top:15px;}
#b-typ07 {border:2px solid blue; background-color: #fff; clear: both; position:relative; top:0px;}