Skocz do zawartości
Domiss

Lekcja 2 - Tworzenie Header'u

Polecane posty

Domiss

Autorzy: DomissDEV

Wstęp: Witam, pewnie parę osób mnie kojarzy z zaatakowanego ostatnio forum. Chciałbym tutaj dokończyć moje tutoriale dot. przema. Skończyliśmy na Menu lecz wszystko będę robił na nowo z powodu chaotycznego opisania poszczególnych rzeczy. Więc postanowiłem to wszystko zrobić na nowo więc zapraszam do lektury. Peace ;-)

Potrzebne Pliki:

• overall_header.tpl

• nazwastylu.css

Nasz Cel: W tym poradniku naszym celem będzie zakodowanie header'u.

Tutorial: Więc odpalamy plik overall_header.tpl i szukamy




i usuwamy wszystko aż do 




Jak już wszystko usunęliśmy, po:




dodajemy:


[/code] Tym sposobem oznaczyliśmy element, który będzie naszym header. Więc stworzyliśmy header. Ależ zaraz !? Nic się nie stało ? A to dlatego, że nie zdefiniowaliśmy naszego header'a w css'ie. Więc otwieramy: [b]nazwastylu.css[/b] i po
[code]body { background: #fff; }
dodajemy:
#header {  ;}
Dobrze więc zdefiniowaliśmy nasz header, teraz pozostało nam przypisać do niego: • kolor tła • wielkość • szerokość • pozycje Więc aby dodać kolor tła lub tło obrazkowe do header'u musimy posłużyć się background'em a dokładniej przed średnikiem ( ; ), dodajemy kolor wpisując:
background-color: #fff;
Każdy może ustawić sobie też tło obrazkowe a zrobić to można w ten sposób, zamieniamy:
background-color: #fff;
na:
background-image: url(images/header.png)
Tym sposobem ustawiliśmy tło obrazkowe nadając ścieżkę do pliku header.png. Lecz my zostawimy nasze tło 1-dno kolorowe. Więc zostawiamy 1-wszą wersje tła. Teraz nasz kod wygląda mniej więcej tak:
#header { background-color: #fff;}
Dobrze mając już kolory trzeba ustawić wysokość oraz szerokość tego headeru więc po
background-color: #fff;
dodajemy:
width: 1100px; height: 350px;
Do header'u przypisaliśmy szerokość o wartości 1100px a wysokość 350px. Każda wartość musi być oddzielona średnikiem więc nasz css wygląda teraz mniej więcej tak:
#header { background-color: #fff; width: 1100px; height: 350px;}
Teraz chcemy aby ten header był na samej górze ekrany, aby nie było żadnej przerwy czy coś w tym stylu. Więc dodajemy pozycje absolutną tylko od góry czyli dodajemy do css'a:
position: absolute; top: 0px;
Tym sposobem ustawiliśmy pozycje absolutną oraz nadaliśmy jej pozycje od góry w naszym przypadku wynosi ona 0px ponieważ chcemy aby nie było żadnej przerwy. Teraz nasz kod wygląda tak: CSS:
#header { background-color: #fff; width: 1100px; height: 350px; position: absolute; top: 0px;}

Mowa Końcowa:

I tym oto sposobem osiągnęliśmy nasz cel uzyskania header'u w stylu opartym na subsilver. Zapraszam na moje kolejne poradniki i do zobaczenia DomissDEV

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
×
×
  • Utwórz nowe...