webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 6

Inne podejście do menu

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: nawigacja nawigacja menu menu listy listy kurs css kurs css

Już raz na tym kursie tematem przewodnim były hiperłącza - teraz jednak poznasz nowe - bardzo ciekawe efekty, a także najnowsze sposoby na tworzenie list nawigacyjnych. Zobaczmy przykłady:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div id="prawa"></div>
<div id="lewa">
<h2>_menu:</h2>
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul>
</div>
<div id="srodek">
<ul>
<li><a href="a.htm">HOME</a></li>
<li><a href="a.htm">Spis treści</a></li>
<li><a href="a.htm">Nowości</a></li>
<li><a href="a.htm">Kontakt</a></li>
</ul>
</div>

</body>
</html>

Opis:

Plik CSS:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2 {
background-color: silver;
letter-spacing: 0.5em;       // 6
margin: 0 0 2px 0;
padding: 5px;
font-weight: bold;
font-size: 13px;
font-family: verdana;
border: 1px solid black;}

div#lewa ul {               // 1
padding: 0;                 // 2
margin: 0;                  //
width: 150px;               //
list-style-type: none;      //
font-weight: bold;          //
font-size: 12px;            //
font-family: verdana; }     // 2

div#lewa ul li {             // 3
margin: 0 0 2px 0;           //
border: 1px solid black;     //
background-color: silver; }  // 3

div#lewa ul a {              // 4
display: block;              //
color: black;                //
padding: 5px 15px 5px 15px;  //
text-decoration: none; }     // 4

div#lewa ul a:hover {           // 5
color: gray;                    //
background-color: #cdcdcd;      //
background-image: url(1.gif);   //
background-position: 120px 50%; //
background-repeat: no-repeat; } // 5 

Opis:

W taki oto sposób mamy opisane lewe menu. Ale w kodzie mamy jeszcze raz cos podobnego - tylko w innej warstwie, a nasze opisy nie będą działać na listę z warstwy 'lewa'. Trzeba więc dodać trochę kodu:

Uzupełnij plik css:

body { margin: 5px; padding: 5px; background-color: black; }
div { padding: 5px; margin: 0; border: 1px solid white; vertical-align: top; background-color: gray; }
div#lewa { float: left; width: 200px; }
div#prawa { float: right; width: 180px; }
div#srodek{ margin: 0 191px 0 220px; }

div#lewa h2, div#lewa ul li { // 1
margin: 0 0 2px 0;
border: 1px solid black;
background-color: silver;}

div#lewa h2 { // 2
letter-spacing: 0.5em;
padding: 5px;
font: bold 13px verdana; } // 3

div#lewa ul, div#srodek ul { // 4
padding: 0;
margin: 0;
list-style-type: none;
font: bold 12px verdana; }

div#lewa ul { // 5
width: 150px; }

div#lewa ul a {
display: block;
color: black;
padding: 5px 15px;
text-decoration: none; }

div#lewa ul a:hover, div#srodek ul a:hover {
color: gray;
background-color: #cdcdcd; }

div#lewa ul a:hover {
background-image: url(1.gif);
background-position: 120px 50%;
background-repeat: no-repeat; }

div#srodek ul li {
background-color: #cdcdcd;
border: 1px solid black;
display: inline; } // 6

div#srodek ul a { // 7
color: black;
padding: 0px 15px 1px 15px;
text-decoration: none; }

Opis:

Jeśli już wszystko pozapisywałeś i włączyłeś tą stronę zapewne widzisz, że na środku jakby brakuje treści, a po prawej w ogóle jej nie ma... To sie zmieni już na następnej lekcji. Zapraszam dalej!

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Oczekujesz profesjonalnej obługi?
Projektowanie stron www.
Sprawdź nas!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org