Układ zamknięty szablonu

W propozycjach ktoś napisał, że chciałby się dowiedzieć, jak połączyć nagłówek z kolumnami i wszystko obramować. Nawet dla mnie jest to temat dość odstraszający, ale w końcu przychodzi taki dzień, że trzeba się dziarsko zabrać za coś potencjalnie trudnego. Nieoczekiwanie otrzymałam zamówienie, do którego świetnie pasować będzie układ zamknięty. To idealna okazja, żeby trochę przybliżyć Wam ten przypadek. Do dzieła!

Piszę tę instrukcję, bazując na nagłówku o wysokości 900 pikseli i szerokości 600, a podstawą szablonu jest czarna Rewelacja. Usunęłam standardowe tło bloga. W panelu ustawień szablonu "Zaawansowane" obramowanie i tło daty, postu, gadżetów i obrazów w poście ustawiłam na "przezroczyste". Wybrałam szósty układ treści, czyli post po prawo i pasek boczny z lewej strony.

Lecimy od góry, najpierw nagłówek.

#Header1 {background: url(link do nagłówka);
height: 600px;
width: 900px;
position: relative;
border: 5px solid rgb(255, 128, 0);} 

Oczywiście  obramowanie ustawiacie według potrzeb grubości, stylu, koloru i w ogóle krawędzi.

Dla łatwiejszej orientacji w wymiarach od razu dodamy obramowanie także do poszczególnych kolumn. Dzięki temu będziemy pracować na już ostatecznie przygotowanych ramkach, które wystarczy połączyć.

.column-center-inner {border: 5px solid rgb(255, 128, 0);}
.column-left-inner {border: 5px solid rgb(255, 128, 0);}

Teraz zaczyna się właściwe ustawianie.

.column-center-inner {position: relative;
top: -35px;
left: 16px;} 

Jeśli obramowanie wynosi 2px to górny margines -32px, 12px to -42px itd. Piksele obramowania dodajecie do 30px marginesu i dopisujecie minus z przodu...

To samo robimy z lewą kolumną:

.column-left-inner {position: relative;
top: -35px;
left: 16px;}

W "Dostosuj ustawienia szerokości" cały blog ustawiamy na liczbę pikseli równą 900 + 2x szerokość obramowania (tu: 5px), czyli 910px. Jeszcze jeden przykład? Jeśli szerokość Twojego obramowania wynosi 7px, to szerokość bloga musisz ustawić na 914px, ponieważ 900+2x7=914.
lewy pasek boczny na dowolną szerokość, ja wybrałam 200px.

Teraz wystarczy jeszcze tylko nasunąć na siebie obramowania obu kolumn, ponieważ powstała między nimi linia podwójnej grubości.

.column-left-inner {margin-right: -5px;}

I znów liczba, którą zmieniamy w zależności od nadanego obramowania.
>>EFEKT<<

Cały kod wygląda tak:

#Header1 {background: url(link do nagłówka);
height: 600px;
width: 900px;
position: relative;
border: 5px solid rgb(255, 128, 0);}
.column-center-inner {border: 5px solid rgb(255, 128, 0);
position: relative;
top: -35px;
left: 16px;}
.column-left-inner {border: 5px solid rgb(255, 128, 0);
position: relative;
top: -35px;
left: 16px;
margin-right: -5px;}

Dlaczego Twój jest dłuższy? Prawdopodobnie wklejasz do arkusza wszystkie podane przeze mnie kody, ja dopisywałam tylko konkretne komendy do wcześniej wpisanych selektorów.

Jak zrobić to samo dla szablonu z paskiem bocznym z prawej i postem z lewej?

Wszystkie selektory .column-left-inner zamieniamy na .column-right-inner.
Ostatni krok nieco modyfikujemy:

.column-right-inner {margin-left: -5px;} 

gdzie liczba pikseli (tu: -5) musi wynosić tyle co szerokość obramowania kolumn. Jak zawsze... Może być koniecznie ponowne ustawienie szerokości kolumn.
>>EFEKT<<

W komentarzach odpiszę na wszystkie pytania dotyczące tej instrukcji!

Zgłaszajcie wszelkie niejasności - będę próbować jakoś pomóc.

Pamiętajcie! Jeśli wykonacie tę instrukcję jako ćwiczenie, spróbujecie zrozumieć wszystkie mechanizmy i poświęcicie temu nieco uwagi - łatwiej będzie Wam rozwiązać jakikolwiek problem.