CSS-formaterede HTML-lister som menuer

Webdesign 101 kvikfix: Fladt menupanel

Retur til artiklen om CSS-formaterede menuer.

Menuens bredde er 200 pixel 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.cssmenu {
  list-style:none; /* Fjerner listepunktsmarkørerne */
  border-width:0 1px 1px 1px; /* Laver en kasse rundt om menuen */
  border-style: solid;
  border-color: #257;
  background:#fff;
  width:198px; /* Menuens bredde = width+2*border.*/
  margin: 1em 0;/* top og bund, venstre og højre */
  padding:0;/* Vigtigt at få denne med */}

ul.cssmenu li a {
  font-size:0.9em; /* px eller % går også an */
  color:#1a0080;
  background-color:#fff;
  display:block; /* Gør a-markøren til et blokelement. */
  text-decoration:none;/* Fjerner understregning */
  margin:0;  /* Vigtigt at få denne med */
  padding:3px 5px; /* Laver luften mellem teksten og border - 
                      top og bund, venstre og højre */
  border-top:1px solid #257;}
  

ul.cssmenu li a:visited {  background-color:#eee;}/* Besøgt link, grå baggrund */

ul.cssmenu li a:hover { /* Mouseover egenskaben. Farverne inverteres */
  color:#fff;
  background-color:#1a0080;}
  
ul.cssmenu li a:active {
/* IE tolker denne forkert, derfor gi'r 
jeg den samme farve som et normalt link.*/
  color:#1a0080;}
</style>


<!--[if lt IE 7]>
<style type="text/css" media="screen">
ul.cssmenu li a {width:188px;}
ul.menu li {display:inline; }
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css" media="screen">
ul.cssmenu li a {width:198px;}
ul.cssmenu li {display:inline; }
</style>
<![endif]-->

Denne artikel er senest opdateret 30. sep. 2006.