13. Navigationsbjælke 1: CSS-delen

Du er her: Start → Indholdsfortegnelse → Navigationsbjælke 1: CSS-delen
Indhold

Indledning

Du skal nu forbedre dit design af fiskesiderne lidt. Der skal en "Navigationsbjælke" til. Den ser lidt mere fancy ud og den er nem at overskue for dine brugere. Samtidig giver den et overblik over, hvilken side man nu befinder sig på.

Navigationsbjælken er lavet ved hjælp af CSS og PHP. Dette giver nogle (få) ulemper. Den bliver sandsynligvis ikke vist som den skal i browser-versioner under 4.0. Disse browsere vil til gengæld få vist menuerne som en unummereret liste (en punktopstilling med tegn).

Opgaven er delt i 2 dele. Den første del her behandler udseendet ved hjælp af CSS og den anden del (Kapitel 14) behandler PHP-delen, som skal bruges til at vise den aktive side med en anden farve i Navigationsbjælken.

Du kan se et færdigt eksempel på den opgave du nu skal lave: Eksempel

Opret mappe og download filer

  1. Opret en ny mappe og kald den fisk2
  2. Download derefter disse sider og billeder (sørg for, at filer kommer til at hedde det samme som herunder):

Omdan links til en punkt-opstilling

  1. Åbn filen index.htm, som du downloadede før.
  2. Flyt markøren ned i linien, hvor der står <div class="menu">.
  3. Slet alle bindestregerne lav linieskift (ikke HTML), så dine links kommer til at stå således: 
    <div class="menu">
<a href="index.htm">Startside</a>
<a href="guppy.htm">Guppyer</a>
<a href="neon.htm">Neonfisk</a>
<a href="platy.htm">Platyer</a>
<a href="zebra.htm">Zebrafisk</a>
</div>
  4. Markér de fem linier med links (som starter med <a)
  5. Klik på knappen Punktopstilling
  6. Vælg: Punkttegn
  7. Klik Ok
  8. Dine links skulle nu se således ud:

Rediger stylesheet

Da hele dette menu-system bygger på stylesheets, er det første du skal gøre, at gå ind og redigere i det stylesheet, der allerede eksisterer:

  1. Åbn siden index.htm
  2. Sæt markøren lige over koden </style>
  3. Vi starter med at oprette et id til selve menuen.
  4. Opret følgende ID (oprettes med #-tegnet): 
     #navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
    Forklaring:
    padding: 3px 0; giver en indre margen på 3 pixels i top og bund af menuen og en venstre og højre på 0 pixels.
    margin-left: 0; sætter venstre margen til 0
    border-bottom: 1px solid #778; sætter en ramme i bunden af menuen, der er 1 pixel bred, solid i en grå farve med en anelse blåt (#778 svarer til #777788). Farven:    
    font: bold 12px Verdana, sans-serif; er en "samlekode", der kan sætte flere egenskaber for font på én gang: Her vælges fed skrift i str. 12pixel, skrifttypen Verdana eller alternativ en sans-serif.
  5. Du skal nu anvende navlist-id'et:
    Højreklik på koden <ul>
  6. Udfyld således:
  7. Slet cirkeltypen (dvs. slet type="circle"), men ikke <ul>
  8. Dine links skulle nu se såleds ud:

    Læg mærke til den vandrette streg under linkene og at man ikke kan se punkttegnene mere.
  9. Næste del går ud på 3 ting:
    1. at fjerne punkttegnene
    2. at sætte venstre margen til 0
    3. at omdanne listepunkterne fra blok-elementer til inline-elementer (dvs. sørge for at hvert listepunkt ikke bliver vist på en ny linie, men derimod fortsætter hen ad linien som almindelig tekst)
  10. Flyt igen markøren op lige over koden </style>
  11. Skriv følge kode: 
    #navlist li
{
list-style: none;
margin: 0;
display: inline;
}
    Forklaring:
    Linien #navlist li (skrevet uden komma mellem #navlist og li) betyder at de følgende regler kun gælder for punkter (li), som befinder sig indenfor #navlist-elementet. Det kommer således ikke til at gælde for evt. andre listepunkter på resten af siden.
    list-style: none; her fjerner vi punkttegnene
    margin: 0; her sættes margen til 0 om hele punkt-elementet display: inline; her omdannes hvert punkt fra at være et blok-element (som er standard for punkter og som altid giver en ny linie for hvert punkt) til at være et inline-element, som stort set svarer til almindelig tekst.
  12. Dine links skulle nu se således ud:

    Læg mærke til, at punkterne nu står ved siden af hinanden og ikke over hinanden.
  13. Nu skal vi til at give linksene nogle farver og rammer:
    Flyt igen markøren op lige over koden </style>
  14. Skriv følgende kode: 
    #navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
    Forklaring:
    #navlist li a betyder at de følgende regler kun gælder for links, der befinder sig inde i et punkt, som befinder sig inde i #navnlist og derfor ikke for links, der er andre steder på siden.
    padding: 3px 0.5em; sætter den indre margin til 3pixels i top og bund og en halv "em-space" i venstre og højre side. Em-space er en relativ størrelse. Det svarer til en firkant i samme størrelse som et M i den skriftstørrelse der er valgt. I dette tilfælde er det det samme som 6pixels.
    margin-left: 3px; venstre sættes til 3pixels
    border: 1px solid #778; der sættes en ramme om linket med bredden 1pixel, solid og med samme farve som rammen for hele menuen vi oprettede tidligere.
    border-bottom: none; her fjernes rammen i bunden
    background: #DDE; baggrundsfarven sættes til en lys grå med en anelse blåt. Farven:    
    text-decoration: none; fjerne understregningen af linkene.
  15. Din menu skulle nu se således ud:
  16. Du skal nu pynte lidt på link-farverne:
    Flyt igen markøren op lige over koden </style>
  17. Skriv følgende: 
    #navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
    Forklaring:
    Vi vælger forskellige farver til linket hvis det er: Link, der ikke har været besøgt (a:link)
    Link, der har været besøgt (a:visited)
    Link, som musen holdes over (a:hover). Denne sidste for også tildelt en anden baggrunds- og ramme-farve.
  18. Din menu skulle nu se således ud:

    Læg mærke til, at menuen skifter farve (Guppy), når man placerer musemarkøren over linket.
  19. Tilsidst skal vi sørge for at menuen skifter farve alt efter hvilken side brugeren befinder sig på. I første omgang virker dette kun på den første side. Vi skal i Kapitel 14 indsætte koder, der automatisk skifter farve alt efter hvilken side, der er aktiv.
  20. Flyt igen markøren op lige over koden </style>
    Skriv følgende: 
    #navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
    Forklaring:
    #navlist li a#current opretter et nyt id, der kun gælder for den aktive side (eller skal bruges til at markere den aktive side senere), for links, der er indenfor et punkt, som er indenfor #navlist.
    background: white; baggrundsfarven sættes til hvid
    border-bottom: 1px solid white; bundrammen sættes også til hvid. Dette overskriver den ramme vi oprettede under #navlist og giver en illusion af faneblade, hvoraf dette er det aktive.
  21. Du skal nu (for at se effekten) sørge for at en af linkene er markeret som det aktive:
    Find koden <a href="index.htm">
  22. Ret koden så henvisningen til #current tages med:
    <a href="index.htm" id="current">
  23. Din side burde nu se således ud:
  24. For at få den rigtige virkning skal nu nu lave lidt om på farver på siden:
    Flyt markøren op lige efter koden <style type="text/css">
  25. Ret farverne i body, så teksten bliver mørkeblå og baggrundsfarven bliver hvid. Det kunne foreksempel se således ud i koderne: 
    body {
	font-size:10pt;
	font-family:'Verdana','Arial',sans-serif;
	color:#002762;
	background-color:#FFFFFF;
}
  26. Din side burde nu se således ud:

    Læg mærke til det hvide "faneblad", der angiver den aktive side. I Kapitel 14 skal du bruge PHP til at skifte farve på menuen, så det svarer til den aktive side.