CSS-formaterede HTML-lister som menuer

Webdesign 101 kvikfix: Flad navigationsbjælke

Retur til artiklen om CSS-formaterede menuer.

Målsat med pixelværdier

Navigationsbjælken tegnes ens i følgende browsere:
IE5, IE5.5, IE6, IE7, Mozilla 1.0, Opera 8, Firefox 1.0.4, Firefox 1.5 og Netscape 7.

OBS!erver! at IE-specifikke formdeklarationer er indsat ved hjælp af Microsoft betingede kommentarer (grøn tekst). Flere af de såkaldte CSS-hacks, jeg hidtil har anvendt, invalideres af Internet Explorer version 7.

Stylesheet

<style type="text/css" media="screen">
ul.navbar { 
  font-family:arial,sans-serif; 
  font-size:14px; /* em'er eller procenter er bedre, hvis
                  variabel højde kan tolereres */
  line-height:100%;
  height:22px;   /* Summen af font-size, padding og border på a-markøren  */
  padding:0;  
  margin:0 0 0.5em 0; 
  list-style:none; 
  text-align:center; 
  border-left:1px solid black;}

ul.navbar li a { 
  /* width: 5em; Width *skal* med, når der floates - står der i reglerne */
  /* Tegner dog ok i Mozilla, Firefox, Netscape 7, Opera, IE 6 og IE 5. Safari?*/
  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:visited { background-color:#eeeeee; }
ul.navbar li a:hover {color:#fff;background-color:#1a0080; }
.cl {clear:left;} /* Pga. float skal første element efter menuen clear'es */
</style>
<!--[if IE]>
<style type="text/css" media="screen">
ul.navbar li {display:inline;}
</style>
<![endif]-->

Denne artikel er senest opdateret 30. sep. 2006.