Hüpfendes Menu, Fett - Schmal - Fett - Schmal Einstellungen

[Andreas]

Hi,

bei der Bastelei an http://web209.can12.de/spa30/home.php bin ich nun an einem weiteren Problem angelangt. Das Menu oben "springt". Warum ist mir klar, die Links werden durch die gehoverte Fettschrift breiter. Mit folgendem Code kann ich das Ganze auch beruhigen, aber es ist nicht so, wie ich mir die Geschichte vorstelle. Schöner wäre, wenn der Abstand zwischen den Links fix wäre.

Hat jemand dafür schon mal 'ne Lösung gebastelt? Alles was mir einfällt, klappt immer nur mit festen Höhen oder wahlweise Breitenangaben :-/

HTML

/* Hier kommt der Code für das Menu oben */
#menu_oben ul {
text-align: center;
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 5px 0px 5px 0px;
}

#menu_oben li
{
display: inline;
width: 85px;
text-align: center;
margin: 0px 5px 0px 5px;
}

#menu_oben li a
{
padding: 1px 0px 1px 5px;
color: #ffffff;
text-decoration: none;
border-left: 2px solid #ffffff;
}

#menu_oben li a:hover
{
font-weight: bold;
color: #ffffff;
font-size: 90%
}

#menu_oben li a#current
{
font-weight: bold;
font-size: 90%;
}

Nachtrag: die 90% habe ich eingefügt, weil ansonsten der Contentbereich beim Hovern rauf und runter springt. Ansonsten finde ich die Fettschrift als Hovereffekt gut, aber es ist immer so blöd zu basteln.

Gruß

Andreas - langsam darf's ruhig mal regnen!

[Auge]

bei der Bastelei an http://web209.can12.de/spa30/home.php bin ich nun an einem weiteren Problem angelangt. Das Menu oben "springt". Warum ist mir klar, die Links werden durch die gehoverte Fettschrift breiter. Mit folgendem Code kann ich das Ganze auch beruhigen, aber es ist nicht so, wie ich mir die Geschichte vorstelle. Schöner wäre, wenn der Abstand zwischen den Links fix wäre.

Hat jemand dafür schon mal 'ne Lösung gebastelt? Alles was mir einfällt, klappt immer nur mit festen Höhen oder wahlweise Breitenangaben

Um (zumindest) feste Breitenangaben wirst du nicht herumkommen. Allerdings müsstest diese den Links verpassen, denn nachdem du <li> zum Inlineelement gemacht hast, reagiert es nicht auf deine Breitenzuweisung. Das tut <a> allerdings auch nicht, außer man macht es mit display:block; oder mit float:...; zum Blockelement, womit eventuell benutzte Farbänderungen bei :hover, :focus, :active sich auf die gesamte angegebene Breite des Links auswirken würden.

Grundsätzlich kannst du dich mal auf Listamatic umschauen. Dort werden -zig Beispiele für die CSS-Formatierung von vertikalen als auch horizontalen Navigationslisten gezeigt.

Nachtrag: die 90% habe ich eingefügt, weil ansonsten der Contentbereich beim Hovern rauf und runter springt. Ansonsten finde ich die Fettschrift als Hovereffekt gut, aber es ist immer so blöd zu basteln.

Auch wenn du Fettschrift zum hovern "nett" findest (incl. dem damit verbundenen Herumdoktorn an den Schriftgrößen), solltest du überlegen andere "Markierungen" einzusetzen. Das Springen wird mit dem Wechsel von Normal- zu Fettschrift zwangsläufig bleiben. Da du sowieso mit einem 2px breiten border-left arbeitest, kannst du den und/oder die Hintergrund- und Schriftfarbe oder ein Hintergrundbild ändern.

Übrigens:
- Der eventuelle Versuch, z.B. mit li:hover zu arbeiten, scheitert an der ungenügenden Unterstützung von :hover durch den MSIE, der das nur auf Links anwenden kann.
- Wenn dein a#current der Link "zur" gerade geladenen Seite sein sollte, warum dann nicht auf die Auszeichnung als Link verzichten? Den braucht's doch garnicht, man (als Besucher) ist ja schon da.

Tschö, Auge