[CSS] Kilka pytań w kwestii strony w CSS 100%

[Marcin Kalisz]

Robienie strony via ImageReady i zapisanie tego jako Div'y nie spełniło moich oczekiwań, więc zabrałem się za tworzenie na stylach od zera i tu pojawiają się moje pytania.

1. Jak na prawdę działa pozycjonowanie za pomocą "relative"? W artykułach jakie znalazłem piszą, że jest to ustawianie względem "poprzedniego obiektu" albo "obiektu sąsiadującego". Ja póki co widzę to tak, że pozycjonuje mi jedynie względem div'a, w którym znajduje się div, który znów chcę ustawić.

2. Słyszałem, że nie należy budować strony za pomocą "absolute". Dlaczego? Co w zamian i dlaczego?

3. Chciałbym ustawić graficzną belkę pod tekstem, jednak ustawianie jej na konkretne położenie w przypadku częstej zmiany treści mija się z celem. Chcę więc by w stylu opisującym belkę określić, że obrazek ma się pojawiać zawsze np. 10 px pod tekstem. Kto mi podsunie jakiś pomysł? Próbowałem umieścić belkę jako align: bottom w divie z tekstem ale tu pojawia się problem z punktem nr 1.

4. Mam dreamweaver'a. Pomijając kilka dziwnych zachowań tego programu (np. potrafi się zaciąć i nie dodawać styli do pliku zewnętrznego - trzeba reainstalować) zadziwia mnie okno Design. Kiedy tworzę w CSS strona w tym oknie wygląda jak po przejściu huraganu. Jedna warstwa nad drugą - kompletny chaos. Przeglądarki takie jak: Opera, FF czy IE wyświetlają jednak wszystko ok. Czy to normalne?

[Stig]

AD1.

Polecenie pozycjonowania relatywnego (względnego) pozwala przesunąć wybrany element w dowolną stronę względem jego położenia spoczynkowego, czyli pozycji gdy nie używamy żadnego pozycjonowania.

To cytat z kursu Sławomira Kokłowskiego, który wydaje mi się najlepszym wytłumaczeniem kwesti pozycjonowania relatywnego.

AD2. Tak, to prawda - do ustawiania elementów na stronie nie zaleca się używania zarówno pozycjonowania absolutnego jak i każdego innego (w tym relatywnego) związanego z atrybutem position (poza określonymi, specyficznymi przypadkami). Jako alternatywę należy używać pozycjonowania opartego o atrybuty float, clear, margin i padding. Świetnie tę kwestię omawia "CSS Float Tutorial".

AD3. Należałoby zrezygnować z ustalania konkretnego położenia danego elementu. Jeśli będziesz postępował zgodnie z filozofią pozycjonowania, omówioną pod w/w adresem, to wystarczy, że ową belką zamieścisz w markup'ie pod elementem akapitu tekstu, a w stylu nadasz jej atrybut margin-top o wartości 10px.

[Marcin Kalisz]

Dzięki Stig... faktycznie Floatowanie jest świetnym rozwiązaniem... mam jeszcze dwa pytania w kwestii nadawania obramowań.

1. Czytałem, że IE 5.0 i 5.5 nie obsługują komendy "border" z parametrami "dotted" i dashed". Wszystko ok, ale ja mam IE 6 i kiedy ustawiam obramowanie "dotted" pojawia mi się tandetnie wyglądające kreskowanie. Opera i FF jak zwykle bez problemów. Czy to znaczy, że IE 6 też sobie nie radzi z tym problemem? Jak ominąć ten problem? Znajduję mnóstwo stron, które mają takie obramowanie i działa ono w IE 6.

2. Właśnie pracuję nad stroną opartą na trzech pionowych kolumnach. Środkową chcę obramować z lewej i prawej strony. Zabawne jest jednak zachowanie mojego edytora (Dreamweaver). Kiedy dodaję choć jedno obramowanie w oknie edycji ucieka mi ostatnia, prawa kolumna. Rozciąga mi "pojemnik" w prawo i w dół (umieszczając się 20 px poniżej środkowej kolumny - taki mam ustawiony górny margines dla wszystkich kolumn).
W moich przeglądarkach jest wszystko ok, ale boję się, że ten błąd wyjdzie na innym komputerze, bądź innej wersji np. FF.

[Stig]

AD1. Problem z interpretacją obramowania typu "dotted" występuje w każdej wersji przeglądarki Internet Explorer. Pewnym rozwiązaniem tej kwestii może być zastosowanie na krawędziach elementu powtarzającego się obrazkowego tła, składającego się z kropki i odpowiedniego ostępu. Niestety, nie tylko w tej kwestii ułomność IE wymusza na nas działanie okrężne

AD2. Nigdy nie używałem Dreamweaver'a i nie wiem, z czym konkretnie może być związanych ten problem. Jednakże nie polecam opierać się wyglądem strony prezentowanym przez wszelkiego typu edytory, zwłaszcza wtedy, gdy generowany jest on za pomocą własnego silnika edytora lub IE. Jeżeli strona wygląda poprawnie w najnowszej wersji porządnych przeglądarek (dla Windowsa - Opera i Mozilla Firefox) to nie powinieneś mieć żadnych powodów do obaw