MuKuL

Box modele | cz. 2.

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 .

1 komentarz jak dotąd
Dodaj komentarz