zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Buttons zucken bei hoover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2007, 11:02
Benutzerbild von AdamK
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.09.2007
Beiträge: 13
AdamK befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2007, 12:10
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ä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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.09.2007, 12:37
Benutzerbild von AdamK
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.09.2007
Beiträge: 13
AdamK befindet sich auf einem aufstrebenden Ast
Standard

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..
__________________
Bye, Adam
http://gukp.de/
Gesundheits- und Krankenpflege Online
Mit Zitat antworten
  #4 (permalink)  
Alt 07.09.2007, 12:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AdamK Beitrag anzeigen
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.

Geändert von heiko_rs (07.09.2007 um 13:01 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.09.2007, 13:03
Benutzerbild von AdamK
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.09.2007
Beiträge: 13
AdamK befindet sich auf einem aufstrebenden Ast
Standard

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;
}
__________________
Bye, Adam
http://gukp.de/
Gesundheits- und Krankenpflege Online

Geändert von AdamK (07.09.2007 um 13:09 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.09.2007, 13:15
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AdamK Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 07.09.2007, 13:19
Benutzerbild von AdamK
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.09.2007
Beiträge: 13
AdamK befindet sich auf einem aufstrebenden Ast
Standard

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...
__________________
Bye, Adam
http://gukp.de/
Gesundheits- und Krankenpflege Online
Mit Zitat antworten
  #8 (permalink)  
Alt 08.09.2007, 18:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.05.2004
Beiträge: 275
dexter befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AdamK Beitrag anzeigen
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;
}
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern.

Geändert von dexter (08.09.2007 um 18:43 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.09.2007, 21:28
Benutzerbild von AdamK
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.09.2007
Beiträge: 13
AdamK befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von dexter Beitrag anzeigen
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..
__________________
Bye, Adam
http://gukp.de/
Gesundheits- und Krankenpflege Online
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.09.2007, 22:10
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.05.2004
Beiträge: 275
dexter befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AdamK Beitrag anzeigen
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.
__________________
Du bist so dumm, Dich kann man auf 2 Disketten abspeichern.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:06 Uhr.