:hover-Effekt funktioniert nicht recht :(

Johnnie Foxtrott

Guten Tag allesamt,
nachdem ich monatelang hier nur mitgelesen habe meldete ich mich heute mal an, da ich eine Frage habe. Ich benutze WP 2.6.1. auf einem eigenen Server, habe das Standardthema "Kubrick" missbraucht um mein eigenes zu basteln. Mein Blog befindet sich nun in der offenen Betaphase, es fehlen noch ein paar Dinge, das Bloggen macht mir aber allmaelig Spasz und der index.php-Code ist valide.

Nun zum Problem: Fuer die Navi habe ich einen :hover-Effekt eingebaut, der vom positioning Gebrauch macht (gab`s mal auf cssplay.co.uk); eigentlich hat mal alles gut funktioniert, die Pixelwerte stimmen alle etc.
Wenn man meine Seite mit dem FF3 und WinXP/Vista besucht, verschiebt sich die "gehoverte" Hintergrundgrafik immer um 1 Pixel nach rechts, obwohl die Werte stimmen. Bescheuert: Aktiviert man in XP den Old-Windows-Style, funktioniert alles bestens. EBENSO, wenn man das Browserfenster verkleinert, es also nicht mehr maximiert ist ... ich benutze die 1280er Desktopaufl.

Weisz vielleicht irgendein Profi weiter? Also ich bin trotz meiner fortgeschrittenen Kenntnisse am Ende - muss ja irgendwas mit dem zusaetzlichen Pixel zu tun haben, der durch die neuen Styles an der Scrollbar entsteht; warum sich das ganze dadurch nicht einfach um 1 Pixel verschiebt, ist mir jedoch schleierhaft.

Alle anderen Kleinigkeiten wie unsauberer Code oder fehlendes 404-Layout bitte ich zu entschuldigen ^^

Link zur CSS

Fuer jedwede Antwort bin ich dankbar!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Ammaletu

Sehr hübsch gemacht, wirklich! :-)

Zu Deinem Problem: So auf Anhieb sehe ich die Ursache auch nicht, allerdings kommt mir etwas komisch vor, was mir der Web Developer an CSS anzeigt:

Code

#nav a (line 95) {
  width: 136px;
  height: 0pt;
  padding-top: 160px;
  display: block;
  float: left;
  overflow-x: hidden;
  overflow-y: hidden;
  text-decoration: none;
  background-color: transparent;
  background-image: url(./images/bg.navhover.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 544px 544px;
}




#nav a#photos:hover (line 106) {
  background-position: -272px 0pt;
  z-index: 50;
}

Alles anzeigen

Ok, so ganz steige ich da noch nicht dahinter. Aber hast Du Dir das mal im FF3 angeschaut, wenn das Fenster so schmal gezogen ist, dass das Hintergrundbild nicht ganz reinpasst? Dann tauchen die Hover-Bilder komplett an der falschen Stelle auf.

Ich würde da zum einen der Seite die benötigte min-width mitgeben. Und zum anderen würde ich den Header-Bereich relativ positionieren und dann darin die Navigations-Links absolut positionieren. Das mit den negativen Werten leuchtet mir jedenfalls im Moment nicht ein. ;-)

Johnnie Foxtrott

Zitat

Dann tauchen die Hover-Bilder komplett an der falschen Stelle auf.

Stimmt, ist mir jedoch nicht wichtig, da ich meine Seite auf 960px optimiert habe, wer mit 800px oder weniger unterwegs ist ist mir ehrlich gesagt egal, ist halt mein privater Blog...

Wie meinst du das, header Bereich relativ positionieren?

Also die negativen Werte gelten ja nur fuer die :hover-Situation.
Sprich: Im normalen Zustand befindet sich das Hover-Hintergrundbild (bg.navhover.jpg) vernab jeglicher Sichtbarkeit:

Code

#nav a {width:136px; height:0; 
	padding-top:160px;
	display:block; 
	float:left; 
	overflow:hidden;
	text-decoration:none; 
	background:transparent url(./images/bg.navhover.jpg) 544px 544px no-repeat;
	}

Die hover-Grafik ist EINE Grafik mit allen 4 veraenderten grafischen Zustaenden. Faehrt man nun mit der Maus ueber den jeweiligen Link, positioniert sich die bg.navhover neu:

Code

#nav a#works:hover {background-position: -136px 0; z-index:50;}

Alle 4 link-Blockelemente sind gleich breit (136px), die navhover ist so breit wie alle 4 zusammen (544px) - link 1 (Blog) bekommt bei :hover die Position

Code

0 0

, link 2 (Werke) schon einen negativen Wert, und zwar genau die breite eines einzelnen link-Blocks (136px); heisst, dass vom linken Rand des 2. Linkblocks die Grafik sich um -136px nach links verschiebt - also der "2., 136px breite Teil" der Hintergrundgrafik zu sehen ist- in dem Fall das explodierende AKW. Ansonsten mal ich das Verfahren mal in Paint nach ^^

Oder hat noch irgendein anderer hilfreicher CSSler einen Loesungsvorschlag? Oder ist meine Blog-navi auf ewig zum Wackeln verdammt?

Ammaletu

Zitat

Stimmt, ist mir jedoch nicht wichtig, da ich meine Seite auf 960px optimiert habe, wer mit 800px oder weniger unterwegs ist ist mir ehrlich gesagt egal, ist halt mein privater Blog...

Na komm, so viel Zeit wirst Du doch gerade noch haben, der Seite eine entsprechende min-width mitzugeben. Dann muss man in kleineren Browserfenstern halt horizontal scrollen, aber es zerhaut nicht das Design.

Zitat

Wie meinst du das, header Bereich relativ positionieren?

Relative Positionierung in dem Fall damit die nachfolgende absolute Positionierung funktioniert. War nur ein Gedanke, brauchst Du bei Deiner jetzigen Lösung natürlich nicht.

Zitat

Also die negativen Werte gelten ja nur fuer die :hover-Situation.
Sprich: Im normalen Zustand befindet sich das Hover-Hintergrundbild (bg.navhover.jpg) vernab jeglicher Sichtbarkeit:

Ah ok, so funktioniert das. Na, ich rechne jetzt nicht aus ob die angegebenen Werte alle stimmen. Wenn es Unterschiede gibt, könnte ich mir vorstellen, dass die am anderen Box-Model liegen: Im FF ist Weite ja gleich Box-Weite + Border-Weite + Padding. Vielleicht ist da bei Hover noch ein 1px-Padding definiert?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

:hover-Effekt funktioniert nicht recht :(

Jetzt mitmachen!