|
||||
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; } Code:
<a class="hftxt" href="/bilder/">Bilder</a> |
Sponsored Links |
|
||||
Ä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. Geändert von heiko_rs (07.09.2007 um 12:13 Uhr) |
Sponsored Links |
|
||||
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.
Geändert von heiko_rs (07.09.2007 um 13:01 Uhr) |
|
||||
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; } Geändert von AdamK (07.09.2007 um 13:09 Uhr) |
|
||||
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; } |
|
|||
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; }
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern. Geändert von dexter (08.09.2007 um 18:43 Uhr) |
|
||||
Zitat:
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.. |
Sponsored Links |
|
|||
Zitat:
Code:
a { border: 1px solid #ffc600; border-width: 1px 2px 2px 1px;} Man kann natürlich jeden Rahmen auch einzeln definieren. Übersichtlich ist aber was anderes. Code:
a:hover { border-width: 2px 1px 1px 2px; 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.
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Buttons richtig positionieren | joergi | CSS | 1 | 28.06.2011 03:17 |
Text neben Buttons ausrichten | red1854 | CSS | 0 | 13.09.2008 00:51 |
Buttons für externe Stylesheets: Druck & Schriftvergrößerung | Magnetic | CSS | 4 | 02.06.2006 22:30 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 16.01.2006 00:27 |
Problem mit Buttons / Hintergrund - Felder verschieben!? | Hisky | CSS | 3 | 10.05.2005 21:42 |