Ćw.1 – tworzenie menu (plik menu.xhtml) Utworzyć dokument menu

Ćw.1 – tworzenie menu (plik menu.xhtml) Utworzyć dokument menu

XHTML – skalowalna nawigacja
Ćw.1 – tworzenie menu (plik menu.xhtml)
Utworzyć dokument menu.xhtml, który ma
zawierać cztery linki postaci:
<ul id="nav">
<li ><a href="\">Wstęp </a></li>
<li ><a href="prezentacja.html">Oferta </a></li>
<li ><a href="news.html">Nowości </a></li>
<li ><a href="kontakt.html">Kontakt </a></li>
</ul>
Wygląd takiej listy wypunktowanej (oznaczonej
identyfikatorem id="nav"), której nie przypisano
Ŝadnych styli przedstawia rys. 1.
Utworzyć nowy plik menu.css ustawiający
formatowanie czcionki podstawowej (jak w
ćw1.) i poszczególnych elementów listy (pliki gif
przedstawia rys.2):
body {font-size:small}
* html body {font-size:x-small; /* dla IE5/Win */
f\ont-size:small: /*dla pozostałych IE*/
}
#nav { background:#FFCB2D url(nav_bg.gif)
repeat-x bottom left;}
#nav li { font-family:"Lucida Grande",
sans-serif; font-size:85%}
#nav a {color:#333; border: 1px solid #9B8748;
background:#F9E9A9 url(off_bg.gif)
repeat-x top left;}
#nav a:hover {color:#333;
background:#fff url(on_bg.gif)}
1
Rys.1.
on_bg.gif
nav_bg.gif
Rys.2.
Rys.3.
Dla elementu o identyfikatorze nav dodano
ustawienie dla background, które oznacza, Ŝe
obrazek będzie powtarzany w poziomie i
wyrównany do dolnej krawędzi. Obrazek
nav_bg.gif ma tylko 3 piksele wysokości dlatego
zadeklarowane Ŝółte tło (#FFCB2D) będzie
widoczne w pozostałej części paska (rys.3).
Rezultat przedstawia rys.3.
Do pliku menu.css dodać ustawienia dla
istniejących juŜ wyjątków #nav i #nav a:
a) #nav {list-style:none;}
b) #nav a {text-decoration:none;
border-bottom:none;}
Rezultat przedstawia rys.4.
Uzupełnić css o kolejne ustawienia:
a) #nav {width:100%; margin:0;
padding:10px 0 0 46px;}
b) #nav li {margin:0; padding:0; }
c) #nav a {margin:0 1px 0 0; padding:4px 8px; }
Rys.4
off_bg.gif
XHTML – skalowalna nawigacja
Dzięki zatosowaniu właściwości float dla elementów li pozycje listy zostaną ułoŜone w linii
poziomej. Zastosowanie właściwości float dla ul spowoduje rozciągnięcie tła listy i
wyświetlenie go za wszystkimi jej pozycjami (rys. 5-6). Odnośniki w zakładkach będą
wyświetlane jako elementy blokowe (display:block). Elementy blokowe wyświetlane są
domyślnie w osobnych liniach - korzystając z właściwości float ustawiono je w jednej linii.
#nav { float:left;}
#nav li {float:left;}
#nav a {float:left;display:block;}
Ostateczny efekt skalowalnego menu (przy wyborze róŜnej wielkości czcionki podstawowej)
przedstawia rys.5.
Rys.5.
Końcowy plik menu.css:
body {font-size:small}
* html body {font-size:x-small; /* dla IE5/Win */
f\ont-size:small: /*dla pozostałych IE*/
}
#nav { float:left;width:100%;margin:0; padding:10px 0 0 46px;
list-style:none;
background:#FFCB2D url(image/nav_bg.gif) repeat-x bottom left;}
#nav li { float:left; margin:0; padding:0;
font-family:"Lucida Grande", sans-serif; font-size:85%}
#nav a { float:left;display:block; margin:0 1px 0 0; padding:4px 8px;color:#333;
text-decoration:none; border: 1px solid #9B8748; border-bottom:none;
background:#F9E9A9 url(image/off_bg.gif) repeat-x top left;}
#nav a:hover {color:#333; background:#fff url(image/on_bg.gif)}
2