Tabellfarge

BAT
BATs bilde
Avlogget
Ble med: 14.11.2009

 Hei,

Først av alt - fantastiske sider! Hadde aldri trodd jeg skulle skjønne noe som helst av HTML ol, men nå er jeg hekta...

Overskriftene på menylinjen på min kommende hjemmeside står i en tabellrad. Når jeg legger til bakgrunnsfarge blir jo denne heldekkende, men jeg ønsker at fargen skal gradvis bli svakere oppover i raden. Har du noen tips til hvor jeg kan finne en kode for dette?

Beate

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Gradient bakgrunn på navigasjonsmeny

Hei, hvis du skal ha en «gradient» overgang, kan du bruke et bilde. Ved å definere bakgrunnsfarger i CSS får du kun heldekkende.

#menu {
  background: transparent url('./bilder/gradient.png') repeat-x;
}

Her angir man først fargen, i dette tilfellet gjennomsiktig (transparent), deretter plasseringen til det gradiente bildet, og så repeat-x. Sistnevnte repeterer gradiente langs x-aksen.

Det gradiente bildet trenger ikke være mer enn 1 px (piksel) bred, siden den vil repeteres. Høyden på bildet må imidlertid være så langt som man ønsker at gradienten skal gå.

Semantisk korrekt kode

Jeg vil gjerne komme med et tillegg, og det er at en navigasjonsmeny er å anse som ei liste. Jeg ville derfor brukt noe annet enn tabell for å angi linkene.

Tabeller bør brukes til det de er ment for, nemlig tabelldata. For å sette opp en navigasjonsmeny, så ville jeg gjort noe i denne duren.

HTML for navigasjonsmeny

<div id="meny-wrapper">
   <h2 id="meny-title">Meny</h2>
   <ul id="meny">
    <li><a href="#" title="Link 1">Link 1</a></li>
    <li><a href="#" title="Link 2">Link 2</a></li>
    <li><a href="#" title="Link 3">Link 3</a></li>
   </ul>
</div>

Her har jeg satt opp en navigasjonsmeny med en header, samt tre linker i ei uordnet liste. Du kan så style listen og headeren ved hjelp av CSS, feks slik.

CSS for navigasjonsmeny

div#meny-wrapper {
  background: transparent url('./bilder/gradient.png') repeat-x;
}

h2#meny-title {
  font-size: 1.2em;
  color: #424242;
}

ul#meny {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul#meny li {
  padding: 0;
  margin: 0;
}

Her legger jeg inn gradientbildet i bakgrunnen på divisjonen som omslutter overskrift og listen med linker. På denne måten kan du få gradient bakgrunn også bak listen med linker og overskriften. Alternativt kunne du brukt gradient bakgrunnsbilde på den uordnede listen.

Det er også mulighet for å style menyoverskriften som du selv vil, ved å bruke en id på den.

Videre sørger jeg for at listeelementene ikke har bullets (uordnede lister har vanligvis bullets). I tillegg fjerner jeg marginer og padding.

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.