• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontales Menü

T

tilda

Neues Mitglied
Hallo Zusammen,
ich möchte gerne bei einem horizontalen Menü zwischen normaler Schrift und bei hover und active auf bold wechseln, ohne das es dieses leichte Verwackeln gibt, und je nach Wortlänge das Menü in die nächste Zeile kippt.
Das Menü geht über die gesamte Breite und schließt rechts und links bündig ab.

Gibt es da einen Trick, oder macht es dann Sinn, die Schrift als Grafik einzubauen?

Beste Grüße
Tilda
 
tilda schrieb:
Hallo Zusammen,
ich möchte gerne bei einem horizontalen Menü zwischen normaler Schrift und bei hover und active auf bold wechseln, ohne das es dieses leichte Verwackeln gibt, und je nach Wortlänge das Menü in die nächste Zeile kippt.
Das Menü geht über die gesamte Breite und schließt rechts und links bündig ab.

Gibt es da einen Trick, oder macht es dann Sinn, die Schrift als Grafik einzubauen?

Beste Grüße
Tilda
Zum Vergrößern anklicken....

Nein, das geht nicht soweit ich weiß.
Das sind eben die Probleme die auftreten, wenn jemand ein Design erstellt, der keine Ahnung von der Materie hat.

Du könntest es mit einer monospaced Schrift versuchen, aber diese wird wohl vom Schriftbild nicht passen.
Mit Bildern zu arbeiten, ist die einzige Möglichkeit um ein exaktes Ergebnis zu erreichen. Allerdings ist das Webprogrammierung auf Steinzeit-Niveau.
Musst du also selbst wissen ob du das machen willst.

Ein weiterer Versuch wäre ein kleiner Trick mit text-shadow, wird der Vorlage allerdings nicht so Nahe kommen:
http://jsfiddle.net/1ch32uxf/1/
 
Schrift nie als Grafik - Grundregel Nr. 1... das sind Uralttricks aus den 90erm

Du konntest den einzelnen Menüpunkten (Listenpunkte?) eine feste Breite und Höhe mit overflow: hidden geben, das macht aber nur Sinn, wenn jeder einzelne Menüpunkt die gleiche Breite hat. Wenn die Breiten flexibel sind, hast Du eben genau das Problem, da gibts dann eben ein Verruckeln, wenn sich die Schrifteigenschaften ändern.
 
Vielen Dank für die schnelle Hilfe, ich habe nun die Lösung mit der unscharfen Schrift gewählt. Die Grafikerin ist zufrieden.
Ich hätte lieber eine andere Farbe genommen. Die Grafiklösung finde ich ebenfalls untragbar.

Herzlichen Dank und beste Grüße
Tilda
 
Hier noch eine Alternative.
HTML: 
<!doctype html>
<html>
<head><title>Bold Hover</title>
<style>
* {
margin:0;
padding:0;
}
UL#navigation , UL#navigation LI {
list-style:none;
}
UL#navigation LI {
float:left;
margin-right:1px;
position:relative;
}
UL#navigation LI A {
background-color:#444;
color:#fff;
text-decoration:none;
padding:10px;
text-align:center;
display:block;
}
UL#navigation LI A:hover:before {
content:attr(title);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
font-weight:bold;
background:#444;
padding-top:9px;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a title="Startseite" href="indes.htm">Startseite</a></li>
<li><a title="Impressum" href="impressum.htm">Impressum</a></li>
<li><a title="Kontakt" href="kontakt.htm">Kontakt</a></li>
</ul>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben