nicht angemeldet
Horizontale Navigationsleiste in drei Zeilen
0 
Gunnar Bittersmann
0 0
Horizontale Navigationsleiste in drei Zeilen
Ich versuchte per CSS eine horizontale Navigationsleiste mit gleichen Breiten in drei Zeilen zu formatieren; leider entsehen im IE unerwünschte Abstände zwischen den Zeilen.
Kann mir bitte jemand einen Tipp geben, was zu tun ist, damit auch im IE das Erscheinungsbild gleich ist? Im Voraus schonmal vielen Dank.
Hier der Quelltext der HTML-Datei inkl. CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste mit gleichen Breiten</title>
<style type="text/css">
body {
font: 13px tahoma, arial, verdana, sans-serif;
color: black; background-color: #ffffff;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: left;
background-color: #ffffff;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 0; padding: 0;
}
ul#Navigation a {
float: left; width: 90px;
text-align: center;
border: 1px solid #ffffff;
margin: 0px 5px 0px 0px; padding: 1px 5px 1px 5px;
text-decoration: none; font-weight: bold;
color: #ffffff; background-color: #3366cc;
}
* html ul#Navigation a, * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 90px;
w\idth: 90px;
}
ul#Navigation a:hover {
color: #ffffff; background-color: #333399;
}
ul#Navigation span {
float: left; width: 90px;
margin: 0px 5px 0px 0px; padding: 1px 5px 1px 5px;
text-decoration: none; font-weight: bold;
color: red; background-color: #ffffff;
}
ul#Navigation div {
clear: left;
}
</style>
</head>
<body>
<p id="#Beispiel">Horizontale Navigationsleiste mit gleichen Breiten ind drei Zeilen<br>
leider entsehen im IE unerwünschte Abstände zwischen den Zeilen.</p>
<ul id="Navigation">
<li><span>Bezichnung1</span></li>
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 5</a><div></div></li>
</ul>
<ul id="Navigation">
<li><span>Bezeichnung2</span></li>
<li><a href="#Beispiel">Seite 6</a></li>
<li><a href="#Beispiel">Seite 7</a></li>
<li><a href="#Beispiel">Seite 8</a></li>
<li><a href="#Beispiel">Seite 9</a><div></div></li>
</ul>
<ul id="Navigation">
<li><span>Bezeichnung3</span></li>
<li><a href="#Beispiel">Seite 10</a></li>
<li><a href="#Beispiel">Seite 11</a></li>
<li><a href="#Beispiel">Seite 12</a></li>
<li><a href="#Beispiel">Seite 13</a><div></div></li>
</ul>
</body>
</html>
-
@@Werner:
* html ul#Navigation a, * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 90px;
w\idth: 90px;
}Die zweite Deklaration soll welchen Zweck haben?
<ul id="Navigation">
<ul id="Navigation">
<ul id="Navigation">Dass dein Quelltext kein valides HTML ist, ist dir bewusst? IDs müssen einmalig sein.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort. -
[latex]Mae govannen![/latex]
<ul id="Navigation">
[...]
<ul id="Navigation">
[...]
<ul id="Navigation">
Du suchst Klassen, keine Ids. http://de.selfhtml.org/html/attribute/allgemeine.htm#uebersicht
Cü,
Kai
--
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:? -
was spricht gegen das hier?
btw: ist es absicht, dass die 4 fehlt? ;)<ul id="navigation"> <li><span>Bezichnung1</span> <ul> <li><a href="#Beispiel">Seite 1</a></li> <li><a href="#Beispiel">Seite 2</a></li> <li><a href="#Beispiel">Seite 3</a></li> <li><a href="#Beispiel">Seite 5</a></li> </ul> </li> <li><span>Bezeichnung2</span> <ul> <li><a href="#Beispiel">Seite 6</a></li> <li><a href="#Beispiel">Seite 7</a></li> <li><a href="#Beispiel">Seite 8</a></li> <li><a href="#Beispiel">Seite 9</a></li> </ul> </li> <li><span>Bezeichnung3</span> <ul> <li><a href="#Beispiel">Seite 10</a></li> <li><a href="#Beispiel">Seite 11</a></li> <li><a href="#Beispiel">Seite 12</a></li> <li><a href="#Beispiel">Seite 13</a></li> </ul> </li> </ul>