|
|||
Links in Menüleiste schwimmen
Hallo,
ich habe ein eigenartiges Problem. Ich habe eine funktionierende Menüleiste. Wenn ich mit der Maus über die Einträge gehe werden diese auch fett geschrieben. Allerdings "schwimmt" die Navigation, sprich die anderen Einträge "rücken beiseite" das der fett geschriebene Eintrag mehr Platz benötigt. Dieses Phänomen habe ich in der Menüleiste im Firefox, wenn ich mit die ganze Sache im Chrome anschaue, sind die Einträge fest, auch wenn ich mit der Maus drüber fahre. Ich habe versucht mittels padding und margin die Abstände zu vergrößern, aber das Schwimmen bleibt. Wie kann ich das Problem lösen? Vielen Dank im voraus. |
Sponsored Links |
|
|||
Hallo
Deine Angaben sind sehr mager. Wenn du ein Anfänger bist werden dir allgemeine Angaben kaum weiterhelfen, da du sie wahrscheinlich nicht umsetzen kannst. Ich versuch's trotzdem mal: Verwende Flexbox. Die Flex-Items reagieren nicht auf Größenänderungen durch hover-Effekte. Ansonsten brauchen wir einen Link zu deiner Seite oder, als zweitbeste Lösung, den gesamten HTML- und CSS-Quelltext. Gruss MrMurphy |
Sponsored Links |
|
|||
Hallo,
einen Link auf die Seite kann ich leider nicht bieten, da im Moment noch intern entwickelt wird. Ich hoffe ich kann mit einigen Code-Auszügen das Problem etwas beleuchten. btw: Ich bin zwar kein CSS-Neuling, aber manchmal blond. Ich habe bootstraps als Grundlage genommen. HTML-Code:
<ul id="w6" class="navbar-nav navbar-right nav"> <li><a href="/site/index">Start</a></li> <li><a href="/site/todo">Blog</a></li> <li><a href="/site/about">Über uns</a></li> <li><a href="/site/todo">Team</a></li> <li><a href="/site/contact">Kontakt</a></li> </ul> Code:
.navbar-inverse .navbar-nav > li > a { color: grey; text-decoration: none; text-transform: uppercase; font-size: 1.2em; } .navbar-inverse .navbar-nav > li.active > a, .navbar-inverse .navbar-nav > li.active > a:hover, .navbar-inverse .navbar-nav > li.active > a:focus { color: red; font-weight: bold; background-color: transparent; } .navbar-nav > li > a:hover:not(.active) { color: red; font-weight: bold; } |
|
|||
[QUOTE=Eldri;549291]Ich hoffe ich kann mit einigen Code-Auszügen das Problem etwas beleuchten. /QUOTE]
Nein, nicht wirklich. Gehe auf jsfiddle.com und füge dort deinen Code ein, dann sieht man (zumindest ich persönlich nicht, vielleicht übersehe ich auch etwas, möchte ich nicht ausschließen) nicht wirklich ein Problem. Alle Links sind untereinander und auch nach :hover noch schön untereinander. So kann man nur weiter raten und die Kristallkugel befragen: Das "Schwimmen" kommt vom nicht-fett auf fett schreiben, dann brauchen Elemente nun mal mehr Platz. Ist ja auch logisch, da fette Buchstaben breiter sind. Lösung dazu: Keine fetten Buchstaben verwenden. Oder fixe Breiten. Oder sonst etwas, was man bei einem besseren Beispiel eventuell sagen kann. |
|
|||
Hallo,
ich war gerade auf der Seite http://jsfiddle.com/ aber wo kann ich da Code eingeben. Das ist doch nur Werbung. Die fetten Buschstaben werden von Designer und Kunden gewünscht. Ich wäre ja auch für einfache Schrift, aber ich bin "nur" der Entwickler. Ich weiß halt nicht an welchen Stelle ich die Eintragungen für die fixe Breite eintragen sollte. Was wird denn vom Code noch benötigt, um hier Tipps zu geben. Dank, Eldri |
|
|||
Hallo,
ich habe es getestet und gefunden. Ja es schwimmt, wenn man es fett schreibt, weil eben die fetten Buchstaben mehr Platz benötigen. Ich habe es jetzt mal mit Flexbox getestet. Aber irgendwie kommt das nicht hin, es schwimmt immer noch. Hier der CSS-Code mit der Flexbox. Der HTML-Code bleibt unverändert. Code:
body { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .nav { list-style: none; padding: 10px; margin: 10px; -webkit-flex: 1 100%; flex: 1 100%; } .navbar-nav > li { float: left; } .navbar-inverse .navbar-nav > li > a { color: grey; text-decoration: none; text-transform: uppercase; font-size: 1.2em; } .navbar-inverse .navbar-nav > li.active > a, .navbar-inverse .navbar-nav > li.active > a:hover, .navbar-inverse .navbar-nav > li.active > a:focus { color: red; font-weight: bold; background-color: transparent; } .navbar-nav > li > a:hover:not(.active) { color: red; font-weight: bold; } .nav > li > a { position: relative; display: block; padding: 10px 15px; margin-left: 3px; margin-right: 3px; } Beitrag bearbeiten/löschen |
|
|||
Hallo
Zitat:
Lass Flexbox weg und füge dem CSS mal folgende Anweisung hinzu: Code:
.navbar-inverse .navbar-nav > li { width: 140px; } Code:
.navbar-inverse .navbar-nav > li { text-align: center; width: 140px; } Gruss MrMurphy |
|
|||
Hallo,
danke hab das doch gleich mal probiert, und es funktioniert. Leider wird dann die Navigationsleiste zu lang und fällt aus dem Layout raus, da die Breite der Leiste zu breit wird. Sind dann zu viele Punkte, und einer ist sogar zu lang, so dass er zweizeilig wird. das ist auch nicht gewünscht. Also auch nicht DIE Lösung. Schade. Ich versuche gerade mit dem Designer zu klären, dass wir es in einfacher Schrift lassen, das scheint mir hier die sinnvollere Alternative zu sein. Denn dann schwimmt es auch nicht, da ein Farbwechsel keinen zusätzlichen Platz benötigt. |
Sponsored Links |
|
|||
Hallo
Zitat:
Gruss MrMurphy |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. | Picasso | CSS | 36 | 03.01.2011 20:41 |
Holy Grail und der Internet Explorer! | ONeill | CSS | 23 | 01.06.2006 19:20 |
Probleme mit 3 spalten | luk | CSS | 3 | 08.06.2005 15:39 |