Webdesign 101 » CSS » Formatering af HTML-lister

Lister som logiske stier

Endnu en listetype, jeg ofte støder på, er det, jeg kalder "den logiske sti" - breadcrumbs på engelsk. Det er den linie over overskriften f.eks. på den side, der viser, hvilke links i hierarkiet af sider, der skal klikkes på, for at komme frem til den aktuelle side.

Eksempel 15:

En almindelig uordnet liste, der skal gengive den serie af links, der står foroven på denne side, vil uden formatering se således ud:

Med med den viden, vi har fra de foregående eksempler, er det ret let at formatere denne liste til én linie:

Det stylesheet, der formaterer den logiske sti, ser således ud:

#sti {
  background-color:#ffe;
  padding:3px;
  margin-bottom:25px;
  margin-left:15px;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold;
}
#sti ul  {
  margin-left:0;
  padding-left:0;
  display:inline;
  border:none;
}
#sti ul li {
  margin-left:0;
  padding-left:2px;
  border:none;
  list-style:none;
  display:inline;
}

.. . mens HTML-koden ser således ud:

<div id="sti">
<ul>
  <li><a href="../index.php">Forsiden</a>
    <ul>
      <li><big>&#187;</big> <a href="index.php">CSS (Stylesheets)</a>
        <ul>
          <li><big>&#187;</big> <a href="tekstformatering.php">
             Tekstformatering</a>
            <ul>
              <li><big>&#187;</big> CSS formatering af lister</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>

Her har jeg indsat et andet tegn end dobbeltkrydset, som jeg brugte i eksempel 8. Det burde være muligt at indsætte en grafik som listepunkt ved at bruge list-style-image-egenskaben. Men det har jeg (endnu?) ikke kunnet få til at virke sammen med display:inline-attributten. Derimod kan jeg indsætte grafikken i listen, i lighed med metoden, vi anvendte for at indsætte et HTML-tegn i eksempel 8:

Visuelt er de to stier - den "rigtige" øverst på siden og eksemplerne i artiklen - fuldstændig identiske. Men strukturelt set er der en kæmpeforskel, fordi HTML-opmærkningen af stien i eksemplet er et klart signal om de enkelte links' placering i hierarkiet af websider.

Senest opdateret: 9. nov. 2002.