Google Bewertung
5.0

Basierend auf 27 Bewertungen

reDim GmbH | Webdesign, Webentwicklung & Online Marketing
5.0
27 Rezensionen
Profilbild von Thomas Wiedemann
vor einer Woche
Das kostenlose für Joomla angebotene Datenschutz Plugin Cookie Hint lässt sich schnell in eine Joomla-Webseite integrieren. Die mitgelieferten Overrides sind blitzschnell eingebaut und angepasst. Tolle Leistung.
Thomas Wiedemann
Profilbild von Gerald Schulze
vor 3 Wochen
Redim mit seinen Mitarbeitern(innen) war in der Projektentwicklung und deren Umsetzung jederzeit ansprechbar und offen für unsere Fragen und Anregungen - eine unabdingbare Notwendigkeit, wenn ein Projekt umgesetzt werden soll.
Gerald Schulze
Profilbild von Hartmut Winkler
vor 2 Monaten
Sehr zu empfehlen! Das Team von reDim hat ausgezeichnete Arbeit geleistet. Ich bin sehr zufrieden mit meiner neuen Unternehmens Website. Die Designer von reDim haben die Website passend zur Unternehmensidentität gestaltet. Die technische Umsetzung ging zügig voran. Das Projektteam ist freundlich und serviceorientiert. Die Abstimmung während des Projektes verlief schnell und flüssig. Bei Fragen steht das reDim Team immer gerne zur Verfügung. Mein Fazit: Jederzeit wieder reDim!
Hartmut Winkler
Profilbild von Silvia Heitmeier
vor 3 Monaten
Top Beratung und super beschrieben. Tolles Tutorial - auch für mich verständlich ;-) Auch die telefonische Beratung hat mir sehr schnell und positiv weiterhelfen können!!!! yippey
Silvia Heitmeier
Profilbild von Goran Šušnjara
vor 3 Monaten
Sehr gute Beratung und Planung.. Kompetenz,sehr professionell.. Beste Grüße
Goran Šušnjara
 

Menü springt bei Hover-Effekt "font-weight: bold"

Menü verschiebt sich bei hover.

https://www.redim.de/images/grafiken/html-css-tipps.png

Wer Webseiten selber erstellt, wird mit Sicherheit das Problem des hüpfenden Menüs kennen. Verpasst man den Menüpunkten in einem horizontalen Menü beim Hover ein „font-weight: bold;“, verschieben sich die Menüpunkte rechts daneben. Das liegt daran, dass die Schrift im fetten Zustand mehr Platz verbraucht, als im regulären Zustand.

Dieses Springen des Menüs ist nicht schön, kann aber durch einige CSS-Tricks vermieden werden. Im Folgenden werden drei mögliche Lösungen für dieses Problem erläutert.

Lösung 1 - Das „li“ erhält eine feste Breite

Wir gehen von dieser Menüstruktur aus:

<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Neuigkeiten</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Nun geben wir dem „li“ per CSS eine „width“:

li { display:inline-block; width: 100px; }

a:hover { font-weight:bold; }

Der Nachteil an dieser Lösung: Sie ist nicht sehr dynamisch. Dadurch, dass die Wörter nicht gleich lang sind, sollte die Breite durch Klassen individuell für jeden Punkt gesetzt werden. Ändert sich ein Menüpunkt, muss auch die Breite neu festgelegt werden.

Lösung 2 - text-shadow anstatt font-weight

Nutzt man bei dem Hovereffekt nicht „font-weight: bold;“ sondern:

a:hover { text-shadow: 1px 0 0 black; }

umgeht man das Problem mit den sich verschiebenden Menüpunkten. Man sieht allerdings auch, dass sich der Textschatten optisch von dem fetten Text unterscheidet, was diese Lösung auch nicht optimal macht.

HTML / CSS Tipps Grafik

Lösung 3 – Pseudo-Element ::after

Wir gehen wieder von derselben Menüstruktur aus wie in Lösung 1, jedoch bekommt jeder Unterpunkt noch das Attribut „name“, wie hier zu sehen:

<ul>
<li><a href="#" name="Start">Start</a></li>
<li><a href="#" name="Über mich">Über mich</a></li>
<li><a href="#" name="Galerie">Galerie</a></li>
<li><a href="#" name="Neuigkeiten">Neuigkeiten</a></li>
<li><a href="#" name="Kontakt">Kontakt</a></li>
</ul>

Dabei ist es wichtig, dass der Wert exakt dieselbe Schreibweise hat, wie der Menüpunkt an sich. Hierbei also auch auf Groß- und Kleinschreibung, sowie Leerzeichen, Sonderzeichen etc. achten. Der CSS-Code für die Lösung sieht wie folgt aus:

li { display: inline-block; }

a:hover { font-weight:bold; }

a::after { display:block; content:attr(name); font-weight:bold; visibility: hidden; overflow: hidden; height: 0px; } 

Was passiert hier? Durch das Pseudo-Element ::after wird der Platz, den der Hover-Effekt braucht, schon im regulären Zustand unsichtbar beansprucht. Dadurch werden die übrigen Menüpunkte beim Hover nicht verdrängt.

Natürlich müssen hierbei einige Codezeilen an den eigenen CSS-Code angepasst werden. Wenn das „a“ zum Beispiel ein „padding“ gesetzt hat, muss dieses auch beim a::after gesetzt werden. Diese Lösung funktioniert in allen gängigen und aktuellen Browsern.

Joomla Partner
Newsletter2Go Partner
Ionos by 1&1 Partner
eRecht24 Partner
...
JETZT BERATEN LASSEN!

Christian Clas

+49 (0) 6181 36 96 96 0
team@redim.de

WIR VERWENDEN COOKIES

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies).

Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.