Formatering af listemenuen

Knappanel

I denne udformning viser jeg, hvorledes ud, igen kun ved hjælp af stylesheet, kan formatere din liste af links som et decideret knappanel.

Stylesheet'et til nedenstående udformning af menuen er:

.menu4 {
  padding: 1px; 
  margin: 0;
  border-width: 2px;
  border-style: solid; 
  border-color: #aaa #fff #fff #aaa;
  background: #ccc; 
  width: 15em;}
.menu4 li {
  list-style: none; 
  margin: 0; 
  padding: 0.25em 1em;
  border-width: 1px;
  border-style: solid; 
  border-color: #fff #aaa #aaa #fff;
  text-align: center;}
.menu4 li a {
  text-decoration: none;}
.menu4 li a:link {
  color: black;}
.menu4 li a:visited {
  color: gray;}

Præsenteret på websiden ser denne menu således ud:

Bemærkninger til stylesheet'et

Hele magien skyldes brug af et par forskellige grå farver til baggrund og rammekanter. Bemærk kortformsudgaven af farvekoden: Når en farve hexkodes farvekodegrupper hver består af 2 ens hexcifre, kan du nøjes med at bruge ét hexciffer for hver farve. Farven #aaaaaa bliver således til #aaa og en støvet mørk blå #225577 bliver til #257.

Bemærk også kortformsudgaven af f.eks. border-color: Alle fire kanter nævnes på én gang, og altid i samme orden: top, højre, bund, venstre.

Webdesign - illustreret håndbog
Webdesign med XHTML
– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S