Webdesign 101 Demoside

Forsiden
» Navigation
» CSS menuer
» Grundlæggende /10

Formatering af listemenuen

Navigationsbjælke med float

To elementer, der begge er foraynet med float-egenskaben, vil stille sig ved siden af hinanden, hvis der er plads til det i det overordnede element. Giver vi derfor vore listepunkter både display:inline og float:left egenskaberne, vil de stille sig pænt på række, og i øvrigt uden den venstre margin, som linieskiftet i kildekoden har givet li-elementerne i mine tidligere eksempler.

Stylesheet'et til ovenstående udformning af navigationsbjælken er:

ul.navbar { 
  font-family:arial,sans-serif; 
  font-size:14px;
  line-height:100%;
  height:22px;
  padding:0  0 0 16px; 
  margin:0 0 0.5em 0;
  list-style:none; 
  text-align:center; }

* html ul.navbar {width:100%;} 

ul.navbar li {
  display:inline; }
  
ul.navbar li a { 
  width: 5em; 
  float:left; 
  margin:0; 
  padding:3px 5px;
  border-width:1px 1px 1px 0; 
  border-style:solid;
  border-color: #257; 
  color:#1a0080; 
  background:#fff;
  text-decoration:none; }
  
ul.navbar li a#link1  {
  border-left:1px solid #257;}
  
ul.navbar li a:visited { 
  background-color:#ddd; }
ul.navbar li a:hover {
  color:#fff;
  background-color:#1a0080; }
.cl {clear:left;}

Ang. skriftstørrelse:: em'er eller procenter er bedre, hvis variabel højde kan tolereres.
Ang. height:: height:22px; er summen af font-size, padding og border på a-markøren
Ang. width:: Af hensyn til Internet Explorer er vi nødt til at at sætte en eksplicit bredde på ul-elementet. Denne formregelblok læses kun af Internet Explorer. Læs på websiden om hacks om dette.
Ang. clear:left:: Det element, der i kildekoden følger umiddelabrt efter navigationsbjælken, skal forsynes med en clear-egenskab, ellers flyder det op på højre side af navigationsbjælkens menupunkter. (Medmindre der ikke er plads til det).

li-elementets bredde

For så vidt angår width på li-elementet – eller rettere på a-markøren – siger W3C standarden at et float'et element skal have en eksplicit bredde.

Det har den konsekvens, at alle menupunkter bliver lige brede.

Hvis det ikke er acceptabelt, har du to muligheder:

Undlad at sætte en eksplicit bredde. Alle de browsere, jeg har kunnet teste det her i, viser navigationsbjælken korrekt, også uden at jeg har sat nogen eksplicit bredde.
Giv hvert link en id, og sæt en passende bredde for hvert menupunkt.