css-Problem bei hover 100% in mobiler Version

[schorse]

Hallo,
können die erfahrenen css Nutzer unter Euch mal schauen? Ich habe bin gerade dabei eine mobile Version meines Shops auf Basis des FB-Moduls aufzusetzen. Das Ganze ist im Prinzip fertig. Ein letztes Problem ist jedoch, daß die Hauptnavigation im Hover-Zustand breiter als 100%-Fensterbreite wird und somit springt. Trotz Firebug-Test komme ich nicht dahinter woran es liegt. Das <li> ist mit 100% formatiert und beim <a> steht auch 100% drin.
Aufrufen könnt Ihr die Seite unter http://m.philostratus.com .
Mit Dank im Voraus, Schorse

[Randshoprookie]

Hallöchen Schorse,

Ich kann keinen Fehler entdecken, sieht super aus.
Hab's mit dem Handy des "angebissenen Obstes" angesehen.

LG Piet

[schorse]

Hallo Randshoprookie,
Danke für's Ansehen (und das positive Feedback). Das Problem tritt vor allem bei größeren Darstellungen und am PC auf. Im Prinzip ist es nur noch ein kleiner Schönheitsfehler. Wenn Du am PC über die Hauptnavigationspunkte fährst wird ein horizontaler Scrollbar eingeblendet, da der aktive Link breiter dargestellt wird als die 100%. Auch wenn das am Smartphone nicht tragisch ist, so wüßte ich doch gerne woran es liegt. Außerdem würde ich den Link gerne auf die ganze Fläche und nicht nur das jeweilige Wort setzen. Beides will mir irgendwie nicht so recht gelingen.

[bonsai]

Wenn Du am PC über die Hauptnavigationspunkte fährst wird ein horizontaler Scrollbar eingeblendet, da der aktive Link breiter dargestellt wird als die 100%. Auch wenn das am Smartphone nicht tragisch ist, so wüßte ich doch gerne woran es liegt.

Wenn Du in Deiner "mobile_Layout.css in der Zeile 99 ff (div.kategorie ul li a:hover) diese 100% auf z.b. 95% änderst, was passiert dann??

Außerdem würde ich den Link gerne auf die ganze Fläche und nicht nur das jeweilige Wort setzen. Beides will mir irgendwie nicht so recht gelingen.

Das geht m.m. nach nur, wenn Du hier ein Bild als Hintergrund anlegst und dem Bild dann den Link zuweisen würdest.
Noch nie ausprobiert, könnte aber auch gehen: Die Zeile auffüllen mit "Leerzeichen" (&nbsp) und den Link darüber erweitern

[schorse]

Hallo Bonsai,
danke für die Info. Bei 95% springt zwar nichts mehr, der "Schalter" wird beim hovern aber auch nicht mehr komplett dunkelblau eingefärbt. Ich bin ziemlich sicher, daß es sich um ein css-Problem handelt, das sich auch ohne Bild regeln lässt. Das mit den &nbsp; ist keine schöne Lösung, da die &nbsp; von der Schriftgröße und m.E. auch vom Ausgabemedium abhängen. Eine exakte Lösung wird daher auf diesem Weg nicht möglich sein.
Weitere Tipps? Ideen?
Gruß Schorse

[Randshoprookie]

Hallöchen,

width auf 99% das klappt

Code: Alles auswählen

div.kategorie ul li a:hover {
    background-color: #627AAD;
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: bold;
    margin-right: 0;
    padding: 4px 8px;
    text-decoration: none;
    width: 99%;

Und noch etwas, in Safari geht es ohne springen. Habe es nur in Firefox gesehen.

LG Piet

[Magnus]

Hallo schorse,

das "Problem" ist das Boxmodell. Bei dem wird zur Breite eines Elements noch padding, margin und border hinzugezählt um die endgültige Breite zu erhalten.
Wenn du dem Link also 100% Breite gibst und dann noch padding und margin angibst, wird die Box breiter als 100% und wenn das dann über das Browserfenster hinausgeht, wird eben der Scrollbalken angezeigt.
Also dem Link 100% Breite geben, margin und padding (jeweils links und rechts) beim Link weglassen. Den linken Einzug für den Linktext kannst du dann per padding der umgebenden Box (hier das li-Element) hinzufügen. Dann sollte das auch klappen ...

viele Grüße

Magnus

[schorse]

Hallo Magnus,
das klingt sehr gut. Vielen Dank! Der Ansatz scheint mir richtig, jedoch funktioniert die Lösung leider noch nicht ganz. Wenn ich dem <li> nun ein padding-left zuweise wird dieses zu groß, da es ja ebenfalls 100% breit sein soll. Ich habe nun innerhalb des Links vor den Linktext noch einen "blinden" Span mit "padding-left:6px" eingefügt. Damit funktioniert es, auch wenn es sicherlich elegantere Wege gibt.
Gruß Schorse

[Magnus]

Hallo Shorse,

li tags sind Blockelemente und von Haus aus so breit wie es die umgebende Box zulässt. Die Breitenangabe 100% ist hier nicht notwendig,, sondern eher kontraproduktiv. Sie sagt dem li nämlich "werde genau so breit wie die umgebende Box" das li-tag addiert dann noch das padding dazu und ist wieder zu breit ...

Übrigens ist Das große LittleBoxes Buch von Peter Müller eine Lektüre die sich lohnt.

viele Grüße

magnus

[schorse]

Aha! Danke Dir! Auch für den Literaturtip!