MuKuL

Witam!

Dziś dla Tabelkowców pokażę jak zrobić box model: top-tresc-(pionowe)menu-stopkę. Będę musiał skorzystać z kilku trików, ale dość łatwych, tak jak sam szkielet.

Pierwsze co musimy wykonać to strukturę HTML wyglądającą tak: klik.
Jak widać, od poprzedniej wersji box modelu, którą zaprezentowałem kilka dni wcześniej, różni się przede wszystkim tym, iż dodałem w niej nowy div obejmujący! Pozwoli to nam na rozwiązanie pewnego problemu, o którym wspomnę za chwilę.

Teraz dodajmy kod CSS:
body {
background-color: #d0d0d0;
font-size: 17px;
font-family: tahoma;
padding: 60px;
margin: 0px;
width: 600px
}

div {margin: 0px}

#top {
background-color: #fff000;
width: 100%;
height: 100px
}

#obejmij {
width: 100%;
position: relative
}

#menu {
background-color: #00cce4;
margin: 0px;
height: 20px;
width: 200px;
position: absolute; top: 0px; right: 0px
}

#tresc {
background-color: #e4ff87;
height: 400px;
width: 400px;
}

#stopka {
background-color: #ff87ce;
height: 20px;
width: 100%
}

Opis: No i tak wygląda cały kod! Aby mieć menu po prawej stronie musiałem użyć pozycjonowania absolutnego, no i właśnie tu z pomocą przyszedł div obejmujący. Gdybym mu nie nadał pozycjonowania relatywnego, menu poszło by na sam prawy-górny róg przeglądarki, a nie tak jak chcemy – pod topem.

Najczęstsze problemy:

• 1. Problem z rozciąganiem menu.
  Dużo osób nie wie jak rozciągnąć menu, tak aby było ono równe z treścią strony. Problem ten nie występuje gdy mamy takie same tło dla treści jak i dla menu. Jednak co jeśli mamy na odwrót? Cóż, są dwa ciekawe sposoby na rozwiązanie tego problemu! Pierwszym z nich jest wykorzystanie (tak jak w moim box modelu) diva obejmującego i nadanie mu jednego tła graficznego. Więcej na: stronie Gieri’ego.
  Kolejny sposób, który wam polecam i sam zastosuję go w tym projekcie to technika z wykorzystaniem borderu dla diva o identyfikatorze “tresc”. Jako, że menu jest pozycjonowane absolutnie nie będzie to na niego oddziałowywać, a w dodatku metoda ta jest w pełni zdatna do szybkiego przebudowania szerokości pojedynczych kolumn na stronie!
  Jak więc będzie wyglądać przykład mojego szkieletu z tym patentem? Wystarczy dodać odpowiednią linijkę do kody CSS i tylko tyle!!!
  #tresc {
border-right: 200px solid #00cce4;
background-color: #e4ff87;
height: 400px;
width: 400px;
}

Efekt końcowy wygląda tak.

Dodatki:

• 1. Menu po lewej.
  A co jeśli chcemy menu po lewej? Takie rozwiązanie jest prawie standardem tworzenia szkieletów WWW. A więc? Nic specjalnego, musimy zmienić tylko dwa słowa!
  Poprawiony efekt CSS:
  #menu {
background-color: #00cce4;
margin: 0px;
height: 20px;
width: 200px;
position: absolute; top: 0px; left: 0px
}#tresc {
  background-color: #e4ff87;
  border-left: 200px solid #00cce4;
  height: 400px;
  width: 400px;
  }

  Jak widzimy, uległo zmianie position: absolute; top: 0px; left: 0px (było: position: absolute; top: 0px; right: 0px) oraz border-left (było: border-right). Dwa słowa!
  A taki efekcik końcowy: taki jest .

Często początkujący webmasterzy robią strony na tabelach. Cóż, nie dziwi mnie ten fakt, z dwóch powodów. Jest im łatwiej, jest prościej, jest szybciej… Czemu nie przesiadka na elementy blokowe? To właśnie drugi powód… Nie umieją. Zrobienie dla webmastera szkieletu z divów, który do dotychczas robił szkielet z tabelek, wydaje się piekielnie trudne. Między innymi dlatego, że nie zna poleceń sterujących zachowaniem elementu w arkuszach stylów CSS. Po co komu dodatkowa nauka? Po to, gdyż strony robione na elementach blokowych/liniowych są bardziej elastyczne i dają dużo większe możliwości. Co ja będę gadać – sama teoria !

Cała seria tych artykułów ma was wprowadzić w projektowanie szkieletów dzięki elemencie blokowym DIV. W każdej z edycji będę zamieszczać jeden box model, ale będą one coraz to trudniejsze i zauważymy w tedy różnicę pomiędzy wykonaniem takiego szkieletu w tabelach, które w końcu nie do tego służą, a na elementach blokowych.

1. Pierwszy box model: szkielet całkowicie poziomy.
- Przykładowy kod:
(CSS):
body {
background-color: #d0d0d0;
font-size: 17px;
font-family: tahoma;
padding: 60px;
margin: 0px;
width: 600px
}

#stopka {
background-color: #ff87ce;
height: 20px
}

—————————————-
(HTML): kod HTML

Opis: Jak widać kody HTML i CSS są banalnie proste (znaczy dlatego kto chociaż zna podstawy ).
Przejdźmy do rzeczy… Kod HTML został opracowany na czterech divach i bloku ich obejmującym – czyli body strony. Dla pojedynczych elementów zostały nadane identyfikatory, które odnoszą się do kaskadowego arkusza stylów. Mamy więc bardzo dużą kontrolę i estetykę kodu… jeśli chcemy zmienić wygląd, zaglądamy do CSS’a, a jeśli treść to do HTML’a. Easy, nie prawdaż ;->?

Najczęstsze problemy:

1. Brak . Ten box model jest tak prosty, że nie ma z nim kłopotów… No o ile posiadamy choć maleńką wiedzę o CSS’ie.

Efekt sami zobaczcie.