Google Bewertung
5.0

Basierend auf 51 Bewertungen

reDim GmbH | Webdesign, Webentwicklung & Online Marketing
5.0
51 Rezensionen
Profilbild von Thomas Runte
vor 9 Monaten
Da unsere Homepage nicht mehr ganz zeitgemäß war, war ein kompletter Relaunch nötig. Nachdem ich eine längere Zeit nach einer passenden Web-Agentur suchte, blieben zwei Anbieter in der engeren Auswahl. Einer davon war REDIM, für die ich mich letztlich entschied. Wie sich sehr schnell herausstellte, war es die richtige Wahl, die Firma REDIM mit dem Relaunch zu beauftragen. Auf meine Bedürfnisse, meine neue Homepage ganzheitlich zu betrachten wurde direkt eingegangen. Ich hatte den Eindruck, dass sich bei REDIM auch viel Zeit dafür genommen worden ist, nicht nur unser Unternehmen, sondern die komplette Branche und die damit verbundenen Kundenerwartungen kennen zu lernen, um daraus eine Homepage zu entwickeln, die unsere Zielgruppe optimal anspricht. Der komplette Prozess, angefangen bei den Kick-of-Meetings, über das Fotoshooting, die Entwicklung der Inhalte und die Programmierung der besonderen Tools, die unserer Homepage in der Branche einzigartig macht, war absolut professionell und zielorientiert. Sämtliche Mitarbeiter, mit denen ich Kontakt hatte, waren durchwegs kompetemt, freundlich, sympathisch und hatten immer ein offenes Ohr für meine Wünsche. Besonders den Projektleiter, mit dem ich wirklich sehr viel telefonierte, möchte ich in diesem Zusammenhang besonders hervorheben. Mit dem Ergebnis bin ich mehr als zufrieden: wir haben jetzt eine umfangreiche und moderne, die Zielgruppe ansprechende Homepage, die nicht nur bei den Kunden gut ankommt, sondern uns im täglichen Geschäft sogar die Arbeit erleichtert. Großes Lob und vielen Dank. Beim nächsten Projekt weiß ich jetzt schon, an wen ich mich wenden werde.
Thomas Runte
Profilbild von H2O
vor einem Jahr
reDim ist bereits seit einigen Jahren ein zuverlässiger Partner für unsere Webseite. Das Team ist kompetent, immer freundlich und äußerst hilfsbereit. Wir haben schon tolle Projekte zusammen umgesetzt und wir freuen uns auf viele weitere!
H2O
Profilbild von Julio Freaza
vor einem Jahr
Professionell, effizient und transparent. Wir arbeiten mit der reDim GmbH seit letztem Jahr zusammen und sind sehr zufrieden. Innovative Ideen von einem tollen und kompetenten Team - vor allem bei Joomla Projekte. Wir sagen Danke und freuen uns auf die weitere Zusammenarbeit.
Julio Freaza
Profilbild von Natalia Bremora
vor einem Jahr
Professionalität, ein wunschgemäßes Ergebnis, hohe Hilfsbereitschaft!!!
Natalia Bremora
Profilbild von ronnie berzins
vor 2 Jahren
Der "cookie hint" ist einfach genial. Dafür an dieser Stelle danke für die tolle und dazu noch kostenlose Erweiterung.
ronnie berzins
 
von Matthias Löschmann

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

Menü verschiebt sich bei hover.

https://www.redim.de/images/grafiken/html-css-tipps.png 2020-01-28T17:53:25+01:00

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.

Sind noch Fragen offen oder brauchen Sie Hilfe?

Als Internetagentur helfen wir gerne weiter
und freuen uns auf Ihre unverbindliche Anfrage.

JETZT KONTAKTIEREN

Matthias Loeschmann
Über den Autor Matthias Löschmann

Wenn die richtigen Code-Schnipsel, Design und Funktion zusammenfallen, dann ist Matthias in seinem Element. Für Ihn gibt es nichts schöneres als Anwendungen zu schreiben die Probleme lösen, Content besser darstellen oder Ihr Projekt voranbringen. Durch die IHK-Zertifizierung trägt er nun die Verantwortung, seine Kompetenzen an folgende Generationen von reDim Mitarbeitern weiterzugeben.

IONOS - Offizieller Partner
Ryte Expert
Sendinblue Captain Partner
eRecht24 Partner
Klimaneutrale Webseite
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.