Faneblade på hjemmesiden med CSS
Sat på siden 23-05-2003
På www.malka.it/libris har jeg lavet hjemmesiden med faneblade foroven for at den skal være lettere at finde rundt i. Desværre kendte jeg på det tidspunkt kun til at gøre med et program, der laver dem i Java. Ikke alle browsere kan tolke Java.
Desuden kræver disse faneblade, at hjemmesiden er bygget op med rammer. Jeg bryder mig bestemt ikke om rammer. De er irriterende, man kan ikke bare genindlæse en side uden at ryge tilbage til forsiden (dvs. det kan man, men det bliver et andet tip...), og nogle rammer er så dårligt lavet, at når man vil forlade hjemmesiden, så hænger man fast i rammen.
Her kommer et lille tip for dig, der vil have faneblade på din side, men vil undgå rammer og Java. Ligesom tidligere bruger vi StyleSheets (CSS). Faktisk er de så smarte, at selv hvis browseren ikke kan tolke CSS, så vises linkene som en ganske almindelig HTML-liste.
Se et eksempel på faneblade med CSS - bemærk, linkene eksisterer ikke i virkeligheden.
Der kræves to ting for at få faneblade på en side: Et HTML-dokument og et CSS-dokument.
I dit HTML-dokument skal du have følgende liste, som skal være links til dine undersider:
<ul><br>
<li>Denne side</li>
<li><a href="/ommig/">Om mig...</a></li>
<li><a href="/familie/">Min familie</a></li>
<li><a href="/hobbyer/">Hobbyer</a></li>
<li><a href="/links/">Links</a></li>
</ul>
Sådan ser en almindelig liste ud, og i HTML-dokumentet vil du få dette resultat:
- Denne side
- Om mig...
- Min familie
- Hobbyer
- Links
Du kan bruge det gratis program TopStyle Light til at hjælpe dig med at lave StyleSheets. Hvis du har brug for mere, kan du prøve det rigtige TopStyle. Det er shareware. Hvis du vil registrere din version, kan du gøre det her: http://www.regnow.com/softsell/nph-softsell.cgi?item=6598-4&affiliate=22429
Vi skal nu have lavet en klasse til denne liste. Klassen kalder vi ".faner", og du skal derfor rette ul-tagget til: <ul class="faner">. I Notesblok eller fx i TopStyle skal du skrive følgende klasse ind:
.faner
{
list-style-type: none;
border-bottom: 2px solid black;
padding-bottom: 24px;
margin: 0;
}
Ved hjælp af denne klasse fjernes punkterne, der ellers er forrest i en sådan liste. Der oprettes også en ramme-bund, der er 2 pixels i højden, og den placeres 24 pixels fra toppen af vinduet med en margin på nul.
Lige nu ser resultatet ikke for godt ud, så vi går videre og arbejdet på de enkelte punkter, nemlig <li>.
I TopStyle eller Notesblok skal du definere et nyt element, kaldet "li":
li
{
float: right;
margin: 2px 2px 0 2px;
border: 1px solid black;
background-color: lightblue;
}
Hvis du ønsker, at fanebladene i stedet skal være i venstre side, retter du float: right; til float: left;
Margin, ramme (border) og baggrundsfarve danner en blå firkant med sort ramme på to pixels omkring hvert element.
Cykel, møbler, computer, DVD? Hvad mangler du lige nu? Få et af Danmarks mest anerkendte kreditkort ? Ansøg nu. Du får svar inden 48 timer og op til 30.000,- på lommen? http://brand2brand.com/s/?96be93bcc5f3dd23e60b082c569a96afVi fortsætter med knapperne både den aktive fane og de andre:
.aktiv
{
border-bottom: 1px solid white;
background-color: white;
padding: 4px;
}
a
{
display: block;
color: white;
text-decorati
on: none;
padding: 4px;
}
Der er to typer faneblade. Det aktive vindue har ikke nogen links, for du er jo på siden. For at gøre dem forskellige benytter vi <a>-tagget, som jo netop benyttes i links.
Husk at rette "Denne side" på listen ovenfor til: <li class="aktiv">Denne side</li>
Ved hjælp af klassen "aktiv" får fanebladet både ramme og baggrund i hvid for at vise, at den er åben på siden.
På <a>-tagget har vi ændret links, så de ikke længere er understreget (text-decoration: none;). Teksten er hvid, og der er 4 pixels mellemrum til hver side i blokken.
Vi skal lige til slut have lavet en mouse over-effekt, sådan så fanebladene får modsatte farver, når man fører musen over:
a:hover
{
background: white;
color: lightblue;
}
Så mangler du bare at sætte de to ting sammen, og du er kørende. Du kan se i tippet Mouse Over-effekt på link, hvordan StyleSheetet sættes ind på din side:
http://www.malka.it/tips/modules.php?name=News&file=article&sid=2