Menu Poziome

Aby utworzyć Menu poziome w naszej nowej stronie internetowej wpiszmy do pliku index.html w znaczniku body:

<div id="menu">
<a href="index.html">Strona Główna</a>
<a href="omnie.html">O mnie</a>
<a href="kontakt.html">Kontakt</a>
</div>

Oczywiście menu może być bardziej zaawansowane. Ale wszystko po kolei, jeżeli stawiasz swoje pierwsze kroki w HTML-U ważne jest byś najpierw zrozumiał co jest do czego a potem rozszeżał swoją wiedzę o nowe bardziej skomplikowane elementy.

Ale wracając do menu. Jak wpisałeś bądź skopiowałeś ten tekst to teraz musisz otworzyć nowy dokument w swoim notatniku bądź notepadzie++ (do niego namawiam)i zapisz go pod nazwą menu.css Rozszerzenie które dodałeś po kropce to nic innego jak css czyli znów skrót z języka angielskiego Cascade Style sheets a po polsku kaskadowe arkusze styli. Co to takiego oraz jak dokładnie wygląda stosowanie tych styli znajdziesz w rozdziale pt."CSS" Do którego serdecznie zapraszam.
Jeżeli masz już ten plik to musisz teraz wpisać do menu.css taką treść:

body{ background:#ffffff; margin:0px; }
#menu { padding: 24px; border:#999 1px dashed; }
#menu > a{
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
background: #aaa;
padding: 12px 24px;
color:#ffffff;
margin-right: 10px;
text-decoration:none;
border-radius: 3px;
}
#menu > a:hover{
background: #666666;
color:#FFF;
}
teraz wytłumaczę wam co dodałem do tego aby stworzyć takie menu otóż:

body - Ciało dokumentu

do tego selektora użyłem tło o wartości #ffffff (biały)oraz marginesu, który wynosi zero. Następnie umieściłem div o nazwie menu do niego dodałem:

padding - odstęp 24px;

border - obramowanie
Kolejnym krokiem który poczyniłem było wstawienie ustawienie w tym divie wartości takich jak:

rodzina czcionek

wielkości czcionki

tła dla linków

paddingów - odstępów

koloru tekstu

prawego marginesu

usunełem dekorację tekstu która domyślnie jest podkreśleniem

ustawiłem kąt na brzegach ramek aby to ładniej wyglądało

ostatnim krokiem przy tworzeniu menu w CSS było wstawienie innego tła kiedy najedzie się myszką na te menu.

Jeśli chcecie dowiedzieć się więcej czym są selektory itp. zapraszam serdecznie do odwiedzenia strony pt."CSS"