nicht angemeldet
Hallo,
vor einiger Zeit hatte ich mit euch gemeinsam schon einmal einige Möglichkeien zur Formatierung von Listen als "Navbar" diskutiert.
Mit eurer Hilfe bin ich damals auch zu einer Lösung gekommen!
Nun, in einem neuen Webprojekt, bin ich auf ein ähnliches Problem gestossen, dass ich aber aufgrund andere Vorstellungen der Darstellung der Navigationsleiste noch nicht lösen konnte.
Ich benötige eine vertikale Liste von Buttons zur Navigation. Als Vorlage dient dient mir die exemplarische Umsetzung von http://css.maxdesign.com.au/listamatic/vertical13.htm.
Was mir an der Umsetzung nicht gefällt, dass hatte ich damals in dem Thread hier gelernt, ist, dass der aktive Link mit "<li id="active">" gekennzeichnet wird. Lieber würde ich diese Angabe weglassen und die Darstellung über geeignetes Selektieren der Elemente erreichen.
Ich bin aber leider noch nicht auf die richtige Lösung gestossen.
Wie kann ich denn (sozusagen) den Text in dem <li> ohne eingebettetes <a> formatieren, hier müsste ja z. B. ein Innenabstand angegeben werden!
Viele Grüße
Daniel
P.S.:
Der Quelltext zu dem Beispiel sieht wie folgt aus (im Original):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="top">
<head>
<title>Layout-Beispiele :: Navigation :: vertikale Buttons</title>
<link rel="stylesheet" type="text/css" href="ressources/screen.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#navcontainer {
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}
ul#navlist {
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}
ul#navlist li {
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}
#navcontainer>ul#navlist li a {
width: auto;
}
ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
</style>
</head>
<body>
<h1>Navigation :: vertikale Buttons</h1>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>