Navigation die bei Hover fett wird

[tantebootsy]

Hi,

ich habe hier eine Navi, die beim Hovern fett werden soll.
Gebe ich keine feste Breite an wackelt permanent die komplette Navi beim Hovern - klar.
Da ich dem li oder dem a keine feste Breite zuweisen kann habe ich divs drum herum gebaut und denen eine feste Breite zugewiesen.

Mit einer festen Breite habe ich allerdings das Problem, dass wenn unterschiedlich lange Wörter vorkommen, die Abstände zwischen den einzelnen Punkten unterschiedlich groß sind.
Hat einer von euch da eine Idee, so eine Navi anders anzulegen?

Gruß,
Micha

 

[Maik]

Und warum kannst du für ein (überflüssiges) DIV eine Breite bestimmen, für die Links aber nicht?

 

[Gumbo]

Und warum kannst du für ein (überflüssiges) DIV eine Breite bestimmen, für die Links aber nicht?

Die Antwort müsstest du dir eigentlich selbst geben können: Weil das a-Element kein Block-Level-Element ist und auch nicht als solches dargestellt wird.

Mein Vorschlag:

#hauptnavi ul {
	list-style: none;
}
#hauptnavi ul li {
	float: left;
}
#hauptnavi ul li a:link,
#hauptnavi ul li a:visited {
	float: left;
	display: block;
	width: 10em;
	text-align: center;
}
#hauptnavi ul li a:link:hover,
#hauptnavi ul li a:visited:hover {
	font-weight: bolder;
}

Dazu gibt’s gleich noch eine Vermutung: Im Internet Explorer wird das sowieso nicht funktionieren.

 

[Maik]

So war meine Frage überhaupt nicht gemeint, Gumbo.

Vielmehr wollte ich darauf hinaus, daß die Breitenangabe ebenso (unter Berücksichtigung der erforderlichen Block-Level-Charakteristika) auf die Links angewendet werden kann, siehe auch meine Anmerkung zu dem überflüssigen DIV.

 

[tantebootsy]

Hm, irgendwo hatte ich da dann wohl schlichtweg das display:block vergessen in den Links oder Listenpunkten... Habt recht, brauche die div's gar nicht.

Das Problem mit den Wortabständen ist damit zwar leider nicht gelöst (hatte gehofft, ihr habe da noch nen Trick auf Lager ), aber ich glaube ich muss einfach in Zukunft auf fett als hover- oder aktiv-Hervorhebung verzichten. Schade eigentlich *schnüff*.

Micha

 

[Gumbo]

Wenn du statt einer fixen Breite lediglich eine Polsterung angibst, ist dieser Effekt zu erzielen. Dadruch „springen“ die Links allerdings aufgrund der unterschiedlichen Schriftstärken.

Übrigens kommt es auf die Media-Typ-Angabe im Antwort-Header an und nicht auf die eines meta-Elements. Demnach wird dein Dokument als stinknormales HTML behandelt, wobei der Internet Explorer durch die XML-Deklaration auch noch in den Quirks-Modus wechselt.

 

[tantebootsy]

Wenn du statt einer fixen Breite lediglich eine Polsterung angibst, ist dieser Effekt zu erzielen. Dadruch „springen“ die Links allerdings aufgrund der unterschiedlichen Schriftstärken.

Ja, das hatte ich anfangs probiert, das sieht miste aus.

Übrigens kommt es auf die Media-Typ-Angabe im Antwort-Header an und nicht auf die eines meta-Elements.

Hm, du meinst also, um XHTML ganz korrekt, also wirklich als XHTML zu senden müsste ich erst mal einen PHP-Header vorschalten mit folgendem Inhalt:

Content-Type: application/xhtml+xml; charset=utf-8

?

Hm, das würde natürlich auch erklären, warum ich nie Umlaute verwenden konnte, obwohl utf-8 diese ja unterstützt ...

Demnach wird dein Dokument als stinknormales HTML behandelt, wobei der Internet Explorer durch die XML-Deklaration auch noch in den Quirks-Modus wechselt.

Das mit dem Quirks-Mode war ich mir bewusst.
Micha

 

[Gumbo]

Hm, du meinst also, um XHTML ganz korrekt, also wirklich als XHTML zu senden müsste ich erst mal einen PHP-Header vorschalten mit folgendem Inhalt: […]

Genau das meinte ich. Schön dass du das erkannt hast. Damit bekommen wir allerdings ein neues Problem: der Internet Explorer unterstützt kein als „application/xhtml+xml“ klassifiziertes XHTML.

 

[tantebootsy]

Ja, hab's schon gelesen, er öffnet dann anscheinend einen Download-Dialog, der Mistkerl ... Also werde ich wohl in Zukunft meine Doks so senden: XHTML und der richtige MIME-Typ.

Ich hatte den Artikel von Ian Hickson schon mal gelesen und dachte, es reiche die Meta-Angabe im Dokument selbst ...

Danke also für den Hinweis, ne?!

MIcha

 

[Gumbo]

Du könntest auch ganz einfach auf HTML umsteigen, damit hast du diese Bedenken erst gar nicht.