CSS-formaterede HTML-lister som menuer

Webdesign 101 kvikfix: 100 procent bred navigationsbjælke

Retur til artiklen om CSS-formaterede menuer.

Menuen 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">
#menucontainer {
  background:#225577;
  padding-left: 20px;
  height:1.2em;  } /* Højde nødvendig, baggrunden skal have farve 
                      højde = font-size + 2 gange padding på a */
                   
  
#menucontainer ul { 
  font-size:80%; 
  font-weight:bold;
  line-height:100%;
  margin:0;
  padding:0;
  background-color: #225577;
  color: White;
  float: left;
  width: 100%;
  font-family: arial, helvetica, sans-serif;
  border-left:1px solid white; }

#menucontainer ul li { 
  display: inline;  }

#menucontainer ul li a {
  padding: 0.2em 1em;
  background-color: #257;
  color: #ffffff;
  text-decoration: none;
  float: left;
  border-right: 1px solid #fff; }

#menucontainer ul li a:visited {
 color:#dddddd;}

#menucontainer ul li a:hover {
  background-color: #ccf;
  color: #1a0080;}

span.clear {clear:left;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
ul.navbar li {display:inline;}
</style>
<![endif]-->


Denne artikel er senest opdateret 30. september 2006.