Så la oss begynne med menyen som vises i det øvre vindusområdet.
Dere har allerede gjort en god del arbeid for denne menyen. Dere husker sikkert den fine fargegradienten som ble lagret som en pikselgrafikk. Nå er det nøyaktig det som blir brukt. Først må imidlertid den tilsvarende HTML-strukturen opprettes for menyområdet. Den kan se slik ut:
<div class="header"> <div class="header-top"> <h1>Din regnskapsfører</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Hjemmeside</a></li> <li><a href="#">Om oss</a></li> <li><a href="#">Hvordan vi jobber</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div class="header-img"> </div> </div>
For å designe bakgrunnen blir pikselgrafikken integrert og gjentatt vertikalt så mange ganger at hele elementet fylles ut.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Deretter kan menyen formateres. Prinsipielt er det ingen spesielle hensyn å ta. Når det gjelder slike menyer, er det vanligvis bare følgende aspekter som er viktige:
• Skjul punktene i oppramsingen med list-style-type: none;.
• Sørg for at listeelementene vises ved siden av hverandre.
Jeg jobber på dette stedet – det vet dere allerede – med en fargegradient som er implementert via en grafikk. I mellomtiden er det selvfølgelig mange andre alternativer tilgjengelig for menyer. Tenk for eksempel på JavaScript-rammeverk som jQuery. Å presentere alle disse mulighetene her ville åpenbart være for omfattende. Men det er allerede mange online-genererere der ute som lar deg lage menyer med bare noen få klikk. Én av dem – uten å bedømme om den er den beste av sitt slag – finner dere på http://www.cssmenubuilder.com/.
Jeg har i hvert fall 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 som egentlig er viktig er hover-tilstanden. Når denne hendelsen inntreffer, vises en annen bakgrunnsgrafikk.
Den høyre menyen
Nettstedet har ikke bare en meny på toppen, det vises også en i høyre vindusområde.
Denne menyen tilhører div-området med klassen content-right. For utviklingsfasen av siden har jeg bare lagt inn dummy-innhold der.
<div class="content-right"> <h2>Hovedmeny</h2> <ul> <li><a href="#">Lenke 1</a></li> <li><a href="#">Lenke 2</a></li> <li><a href="#">Lenke 3</a></li> <li><a href="#">Lenke 4</a></li> <li><a href="#">Lenke 5</a></li> <li><a href="#">Lenke 6</a></li> <li><a href="#">Lenke 7</a></li> <li><a href="#">Lenke 8</a></li> <li><a href="#">Lenke 9</a></li> <li><a href="#">Lenke 10</a></li> </ul>
Området blir først plassert og dimensjonert på riktig måte.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Videre går vi videre med definisjonen av den faktiske menyen. Denne gangen vises elementene imidlertid under hverandre. Dere må derfor bare sørge for å skjule punktene i oppramsingen. Ellers kan dere selv bestemme hvordan menyen skal se ut.
.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 nettleseren vil bildet nå se omtrent slik ut:
Den nedre menyen
I bunnen av nettsiden vil det være en annen meny. Her på PSD-Tutorials.de brukes også en slik meny for å tilby lenker til generell informasjon.
På nettsiden vår er det også en opphavsrettsmerknad. Begge disse tingene er egentlig ganske typiske for nettsider. Først, HTML-strukturen igjen.
<div class="bottom"> <ul> <li><a href="index.html">Hjem</a></li> <li><a href="#">Om oss</a></li> <li><a href="#">Nyheter</a></li> <li><a href="#">Kontrollsenter</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Sidekart</a></li> </ul> <p>© Opphavsrett 2014 av PSD-Tutorials.de</p> </div>
Dette er en enkel ul-liste. Hver listeoppføring inneholder en menyoppføring. Under ul-listen er det et p-element som inneholder opphavsrettsmerknaden. Det som mangler nå, er selvfølgelig CSS-syntaksen igjen.
.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 du designer bunnen, er selvfølgelig opp til deg. Jeg bruker igjen en fargeovergang. Du kan imidlertid for eksempel bruke en enkel bakgrunnsfarge eller til og med CSS3-syntaks. I tilfelle av min grafikkvariant er det imidlertid viktig at gjentakelse hindres med background-repeat: no-repeat;.
Først se på resultatet:
Noe som skiller seg ut her, er de hvite strekene som vises ved siden av de enkelte menyoppføringene. Disse defineres med ulike border-left-angivelser, som til slutt betyr at angivelsene refererer til venstre kant av elementet.
Samlet sett ser syntaksen for den nedre menyen slik ut:
.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;
}
Det er en spesiell detalj her i motsetning til topplinjen. Faktisk lastes det ikke inn et annet bilde ved hover. For å likevel informere besøkende om at de svever over en lenke, understrykes de enkelte lenkene når hover-hendelsen oppstår.
Ved slutten av denne opplæringen er de grunnleggende trinnene mot nettsiden gjennomført. Det som mangler nå er å ferdigstille siden. Mer om dette i de kommende opplæringene.
