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.
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>»</big> <a href="index.php">CSS (Stylesheets)</a>
<ul>
<li><big>»</big> <a href="tekstformatering.php">
Tekstformatering</a>
<ul>
<li><big>»</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:
CSS (Stylesheets)
Tekstformatering
CSS formatering af listerVisuelt 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.
