XHTMLforum - Buttons zucken bei hoover

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Buttons zucken bei hoover (http://xhtmlforum.de/showthread.php?t=47789)

AdamK

07.09.2007 10:02

Buttons zucken bei hoover

Hi,

ich habe das Problem auf meiner Adam Kopacz - Meine Homepage das die oberen & unteren
Navigationsbuttons zucken wenn man mit der Maus die Border berührt.
Dank Google fand ich dazu Cascading Style Sheets { Tutorials : Schatten mit CSS }
welche bei beispiel 7/8 genau auf das Problem eingeht aber diese Div
Konstruktion hilft mir leider nicht wirklich weiter..

Hat jemand eine Idee?

So sieht das bei mir aus:

Code:

.hftxt { 

        color:#000000; font-size: 11px; font-weight: bold; background-color:#fff1bf; 

        border-left:1px solid #ffc600; border-top:1px solid #ffc600;

        border-right:2px solid #ffc600; border-bottom:2px solid #ffc600;

        padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:0px;

}

.hftxt:hover { 

        color:#000000; font-size: 11px; font-weight: bold; 

        background-color:#fff9e4; text-decoration: none;

        border-left:2px solid #ffc600; border-top:2px solid #ffc600;

        border-right:1px solid #ffc600; border-bottom:1px solid #ffc600;

}

und HTML:

Code:

<a class="hftxt" href="/bilder/">Bilder</a>

Bye, Adam

heiko_rs

07.09.2007 11:10

Änderungen der border-width sollten immer durch padding kompensiert werden.

Du brauchst keine Klasse für a - Stichwort "Nachfahrenselektor". Und wirf die Layout-Tabellen raus. Und immer validieren: The W3C Markup Validation Service - Deine Seite strotzt von Fehlern.

AdamK

07.09.2007 11:37

Entweder ich bin zu doof dazu oder genau das würde meinen "Button-Drück-Effekt" zerstören denn dann bewegt sich der Text doch nicht mehr mit...

PS: seltsam das es nur beim Hineinfahren von unten zuckt.. Alle anderen Richtungen gehen bestens..

heiko_rs

07.09.2007 11:59

Zitat:

Zitat von AdamK (Beitrag 348535)

PS: seltsam das es nur beim Hineinfahren von unten zuckt

Ist doch logisch: Beim Hovern verringert sich die Höhe und der Link "entzieht" sich dem Mauszeiger. Dadurch ist er wieder im Normalzustand und nimmt wieder die größere Höhe an, die ihn wieder in den Bereich des Mauszeigers bringt, so daß er wieder gehovert wird - damit beginnt das Spiel von vorne.

AdamK

07.09.2007 12:03

Hm. So Logisch ist das gar nicht den die Höhe bleibt die selbe den das was unten weggenommen wird kommt ja oben wieder dazu..

Aber was ist nun die Lösung des Problems????
Gibt es keine? No-way das ohne transparente Border "drumrum" hinzubekommen?

Und wieso zuckt das selbe Spiel bei Grafiken nicht? Auch auf kopacz.de zu sehen, rechts das Bild...

Code:

DIV.album IMG {

        border-left:1px solid #AAAAAA; border-top:1px solid #AAAAAA;

        border-right:2px solid #AAAAAA; border-bottom:2px solid #AAAAAA;

        padding: 4px;



}



DIV.album a:hover IMG {

        border-left:2px solid #AAAAAA; border-top:2px solid #AAAAAA;

        border-right:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA;

        filter: alpha(opacity=80);

        moz-opacity: .80;

        opacity: .80;

}

heiko_rs

07.09.2007 12:15

Zitat:

Zitat von AdamK (Beitrag 348543)

die Höhe bleibt die selbe den das was unten weggenommen wird kommt ja oben wieder dazu.

Nein, schau beim Hovern mal genau hin, unten fehlt 1px. Aber Dein Markup ist eh ziemlich verquer: Ein Menü gehört in eine Liste - 3 Links in einem span, das in einer Tabellenzelle steckt, geht gar nicht.

AdamK

07.09.2007 12:19

hm? doch so gehts ohne zucken & mit 3d-push-effekt :)

Code:

.hftxt { 

        color:#000000; font-size: 11px; font-weight: bold; background-color:#fff1bf; 

        border-left:1px solid #ffc600; border-top:1px solid #ffc600;

        border-right:2px solid #ffc600; border-bottom:2px solid #ffc600;

        padding-left:10px; padding-right:10px; padding-top:1px; padding-bottom:0px;

}

.hftxt:hover { 

        color:#000000; font-size: 11px; font-weight: bold; 

        background-color:#fff9e4; text-decoration: none;

        border-left:2px solid #ffc600; border-top:2px solid #ffc600;

        border-right:1px solid #ffc600; border-bottom:1px solid #ffc600;

        padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:1px;

}

ps: und ich kann gucken solange ich will, es veränderte sich nichts an der höhre/breite! wieso auch wenn border links/unten zwar -1 bekommt aber dafür unten/rechts +1??? schaute mit MSIE und 400% zoom drauf...

dexter

08.09.2007 17:31

Zitat:

Zitat von AdamK (Beitrag 348548)

hm? doch so gehts ohne zucken & mit 3d-push-effekt :)

Code:

Snip

Kann man sicher auch noch etwas umfangreicher und unübersichtlicher gestalten.
Warum nimmst Du statt border-left etc. nicht gleich border-left-style, border-left-color, border-left-width usw.?
Ich denke, wenn Du Dir ein wenig mehr Mühe gibst, bekommst Du das CSS sicher irgendwann auf 100kb aufgeblasen.

Edit: Damits nicht bei konstruktivem Gemaule bleibt, vergleiche mit Deinem CSS:

Code:

.hftxt li {display:inline;}

.hftxt a {

        color:#000;

        background-color:#fff1bf;

        font: bold 11px Verdana, Arial, Helvetica, sans-serif;

        border: 1px solid #ffc600;

        border-width: 1px 2px 2px 1px;

        padding: 1px 10px 0;

}

.hftxt a:hover {

        background:#fff9e4;

        text-decoration: none;

        border-width: 2px 1px 1px 2px;

        padding: 0 10px 1px;

}

AdamK

08.09.2007 20:28

Zitat:

Zitat von dexter (Beitrag 348698)

Edit: Damits nicht bei konstruktivem Gemaule bleibt, vergleiche mit Deinem CSS:

Thanx! :)
Das hat was, aber dient nicht grade der Übersichtlichkeit.. Ich habe erst seit 1-2 Wochen etwas mit CSS zu tun und muss bei fast jedem werte-dingens-da noch bei selfhtml nachlesen..

dexter

08.09.2007 21:10

Zitat:

Zitat von AdamK (Beitrag 348725)

Thanx! :)
Das hat was, aber dient nicht grade der Übersichtlichkeit.. Ich habe erst seit 1-2 Wochen etwas mit CSS zu tun und muss bei fast jedem werte-dingens-da noch bei selfhtml nachlesen..

Dein Verständnis-Problem ist erstmal der Border:

Code:

a {

        border: 1px solid #ffc600;

        border-width: 1px 2px 2px 1px;}

in Zeile eins legen wir alle Werte für die Rahmen fest, in Zeile zwei wird die unterschiedliche Rahmendicke mittels border-width überschrieben. Das ist nicht unübersichtlich, sondern eine Verständnisfrage.
Man kann natürlich jeden Rahmen auch einzeln definieren. Übersichtlich ist aber was anderes.

Code:

a:hover {

        border-width: 2px 1px 1px 2px;

den border (und andere Sachen, die ich in der Zusammenfassung weggelassen habe) für a haben wir bereits festgelegt, das heisst, dass man das ganze Spiel nicht von vorn beginnen muss, sondern nur die Rahmenstärke ändern.

Noch mal in deutsch: a:hover hat bereits alle Eigenschaften, die wir a mitgegeben haben, man muss nur noch die Änderungen für das Hovern "aktivieren".

Wegen Nachschauen muss man sich btw. nicht schämen, ich muss das auch. Allerdings schaue ich woanders.

Alle Zeitangaben in WEZ +2. Es ist jetzt 12:40 Uhr.