Så lad os starte med menuen, der vises i øverste vinduesområde.
I har allerede lavet en del forarbejde til denne menu. I husker nok den smukke farvegradient, der blev gemt som en et-pixels grafik. Præcis denne kommer nu i brug. Før dette skal den passende HTML-struktur dog oprettes for menuområdet. Denne kunne se ud som følgende:
<div class="header"> <div class="header-top"> <h1>Din revisor</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Forside</a></li> <li><a href="#">Om os</a></li> <li><a href="#">Hvordan vi arbejder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div class="header-img"> </div> </div>
For at designe baggrunden inkluderes et-pixels grafikken og gentages vertikalt, indtil hele elementet er fyldt.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Derefter kan menuen formateres. Generelt er der ikke noget særligt at bemærke ved sådanne menuer. Det vigtige ved sådanne menuer er normalt kun følgende aspekter:
• Skjuler punktopramningen med list-style-type: none;.
• Sørg for, at listen er vist ved siden af hinanden.
Jeg arbejder på dette stadie - det ved I for længst - med en farvegradient, der er realiseret gennem en grafik. I mellemtiden er der naturligvis mange andre muligheder til rådighed for menuer. Tænk f.eks. på JavaScript-rammestrukturer som jQuery. At præsentere alle disse muligheder ville naturligvis overskride rammerne her. Der er dog allerede mange online-generators, hvor menuer kan oprettes med få klik. En af dem - uden at vurdere, om det er den mest geniale af sin art - kan findes under http://www.cssmenubuilder.com/.
Jeg har i hvert fald valgt følgende variant:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Det vigtige er faktisk kun hover-tilstanden. Når dette sker, vises en anden baggrundsgafik.
Den højre menu
Hjemmesiden har ikke kun en menu øverst, der vises også en i højre vinduesområde.
Denne menu hører til i div-området med klassen content-right. I udviklingsfasen af siden har jeg kun lagt dummy-indhold derind.
<div class="content-right"> <h2>Hovedmenu</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
Området positioneres først på det rigtige sted og i den ønskede størrelse.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Herefter fortsættes med definitionen af den faktiske menu. Denne gang står elementerne dog under hinanden. I skal derfor kun sørge for at skjule punktopramningen. Den øvrige menuens udseende er i sidste ende op til jer.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}I browseren burde dette nu resultere i følgende billede:
Den nederste menu
På hjemmesidens bund vil der være en anden menu. Her på PSD-Tutorials.de bruges en sådan menu også til at give links til generel information.
På vores hjemmeside er der også et copyrightnotat. Begge ting er faktisk ret typiske for hjemmesider. Først igen HTML-strukturen.
<div class="bottom"> <ul> <li><a href="index.html">Hjem</a></li> <li><a href="#">Om os</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontrolcenter</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Sitemap</a></li> </ul> <p>© Copyright 2014 af PSD-Tutorials.de</p> </div>
Det er en simpel ul-liste. Hvert listeindgang indeholder en menupost. Under ul-listen er der et p-element, hvor copyrightmeddelelsen står. Hvad der mangler, er selvfølgelig CSS-syntaksen.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Hvordan I designer bunden, er selvfølgelig op til jer. Jeg bruger igen en farvegradient. I kan dog f.eks. også bruge en simpel baggrundsfarve eller straks anvende CSS3-syntaks. I tilfælde af min grafiske variant er det dog afgørende, at gentagelse forhindres ved background-repeat: no-repeat;.
Tag først et kig på resultatet:
Det, der skiller sig ud her, er de hvide linjer, der vises ved siden af de enkelte menuposter. Disse defineres ved hjælp af forskellige border-left-angivelser, hvilket i sidste ende betyder, at angivelserne henviser til den venstre elementmargin.
I alt ser syntaksen for bundmenuen således ud:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Der er en særlighed i forhold til topmenuen her. Faktisk indlæses der ikke et ekstra billede, når der hoveres. Men for at fortælle besøgende, at de bevæger musen over et link, understreges de enkelte links, når hover-begivenheden forekommer.
Ved afslutningen af denne vejledning er de grundlæggende trin hen mod hjemmesiden udført. Det eneste, der mangler, er at pifte siden op. Mere om dette i de kommende vejledninger.
