dziwy i DIVy

Na potrzebę tego ćwiczenia zrobilem 4 <div> 3 o nazwach R (czerwona obwódka), G (zielona obwódka) i B (niebieska obwódka) Siedzą sobie w czwartym o nazwie POLE
do tych nazw będe dodawał im nazwę kolejnego typu i tak np. tu "pole-typ01" to ten największy szary. wygląda to tak w kodzie.

i do tego style css

i do tego style css

Wnioski: DIVy R, G i B rociągnely się na całą szerokość pola, choć ich zawartością jest jedną literka i nie bylo to potrzebne do jej otoczenia. zatem DIV swojej wielkości nie ustala w zależnosci od zawartości. proszę też zwrócić uwagę, że DIVy ulożyły się jeden pod drugim, choć starczyło by miejsca w szerokości. DIV POLE nie rozciągnął się na szerokość strony...dlaczego? ponieważ mial nadaną wielkosć WIDTH tu akurat 198 pixeli.
dla porównania w nasze pole wstawmy tabele (table) i zobaczmy jak się zachowa.

tabelka odmiennie od DIVa dostosowała się do najdluższej linni tekstu

Spróbujmy zrobić by R-G-B nie były na całą szerokość i dlaczego mają stać rządkiem?

No i prosze co za swobodny układ, to już nie ma co porównywać z tabelką, z tabelką tak sie nie uda.
a style dla R-G-B wyglądaja teraz tak:

DIVom nadaliśmy wielkość, przez to nie rozciągają się już na całe POLE i każdy może z nich mieć dowolną wielkość. wykorzystując margines tu MARGIN-LEFT udało się je poodrywać od lewej krawędzi POLA. przy okazji, można używać jednostek stałych i względnych. wielkość w pixelach zawsze będzie taka sama, wartość w procentach zależy od naszego pola, jeśli pole było by większe to powiększył by się DIV B i odstęp od lewej krawędzi zwiększył się.

Przetestujmy teraz takie coś, skoro da się marginesem swobodnie przesuwać w bok to zastosujmy też margines od góry

Trzeba zawolać...Huston mamy problem!!!... kto używa przeglądarki Internet Explorer (dlalej bedzie skrótem IE) nie interpretującej poprawnie kodu html to może jeszcze nawet nie zauważyl, używający normalnych przeglądarek np. FireFox(dlalej bedzie skrótem FF) już widzą, że nasze B wyszlo poza pole. choć wartości marginesów top są niższe od left, to jednak nie są liczone od górnej krawędzi pole a od dolu poprzedniego elementu, zsumowały się i zabraklo już miejsca. ponieważ pole ma stałą wysokość, tu akurat 99 pixeli, to w normalnych przeglądarkach ma dalej 99 i element przekraczający tą wielkoć wypada poza obręb, IE ignoruje wysokoć nadaną pole i usiluje go rozciągnąć wszystkie elementy zawarte w srodku. (podobnie zachowują się celki tabel, że niezależnie od nadanej im wielkoci zawsze rozciągną sie do zawartosci)
spróbujmy uzyskać więcej swobody

Udalo się. Możemy postawić precyzyjnie DIVy RGB w każdym miejscu POLE, nawet zmusić je do tego gdy się ze sobą pokrywają. DIV B jest teraz na górze, chć w kodzie HTML jest wpisany jako ostatni i to nie ma znaczenia gdy zastosujemy pozycjonowanie absolutne. To lekarstwo na wiele bólów glowy, poza jednym...starzy webmaserzy widząc w kodzie pozycjonowanie absolutne drwią z nowicjusza w tym fachu, okrutnie. Powód? takie strony sypią się totalnie, gdy w przeglądarce kto powiększy/pomniejszy wielkość liter.

#r-typ04 {border:2px solid red; background-color: #fff; width: 35px; position:absolute; left:30px; top:55px;}
#g-typ04 {border:2px solid green; background-color: #fff; width: 100px; position:absolute; left:60px; top:60px;}
#b-typ04 {border:2px solid blue; background-color: #fff; width: 25%; position:absolute; left:100px; top:2px;}

Uwaga tu trzeba zmodyfikować styl POLA dodając pozycje relatywną, bez tego DIVy R-G-B pozyjoowaly by się wobec całej strony, a nie DIVa POLE, czyli uciekł by nam na samą górę.

.pole-typ04 { background-color: #ddd;
border: 1px solid black;
height: 99px;
width: 198px;
position:relative;}

Jeśli wszystko w kodzie jest poprawne to możemy otrzymać taki znaczek jak ponizej. Zaglądaj na tą stronę by sprawdzić swój kod. Kliknij na znaczek!