nicht angemeldet
Navigation mit ul und zu breite Anzeige der Texte im Firefox
Moin,
bei der folgenden kleinen Seite handelt es sich um einen Versuch eine Website ohne Frames und Javascript zu bauen, deren Navigationsbereich und Inhalt durch Hintergrundfarbe optisch getrennt sind und deren Navigationsbuttons eine kleine Grafik links vom Text haben, die sich beim Überfahren mit der Maus ändert (hover-Effekt).
Nach einigen Versuchen habe ich dann einen Lösung gefunden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
td#Navigation { background-color: silver;
border: 1px solid black;
margin: 0; padding: 10pt 10pt;
text-align: left; }
ul.Menue { font-size: 15pt;
border: 1px solid green;
margin: 10px 0; padding: 3px 0; }
ul.Menue li { border: 1px solid blue; list-style: none;
margin: 0; padding: 6px 0px; }
li.MenuItem a { color: black;
padding: 6px 0px 6px 32px;
background: url(Test1.gif) no-repeat; }
li.MenuItem a:hover { background: url(Test2.gif) no-repeat; }
</style>
</head><body>
<table width="100%"><tbody><tr><td id="Navigation">
<ul class="Menue">
<li class="MenuItem"><a href="Thema1.htm">Thema 1</a></li>
<li class="MenuItem"><a href="Thema2.htm">Thema 2</a></li>
</ul>
</td><td>
Lorem ipsum dolor ...
</td></tbody></table>
</body> </html>
Test1.gif und Test2.gif sind zwei beliebige verschiedene 32x32 Pixel-Grafiken.
Zu sehen gibt es das Ganze zur Zeit unter http://www.feuerwehr-holtsee.de/Test/Test.html.
Unter Opera 8.5 und IE6 ist alles prima, also wie erwartet. Nur im Firefox (1.0.7) ragen die Navigationseinträge in den Inhaltsbereich.
Ersetze ich die Tabelle und die beiden Spalten durch ein ul und ein div, wobei die ul#Navigation den Style float:left bekommt, dann stimmt die Breite der Navigation auch im FF. Mich stört aber an dieser Lösung, dass man die Breite der Navigation explizit angeben muss.
Hat jemand einen Tipp, wie ich das anders (richtig) machen kann? Oder muss ich einfach auf die FF-Version warten, die es richtig macht?
Claus
-
Hallo Claus,
hilfts Dir, dass Du die Breite auch relativ in em angeben kannst?
Gruß,
Frankx
-
Hallo Frankx
Hallo Claus,
hilfts Dir, dass Du die Breite auch relativ in em angeben kannst?
Nein, denn die Breite des Bereichs ist ja von den Texten in der Navigation abhängig. Ich nehme mal an, dass du auf "Nimm div und ul" abhebst. Dort nützt mir em noch weniger, da die farbliche Trennung über eine Hintergrundgrafik erfolgt, die nun mal Pixel verwendet (siehe auch http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund).
Claus
-
Hallo Claus,
Nein, denn die Breite des Bereichs ist ja von den Texten in der Navigation abhängig. Ich nehme mal an, dass du auf "Nimm div und ul" abhebst.
Nein, ich garnichts abheben. Ich hattes nicht verstanden, denn eine Breitenangabe brauchst Du doch mithin sowieso, warum stört sie dich? Das hatte ich nicht kapiert und immer noch nicht so richtig...;
Gruß, Frankx
-
Hallo Frankx,
[...] eine Breitenangabe brauchst Du doch mithin sowieso, warum stört sie dich? Das hatte ich nicht kapiert und immer noch nicht so richtig...;
Ich brauche keine Breitenangabe, wie du an diesem Beispiel siehst. Ich gebe lediglich äußere und innere Randabstände (margin, padding) an. Die linke Spalte nimmt sich dann automatisch die Größe, die sie braucht. (Sollte sie zumindest.) Durch Angabe der Spaltenbreite (Stichwort <colgroup>) von 100% für die rechte Spalte (Inhalt), erhält man dann eine Navigationsleiste die nicht breiter als unbedingt nötig ist. (Ich habe diese Angabe hier allerdings nicht gemacht, da der "Lorem ipsum"-Text breit genug ist um eine möglichst schmale Navigation zu erreichen.)
Claus
-
-
Hi,
Nein, denn die Breite des Bereichs ist ja von den Texten in der Navigation abhängig. Ich nehme mal an, dass du auf "Nimm div und ul" abhebst. Dort nützt mir em noch weniger, da die farbliche Trennung über eine Hintergrundgrafik erfolgt, die nun mal Pixel verwendet (siehe auch http://de.selfhtml.org/css/layouts/mehrspaltige.htm#hintergrund).
mich wundert, daß Du dieses Beispiel angibst, aber die Tips auf dieser Seite nicht beachtet hast.
Dein Problem ist die Tabellenzeile. Eine gefloatetes ul würde sich die erforderliche Breite nehmen. Der Tabellenzelle müßtest Du sie zuweisen, z.B. über td#Navigation { width:8em; }.
freundliche Grüße
Ingo-
Hi Ingo,
Dein Problem ist die Tabellenzeile. Eine gefloatetes ul würde sich die erforderliche Breite nehmen. Der Tabellenzelle müßtest Du sie zuweisen, z.B. über td#Navigation { width:8em; }.
Ich verwende normalerweise in der Tabelle <colgroup><col><col width="100%"></colgroup>. (Habe ich bei der Vereinfachung meines Beispiels weggelassen.) Dadurch soll sich die linke Spalte soviel Platz nehmen, wie sie braucht, und die rechte Spalte den Rest. Aber auch ohne Angabe der Spaltenbreite sollte sich die Tabelle für die linke Spalte die Breite nehmen, die sie mindestens braucht. Der Text auf der rechten Seite hat ja nichts dagegen, oder? Es funktioniert ja auch im IE6 und in Opera. Deutet die Border um ul.Menue li, die hier mitten durch den Text läuft, nicht auf einen Fehler im FF hin?
Claus
-
Hi,
Aber auch ohne Angabe der Spaltenbreite sollte sich die Tabelle für die linke Spalte die Breite nehmen, die sie mindestens braucht. Der Text auf der rechten Seite hat ja nichts dagegen, oder? Es funktioniert ja auch im IE6 und in Opera. Deutet die Border um ul.Menue li, die hier mitten durch den Text läuft, nicht auf einen Fehler im FF hin?
das will ich nicht ausschließen. Ist aber auch eine komplexe Aufgabe, das zu rendern. Eine Liste in einer Tabellenzelle und hierin inline-Elemente mit padding. Das Problem verursacht letzteres. Wenn Du a {display:block} definierst, nimmt sich das Element den Platz und nicht nur die li.
freundliche Grüße
Ingo-
Hallo Ingo,
Aber auch ohne Angabe der Spaltenbreite sollte sich die Tabelle für die linke Spalte die Breite nehmen, die sie mindestens braucht. Der Text auf der rechten Seite hat ja nichts dagegen, oder? Es funktioniert ja auch im IE6 und in Opera. Deutet die Border um ul.Menue li, die hier mitten durch den Text läuft, nicht auf einen Fehler im FF hin?
das will ich nicht ausschließen. Ist aber auch eine komplexe Aufgabe, das zu rendern. Eine Liste in einer Tabellenzelle und hierin inline-Elemente mit padding. Das Problem verursacht letzteres. Wenn Du a {display:block} definierst, nimmt sich das Element den Platz und nicht nur die li.ich danke dir, es funktioniert. Verstanden habe ich dieses display:block-Element allerdings noch nicht. Das soll jetzt aber keine Aufforderung sein, mir Nachhilfe in HTML zu geben.
Nochmals Danke
Claus-
Hallo Ingo,
ich danke dir, es funktioniert. Verstanden habe ich dieses display:block-Element allerdings noch nicht. Das soll jetzt aber keine Aufforderung sein, mir Nachhilfe in HTML zu geben.
der Frage würde ich mich anschließen, warum display:block für die Anker? Dem Nachsatz dazu von Claus natürlich auch, aber vielleicht kann ja noch jemand zwei drei Worte dazu dazuhuschen?
auchdank,
Frankx
-
Hi,
Verstanden habe ich dieses display:block-Element allerdings noch nicht.
das ist kein Element, sondern eine Eigenschaft.
a hat normalerweise die Display-Eigenschaft inline und erzeugt keine Box, der man eine Größe zuweisen könnte. Padding geht zwar, verursacht aber in diesem Fall das Problem beim Firefox.freundliche Grüße
Ingo
-
-
-
-
-
-