Hallo zusammen,
ich würder gerne meine Navigation mit einer Liste erstellen und mit CSS formatieren.
Hab aber noch nicht soviel mit CSS gemacht will aber nicht mehr mit Tabellen an das Problem ran.
so sollte das dann mal ausschauen
Hier mein Code, CSS kommt später noch in extra Datei:
Code:
<!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" xml:lang="de">
<head>
<style type="text/css">
li.off1 {
list-style-position: inside;
width: 200px;
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #e1819c;
font-family: Verdana, Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 8pt;
list-style-image: url(MainNavDot800000.jpg);
background-color: #800000;
}
li.on1 {
list-style-position: inside;
width: 200px;
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #e1819c;
font-family: Verdana, Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 8pt;
list-style-image: url(MainNavDotBA0033.jpg);
background-color: #BA0033;
}
li.off2 {
list-style-position: inside;
width: 100%;
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #e1819c;
font-family: Verdana, Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 8pt;
list-style-type: none;
background-color: #800000;
}
li.on2 {
list-style-position: inside;
width: 100%;
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #e1819c;
font-family: Verdana, Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 8pt;
list-style-type: none;
background-color: #BA0033;
}
</style>
</head>
<body bgcolor="#800000">
<ul>
<li class="off1">Startseite</li>
<li class="off1">Aktuelles</li>
<li class="on1">Verein</li>
<ul>
<li class="on2">A-Jugend</li>
<li class="off2">AH-Manschaft</li>
</ul>
<li class="off1">Tabelle</li>
<li class="off1">Kontakt</li>
<li class="off1"><a href="nav.htm">Impressum</a></li>
</ul>
</body>
</html>
Ist das überhaupt möglich?
Was mach ich falsch?
Was sollte man beachten um in den verschiedenen Browsern ein gleiches Resultat zu erhalten?
Bis jetzt schauts im IE noch schlimmer aus als im Firefox.
Ich hoffe Ihr habt ein paar Tipps für mich.
Danke
Stephan