Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

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.

9 komentarzy

  1. Nie łatwiej użyć selektora .main-inner ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Można użyć .main-inner, ale wtedy nie będzie linii pomiędzy paskiem bocznym i postem oraz (co ważniejsze) szablon będzie się rozjeżdżał przy rozdzielczościach mniejszych niż 1024x768 - nie jest takowych wiele, ale jeśli szanujemy czytelnika... Byłoby to tak:
      .main-inner {border: 5px solid rgb(255, 128, 0);
      position: relative;
      top: -5px;
      left: 21px;}
      Tam gdzie -5 ma być grubość obramowania nagłówka. Poza tym szerokość bloga należy zmniejszyć o 10 pikseli (czyli ma wynosić 900).
      Czy ta odpowiedź jest wyczerpująca? ;)

      Usuń
    2. Linię można by dodać tak: .column-right-inner {border-left: solid #000 5px;}. Poza tym z .main-inner jest mnie roboty, bo przesuwasz tylko jedną kolumnę, nie dwie. Mnie wydaje się to lepsze rozwiązanie.

      Usuń
    3. Btw, nie chodziło mi o cały kod, ale o to dlaczego męczyłaś się z dwoma kolumnami ;)

      Usuń
    4. Jak kto woli. Artykuł ten ma służyć jako porada, ćwiczenie. Zawsze można kombinować, modyfikować i sprawdzać wiele rozwiązań i możliwości. Nie narzucam swojego sposobu, proponuję go jako jedno z wielu.
      Jeśli dodamy linię tak jak Anonimie napisałeś: .column-right-inner {border-left: solid #000 5px;}, to musimy dodać do szerokości bloga 5px (czyli powinna wynosić 905). Można dowolnie wszystko ustawiać, ale najpierw trzeba wiedzieć jak to działa.
      I dlaczego od razu męczyłaś? O.o
      Pozdrawiam! I dziękuję za uwagi ;)

      Usuń
  2. Bardzo fajny post i napisany ludzkim językiem, że niemal wszystko rozumiem. Tylko czy można na przykład dać screen efektu końcowego? Żeby porównać, czy mniej więcej nasz szablon jest podobny do Waszego.

    OdpowiedzUsuń
  3. A jak zmienić kolor krawędzi na taki jak bym chciała? Bo próbuję i próbuję, ale nie wychodzi ten kolor, który chcę. A wklejanie kodu z pobranego koloru nie działa :(

    OdpowiedzUsuń
    Odpowiedzi
    1. A mogę Cię prosić, żebyś podała, co robisz i jak wygląda Twój kod? Naprawdę to ułatwi sprawę, bo możliwości jest mnóstwo a nawet więcej. ;)

      Usuń