Witaj! Jesteś początkującym webmasterem? I jeszcze nie ogarniasz tego wszystkiego i co chwilę masz problemy? Spokojnie, wejdź, usiądź, po prostu się rozgość. Zaraz spróbujemy Ci pomóc. Herbaty? Nie? To sam się napiję…a więc z czym przychodzisz? Jakie masz problemy? Szybko, pytaj!

Eee… ostatnio przerzuciłem się z tabel na divy i mam kłopot. Nie wiem jak wyśrodkować diva. Wiesz jak to zrobić?

Oczywiście. Wystarczy mu nadać stałą szerokość oraz margin: auto. Nic trudnego.

No dobrze, a w takim razie w jaki sposób ustawić dwa divy obok siebie? Żeby utworzyły się dwie kolumny.

Ponownie musisz obu blokom ustawić stałą szerokość a ponadto każdemu nadać  float: left. Ewentualnie obu float: right lub też jednemu float: left a temu drugiemu float: right. Jeśli tylko suma szerokości tych bloków będzie wystarczająco mała aby zmieściły się obok siebie to wszystko powinno działać tak jak chcesz.

Kiedyś tak próbowałem ale mimo, że rozmiary się zgadzały to jednak te dwa bloki nie mieściły się obok siebie!

Pamiętaj, że szerokość diva to suma jego wartości width, grubości obramowania po obu stronach a także, uwaga: wielkość odstępu wewnętrznego czyli paddingu, także po obu stronach.

A faktycznie, miałem tak ustawione! To pewnie dlatego. A już kiedyś bawiłem się wartościami float ale był przy tym same problemy. W momencie jeśli w divie był inny pływający obiekt to ten blok się zsuwał, miał zły rozmiar. Przez to float wszystkie elementy będące poniżej podnosiły się w górę. Dlaczego?

To typowe. Jeśli w jakimś elemencie jest obiekt z ustawionym float to nie będzie on przyjmował prawidłowej wysokości. Będzie zachowywał się tak jakby tego pływającego elementu wcale tam nie było. Ale naprawienie tego jest proste. Wystarczy temu elementowi który się zsuwa nadać wartość CSS overflow: hidden. Wszystko powinno być od tego momentu dobrze.

Ok, zostawmy już te divy. Mam jeszcze inny kłopot. Niedawno temu próbowałem stworzyć menu i  chciałem aby przestrzeń do kliknięcia była konkretnych rozmiarów. Próbowałem nadać elementowi a wysokość i szerokość ale nic nie działało. To błąd przeglądarki?

Nie, Twój. Element a to obiekt liniowy więc nie można mu nadawać wymiarów. Ale w CSS istnieje atrybut display dzięki czemu można sprawić by każdy element zachowywał się tak jak chcemy. I żeby odnośnik zachowywał się jak blok i miał wymiary najzwyczajniej nadajemy mu wartość display: block.

Dobra cwaniaku. To teraz mi powiedz w jaki sposób zrobić taki pasek na dole strony z na przykład newsami by nie ruszał się podczas przewijania strony.

CCSem. Nadajesz paskowi position: fixed oraz bottom: Ypx gdzie Y to wysokość tego paska i wszystko będzie chodzić jak w szwajcarskim zegarku.

No dobra, a w takim razie jak…

Herbata mi się skończyła.

I?

Na dzisiaj już skończmy. Wrócimy do naszej rozmowy w przyszłości.