phpBB2 by Przemo

[Polaczek]

CSS Top Construction Kit 01

Tworzymy prosty nagłówek w oparciu o CSS i HTML.

No cóż mogę powiedzieć na wstępie... zacznę od tego, że jest to bardzo prosty i dzięki temu jest user-friendly, bo małe nagłówki są bardzo dobre. Poradnik powstał po zobaczeniu przeze mnie nagłówka na pewnym forum, który miał wysokość około 1500px!

Dlaczego właśnie CSS?

Teraz wszystko jest oparte na CSS - jest to szybsze, wygodniejsze i elastyczniejsze. Dosyć napchanych tabel tam gdzie są niepotrzebne i pociętych grafik na 100 części tylko po to, żeby je wstawić w tagi img. Teraz wystarczą dwa obrazki top_bg.png (2,85KB) oraz logo.png (6,6KB). Lekkie prawda? I oto chodzi. Nie będzie się to wczytywać dopóki nie wyjdziesz ze swojej strony.

Potrzebna grafika

logo.png - http://ewszystko.eu/code/...on_kit/logo.png
logo.psd - http://ewszystko.eu/code/...on_kit/logo.psd
search_icon.png - http://ewszystko.eu/code/...search_icon.png (źródło: freeiconsweb.com)
top_bg.png - http://ewszystko.eu/code/..._kit/top_bg.png
top_bg.psd - http://ewszystko.eu/code/..._kit/top_bg.psd

Chcę zobaczyć to w akcji

Live demo: http://ewszystko.eu/code/...n_kit/demo.html

No dobra mam grafikę to od czego zacząć?

Najpierw utwórzmy plik style.css i dodajmy tam na początek taki kod:


Kod:

body { background: #000; margin: 0; }


Co to robi? Koloruje tło na czarne i ustawia margines na 0 pikseli.
Później tworzymy identyfikator dla tła naszego topu - czyli nagłówka.


Kod:

/**  * Budujemy tło, na którym ma być logo  */ #top_background { background: url('top_bg.png') repeat; /* Obrazek tła, który będzie się powtarzał */ width:100%; /* Ustawiamy szerokość na 100% */ height:100px; /* Ustawiamy wysokość na 100px - czyli tyle ile ma nasze tło */ }


Tło się powtarza nie zjadając przy tym więcej transferu niż oryginalnie ma grafika top_bg.png. Szerokość ustawiona jest na 100%, a szerokość na 100 pikseli - tyle właśnie ma grafika.

Teraz możemy wbudować logo w tło nagłówka.


Kod:

/**  * Budujemy logo  */ .logo { background: url('logo.png') no-repeat; /* Logo, niepowtarzające się */ width: 300px; /* Ustawiamy szerokość na 300px - czyli tyle ile ma nasze logo */ height:100px; /* Ustawiamy wysokość na 100px - czyli tyle ile ma nasze logo */ }


Tło ma wysokość 100 pikseli tak jak tło i szerokość 300 pikseli. Obrazek tła konfigurujemy przez linię background:url('logo.png'). Tutaj obrazek się nie powtarza.

Budujemy wyszukiwarkę.


Kod:

/**  * Budujemy wyszukiwarkę  */ #top_background form { margin: -75px 0px 0px 175px; /* Margines */ font-family: Arial; /* Czcionka */ font-size:11px; /* Wielkość czcionki */ color: #fff; /* Kolor czcionki */ } .search_input { background: #000; /* Tło */ color: #fff; /* Kolor */ height: 15px; /* Wysokość */ font-size: 11px; /* Wielkość czcionki */ font-family: Arial; /* Czcionka */ border: 1px solid #cacaca; /* Obramowanie */ /* Zaokrąglone rogi 3px */ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .search_icon { background: url('search_icon.png'); /* Tło przycisku */ background-color: transparent; /* Kolor tła */ border: 0px; /* Obramowanie */ color: transparent; /* Kolor */ /* Wysokosć/szerokość */ width: 17px; height: 15px; }


Element #top_background form odpowiada za położenie i czcionkę, klasa search_input odpowiada za kontrolkę w formularzu wyszukiwarki - czyli jej tło, kolor tekstu, wysokość, rodzaj (nazwę czcionki), obramowanie i zaokrąglone rogi, klasa search_icon odpowiada za ikonkę "wyszukaj", po której kliknięciu zostaniemy przeniesieni do wyników wyszukiwania - można tam ustalić tło przycisku, kolor tła, obramowanie, wysokość i szerokość.

Czas na budowanie nawigacji (menu):


Kod:

/**  * Budujemy nawigację  */ ul#menu { list-style: none; /* Żaden typ listy */ margin: -25px 27px 0px 27px; /* Margines: góra, prawa, dół, lewa */ } /**  * Element menu - typ wyświetlenia  */ ul#menu li { display: inline; /* Typ wyświetlenia - w linii */ } /**  * Element menu  */ ul#menu li a { background: #fff; /* Kolor tła */ padding:5px; /* Wielkość dopełnienia */ font-size:14px; /* Wielkość czcionki */ font-family: Arial; /* Nazwa czcionki */ color:#000; /* Kolor czcionki */ text-decoration: none; /* Nie podkreślaj! */ } /**  * Element menu po najechaniu kursorem  */ ul#menu li a:hover { background:#008000; /* Kolor tła */ padding: 5px; /* Wielkość dopełnienia */ font-size:14px; /* Wielkość czcionki */ font-family: Arial; /* Nazwa czcionki */ color:#fff; /* Kolor czcionki */ text-decoration: none; /* Nie podkreślaj! */ }



Identyfikator menu działający tylko dla tagu ul odpowiada za typ listy i margines (położenie).
Element menu - typ wyświetlania: ta sekcja pozwala na zdefiniowanie w jaki sposób styl ma wyświetlać menu. W tym przypadku będzie to inline, czyli w linii.
Element menu: ta sekcja odpowiada za kolor tła elementu menu, wielkość dopełnienia, wielkość czcionki, nazwę czcionki, kolor czcionki, a także odpowiada za to, żeby link nie został udekorowany podkreśleniem.
Element menu po najechaniu kursorem: ta sekcja odpowiada za kolor tła elementu menu po najechaniu na niego kursorem i wszystko inne - to samo co było w sekcji element menu tylko po prostu po najechaniu na ten element myszką.

To oczywiście nie wystarczy - teraz czas na HTML...
[list]Zaczynamy od utworzenia pliku index.html lub wstawienia tego w overall_header.tpl jeśli chcesz użyć tego menu na swoim forum(ach).
Definiujemy doctype:

Kod:

<!doctype html>

I jakby to nazwać, coś bez czego żyć się nie da

Kod:

<html lang="pl"> <head> <title>__NAZWA__STRONY__</title> <link rel="stylesheet" href="style.css" type="text/css"> <!-- tutaj includowany jest plik CSS --> </head>

Tworzymy ciało dokumentu:

Kod:

<body>

Zaczynamy od tła nagłówka:

Kod:

<div id="top_background">

Teraz dodajemy logo:

Kod:

<div class="logo"></div>

Wyszukiwarka:

Kod:

<form action="search.php" method="post"> <label for="keywords">Wyszukaj:</label> <input type="text" name="search_keywords" class="search_input"> <input type="hidden" name="show_results" value="topics" checked="checked"> <input type="submit" name="search" value="" class="search_icon"> </form>

Prawda, że to jest lżejsze od tabel?

Zamykamy tło nagłówka:

Kod:

</div>

Tworzymy nawigację (menu):

Kod:

<ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> <li><a href="#">Item 7</a></li> <li><a href="#">Item 8</a></li> <li><a href="#">Item 9</a></li> <li><a href="#">Item 10</a></li> <li><a href="#">Item 11</a></li> <li><a href="#">Item 12</a></li> <li><a href="#">Item 13</a></li> <li><a href="#">Item 14</a></li> <li><a href="#">Item 15</a></li> <li><a href="#">Item 16</a></li> </ul>

Ciało dokumentu powinno skończyć się tak:

Kod:

</body> </html>

Koniec

To na tyle. Mogę tylko jeszcze podać kilka ciekawych faktów:

• plik HTML zajmuje 1,04KB
  
• plik CSS zajmuje 2,11KB


A całość pięknie się prezentuje i łatwo się to edytuje.

[Gadatliwa Kasia]

[zax]

No no no, ładnie. Mógłbyś jeszcze powiedzieć jak zrobić, żeby usunąć odstępy ?

[Polaczek]

zax, które odstępy?

[dkwi]

Odstępy będące skutkiem white space bugu.

Kod:

ul#menu li {   float: left; }

Kod:

margin:0px

Zero nie ma jednostki.

Kod:

background:url('logo.png') no-repeat 0px 0px;

Jak wyżej, poza tym nie trzeba definiować przesunięcia, gdy ma wynosić 0.

Kod:

font-family:arial;

Warto zdefiniować ogólną rodzinę fontów, np. sans-serif

Kod:

list-style-type:none

list-style wystarczy, oszczędzamy bajty. Tak samo deklaracja typu arkusza CSS (text/css) nie jest wymagana w HTML 5.

Kod:

display:inline

Nie wierzę, że to nie rozwali się pod Operą, dlatego używam inline-block

Kod:

<div class="search">

Zbędne. Jako kontenera możesz użyć <form>.

Kod:

<div class="logo"></div>

Elementom, które wedle logiki występują tylko raz, nadajemy ID. Logo może być obrazkiem, a nawet powinno.

Kod:

<!doctype html>

Hint: nie radzę robić tego w by Przemo, wszystko się może rozwalić.

Poza tym nie lepiej nadać całemu div-owi ID a potem odnosić się do zawartych w nim elementów przez selektory dziedziczenia? Przecież formularz, lista i obrazek loga są unikalne w tym kontenerze.

[Polaczek]

Szczerze mówiąc lepiej wygląda z odstępami.

[ Dodano: 18-08-2010, 17:48 ]

[Bucu]

Polaczek, napisałes się, nic tylko pogratulowac. A i tak znajda sie lenie co beda chcieli zeby im za darmo do forum calosc dostosowac i wdrozyc

[Polaczek]

Jeszcze się nie napisałem Dopiero się napiszę przy drugim tutorialu

[zax]

Polaczek, chodzi mi o te przerwy między obrazkami.
Np. na vBulletin nie ma przerwy.

[Polaczek]

[Misiek [PL]]

Temat naprawdę przyda się początkującym lecz proponuje przeniesienie do F.A.Q. - style i grafika

[arearfdz]

hmmmmm a jak ja robie Portfolio to jak zrobić taki coś jak ma np. patryk spec


http://patrykspec.pl/category/download/

chodzi mi o to, że jak ktoś kliknie na logo to może sobie obejrzeć cały styl, podałby mi ktoś taki kod HTML? Proszę

[Polaczek]

arearfdz, to jest lightbox js.

[arearfdz]

Polaczek, no niby fajnie, ale skad to miec? albo jak to zrobic?

i mógłbyś podać jeszcze kod do tego, w jaki sposób się umieszcza tekst?

[Polaczek]

http://www.lokeshdhakar.com/projects/lightbox2/
Spróbuj najpierw sam wdrożyć. Jak będziesz miał problemy to napisz.

[Gadatliwa Kasia]

[arearfdz]

Nie dość że nie rozumiem po angielsku to jeszcze nie wiem jak to zrobic.... pliki na serwer wgralem, ale nie wiem gdzie poumieszczac te kody co tam podali i jak to obslugiwac