nicht angemeldet
Hallo,
Ich versuche gerade eine Css Navigationsleiste aufzubauen, nach dem Beispiel in SelfHtml.
Ich habe das alles auch schon soweit hinbekommen, nur möchte ich gerne das es ein wenig anders aussieht. Ich nutze Mozilla, im IE siehts (whsl durch einen bug? so aus wie ich möchte). Meine Frage ist nun wie ändere ich das Stylesheet damit das so funktioniert?
meine Vorstellung:
|blabla|
|blabla|
|blabla|
|unterblabla|
|unterblabla|
|blabla|
aber so siehts im Mozilla aus
|blabla |
|blabla |
|blabla |
|unterblabla|
|unterblabla|
|blabla |
Unten zu finden das Stylesheet und das Html.
Ich freue mich über eure Hilfe!
B-ellanna
body { background-image:url(./bilder/parchmentbackground.gif);
font-family: "Times New Roman", Times, Arial;
text-decoration: none;
font-size: 100.01%;
margin: 0; padding: 1em 0;
text-align: center
}
div#Seite { text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 90%;
padding: 0;
background: #FFE6BF url(hintergrund.gif) repeat-y;
border: 2px ridge silver;
}
html>body div#Seite {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
h1 { font-size: 3em;
color: #B36B00;
margin: 0; padding: 0.3em;
text-align: left;
background: #FFCC80 url(./bilder/header.gif) no-repeat 100% 45%;
border-bottom: 1px solid silver;
}
ul#Navigation { font-size: 1.0em;
float: left;
width: 10em;
margin: 0; padding: 0.0em;
border: none;
background-color: #FFE6BF;
text-align: center;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width:8.8em;
w\idth: 8em;
padding-left: 0;
padd\ing-left: 0.1em;
}
ul#Navigation li {
list-style: none;
margin: 0.1em; padding: 0;
}
ul#Navigation li ul {
list-style: none;
margin: 0 0 0 1em; padding: 0;
}
ul#Navigation li ul li {
margin: 0.1em 0;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #B36B00; background-color: #FFE6BF;
}
* html ul#Navigation a { /* Breitenangaben nur fuer IE */
width: 100%;
w\idth: 8em;
}
ul#Navigation a:link {
color: #B36B00; background-color: #FFE6BF;
}
ul#Navigation a:visited {
color: #B36B00; background-color: #FFE6BF;
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: #ffcc99; background-color: #cc9900;
}
ul#Navigation a:active {
color: #B36B00; background-color: #FFE6BF;
}
div#Inhalt {
margin: 0 0 1em 10em;
padding: 0 1em;
text-align: justify;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
margin-bottom: 0;
}
div#Inhalt h2 {
font-size: 1.5em;
margin: 0.2em 0;
color: black;
}
div#Inhalt h3 {
font-size: 1.25em;
margin: 0.2em 0;
color: black;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.8em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #FFCC80;
border-top: 1px solid silver;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>Mus Rusticus</title>
<meta name="description" content="Startseite">
<meta name="author" content="Christina Stacke">
<meta name="keywords" content="Mittelalter Schaukampf Mus Rusticus Schwert Belagerung Auftritt Markt Mittelaltermarkt">
<meta name="generator" content="(X)HTML-Format">
</head>
<body>
<div id="Seite">
<h1>Oberüberschrift</h1>
<ul id="Navigation">
<li><a href="Termine.htm">Termine</a></li>
<li><a href="Angebot.htm">Angebot</a></li>
<li><a href="Gefolge.htm">Gefolge</a></li>
<li><a href="Bilder.htm">Bilder</a></li>
<ul>
<li><a href="./Bilder/Brandenburg04/Brandenburg04.htm">Brandenburg 2004</a></li>
<li><a href="./Bilder/Eisenach05/Eisenach05.htm">Eisenach 2005</a></li>
<li><a href="./Bilder/Herzberg04/Herzberg04.htm">Herzberg 2004</a></li>
<li><a href="./Bilder/Kindergarten05/Kindergarten05.htm">Kindergarten 2005</a></li>
<li><a href="./Bilder/Siloah04/Siloah04.htm">Siloah 2004</a></li>
<li><a href="./Bilder/Siloah05/Siloah05.htm">Siloah 2005</a></li>
<li><a href="./Bilder/Wittgensdorf04/Wittgensdorf04.htm">Wittgensdorf 2004</a></li>
</ul>
<li><a href="Links.htm">Links</a></li>
<li><a href="Intern.htm">Intern</a></li>
<li><a href="KontaktImpressum.htm">Kontakt & Impressum</a></li>
</ul>
<div id="Inhalt">
<h2>Bilder</h2>
<h3>Kleine Überschrift</h3>
Das ist nur normaler Text.
</div>
<p id="Fusszeile">
© 2006 Christina Stacke
</p>
</div>
</body>
</html>