nicht angemeldet
Probleme mit a:hover und background-image: Text springt
0 
Marc
0 
Gunnar Bittersmann
Probleme mit a:hover und background-image: Text springt
Hi zusammen,
hab ein kleines Problem und hoffe hier Hilfe zu bekommen.
Ich habe für eine Seite ein Navi-Menü gemacht und das ganze ist als table angelegt. Jetzt möchte ich bei den a:hover erreichen, dass ein background-image erscheint als optischen Effekt. Das klappt prinzipiell auch schon. Allerdings gibt es ein Problem: Geh ich dann mit der Maus über den Link in der Tabellenspalte, dann erscheint zwar das bg-image, aber die Schrift springt nach oben. (Also ist nach wie vor zentriert, aber nicht mehr vertikal - sie "klebt" beim hovern dann oben an der Tabellenspalte.) Habe schon diverses ausprobiert, aber keine Lösung gefunden. Ich poste mal das html und das css. Habe es versucht auf das nötige zu reduzieren:
<body>
<div id="content">
<div id="navioben">
<table>
<tr>
<td id="tdstartseite"><a href="index.htm" onfocus="blur()">Startseite</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#content {
width: 800px;
padding: 0px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: white;
}
#navioben {
width: 800px;
height: 40px;
background-image: url(navioben.png);
margin-bottom: 0px;
}
table {
height: 40px;
border-collapse: collapse;
}
tr {
text-align: center;
color: white;
}
tr a {
display: block;
text-decoration: none;
padding: 0px;
border: 0px;
margin: 0px;
}
#tdstartseite {
width: 112px;
}
a:link {
color: white;
display: block;
}
a:visited {
color: white;
}
#tdstartseite a:hover {
background-image: url(tdstartseite.png);
width: 114px;
height: 40px;
margin: -1px;
}
Das CSS ist auch noch sehr optimierungsbedürftig, aber mir geht's primär erstmal darum, dass das mit den Hovers klappt. Ich hab auch bewusst die restlichen Tabellenspalten im html weggelassen. Also nicht wundern!
Achja, und die Lösung sollte nach Möglichkeit nicht über Javascript laufen... ;)
Danke schon mal im Voraus und viele Grüße
-
Hallo,
Hi zusammen,
hab ein kleines Problem und hoffe hier Hilfe zu bekommen.
Ich habe für eine Seite ein Navi-Menü gemacht und das ganze ist als table angelegt.
Das ist falsch. Jedes Menü ist eine Liste von Links, gehört also in ein ul - und dafür findest Du dann auch tausende fertiger Beispiele, die du relativ leicht an deine Bedürfnisse anpassen kannst - z. B. List-a-maticHTML validieren beim W3C-ValidatorCSS validieren beim W3C-CSS-Validator
Viele Grüße,
Marc.-
Das ist falsch. Jedes Menü ist eine Liste von Links, gehört also in ein ul
es sei denn, du baust es tabellarisch auf, oder als Definitionsliste, oder was sonst noch semantisch passt
-
Hallo,
Das ist falsch. Jedes Menü ist eine Liste von Links, gehört also in ein ul
es sei denn, du baust es tabellarisch auf, oder als Definitionsliste, oder was sonst noch semantisch passtAha - danke für den Hinweis. Welche tabellarischen Daten (td) enthält ein Menü denn so?
Viele Grüße,
Marc.-
Aha - danke für den Hinweis. Welche tabellarischen Daten (td) enthält ein Menü denn so?
denk dir was aus mit Linkziel - Infos, die nicht in den Linktext passen - weiß der Himmel, was man noch über den Link sagen kann
mit ein bisschen Phantasie lässt sich jede strukturierte Information in eine Tabelle packen
Du verwechselst wohl tabellarische Daten mit Zahlen?
-
Hallo gast24,
Aha - danke für den Hinweis. Welche tabellarischen Daten (td) enthält ein Menü denn so?
denk dir was aus mit Linkziel - Infos, die nicht in den Linktext passen - weiß der Himmel, was man noch über den Link sagen kann
So wie in dem Beispiel? Wie oft hast Du solche Menüs denn schon gesehen - ich weiß, es gibt immer ein paar Ausnahmen, die dann aber sogar sprichwörtlich die Regeln bestätigen.
mit ein bisschen Phantasie lässt sich jede strukturierte Information in eine Tabelle packen
Mit viel Phantasie lässt sich jedes Element für alles einsetzen. Ich werde wohl weiterhin Listen als Listen auszeichnen...
Du verwechselst wohl tabellarische Daten mit Zahlen?
Nö.
Viele Grüße,
Marc.-
Mit viel Phantasie lässt sich jedes Element für alles einsetzen.
Nein! Mit br wirst du nicht body ersetzen können, auch wenn so'n body ein ganz netter break sein kann.
Ich werde wohl weiterhin Listen als Listen auszeichnen...
Dagegen habe ich nichts einzuwenden (mach auf deinen Seiten, was du willst),
nur gegen die Behauptung, dass es immer und überall und bei jedem und jeder ul sein müsse!
-
Danke für die Antworten - hatte schon was geschrieben, aber leider aus Versehen nicht als letzten Post, sodass das wahrscheinlich untergegangen ist. Deshalb nochmal:
Ich hätte wohl noch eine wichtige Info dazu schreiben sollen, weshalb ich keine ul benutzt habe, sondern ein table. Die Buttons des Menüs haben unterschiedliche Breiten und müssen daher jeweils einzelne id's haben, damit ich jeweils für das hover ein entsprechendes background-image einsetzen kann. Und das funktioniert ja prinzipiell auch gut, bis auf die Tatsache, dass beim darüber fahren mit der Maus, der Text in der Spalte nach oben springt und ich weiß nicht wie ich das beheben kann?!
Soweit ich weiß, sind bei ul's die Buttons im Navmenü immer gleich groß, oder? (Kann auch sein, dass ich mich täusche - bin noch nicht der Vollprofi - man möge es mir verzeihen ;) ) Deshalb hatte ich an die Lösung mit dem table gedacht?!Würde mich über weitere Anregungen freuen...
-
@@Paradiesvogel:
nuqneH
Ich hätte wohl noch eine wichtige Info dazu schreiben sollen, weshalb ich keine ul benutzt habe, sondern ein table. Die Buttons des Menüs haben unterschiedliche Breiten und müssen daher jeweils einzelne id's haben, damit ich jeweils für das hover ein entsprechendes background-image einsetzen kann.
Und wo ist die wichtige Info dazu, weshalb du keine ul benutzt hast, sondern eine table?
Unterschiedliche Breiten bekommst du für 'li'-Elemente auch hin. Wie hätten wir’s denn gern: nebeneinander oder untereinander?
Und das funktioniert ja prinzipiell auch gut, bis auf die Tatsache, dass beim darüber fahren mit der Maus, der Text in der Spalte nach oben springt und ich weiß nicht wie ich das beheben kann?!
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Und wo ist die wichtige Info dazu, weshalb du keine ul benutzt hast, sondern eine table?
Unterschiedliche Breiten bekommst du für 'li'-Elemente auch hin. Wie hätten wir’s denn gern: nebeneinander oder untereinander?
Also soll nebeneinander sein. Also mir ist klar, dass ich das im CSS mit display: inline; darstellen kann. Muss ich dann für jedes li-Element eine id vergeben und dafür dann jeweils die Breite? (Meine nämlich, dass ich das auch schon getestet habe?!)
Sorry, aber versteh nicht ganz was Du hier meinst, denn bei Deinem vorigen Post ist doch keine Änderung des CSS zu sehen? Also dass das table mit den gewünschten Breiten erscheint, klappt ja. Die Links funktionieren auch soweit. Nur wie erwähnt - wenn ich dann mit der Maus darüber gehe (also a:hover) und dafür dann das background-image nutze (was auch klappt), springt mir leider die Schrift bzw. der Text in der Tabellenspalte an die obere Kante. Hab's schon mit vertical-align: middle; / padding-optionen / etc... probiert. Aber wenn Du nen guten Ratschlag hast, wäre natürlich toll! :)
-
@@Paradiesvogel:
nuqneH
Also soll nebeneinander sein. Also mir ist klar, dass ich das im CSS mit display: inline; darstellen kann. Muss ich dann für jedes li-Element eine id vergeben und dafür dann jeweils die Breite?
Nein, musst du nicht. Inline-Elemente sind so breit, wie es ihr Inalt eben verlangt. Damit sie nicht aneinander kleben, könnte sich 'margin' oder 'padding' anbieten.
Oder willst du, dass die Menüpunkte eine genau definierte Breite haben? Nicht empfehlenswert. Was ist, wenn der Text dann nicht reinpasst? Du weißt nichts über die beim Nutzer verwendete Schriftart und Schriftgröße!
Inline-Elementen kann man keine Breite geben. [CSS2 §10.2, §10.3.1]
Alternative: "inline-block", 'float'.
Sorry, aber versteh nicht ganz was Du hier meinst, denn bei Deinem vorigen Post ist doch keine Änderung des CSS zu sehen?
Die Änderungen wollte ich auch die überlassen. Ich wollte nur darauf hinweisen, dass es etliche CSS-Eigenschaften gibt (ergänzend: auch 'font-weight' gehört dazu), für die man für 'a:hover' keine anderen Werte setzen sollte als für 'a'.
Aber ändere besser erstmal dein HTML. Weg mit der Layouttabelle!
Aber wenn Du nen guten Ratschlag hast, wäre natürlich toll! :)
Mal deine Seite verlinken. Ich werde mir kaum die Mühe machen (und andere womöglich auch nicht), dein Problem erstmal mühsam nachzubauen.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Mal deine Seite verlinken. Ich werde mir kaum die Mühe machen (und andere womöglich auch nicht), dein Problem erstmal mühsam nachzubauen.
Alles klar, ich hab mal die Navileiste, so wie ich sie im Moment gebaut habe hochgeladen. Habe den Rest der Seite bewusst weggelassen, damit es möglichst nur das Problem zeigt.
Findest Du unter: http://www.schlossbogen.de/test/
Wie gesagt - das ist im Moment lediglich ne Testversion, daher ist das CSS sicherlich noch sehr optimierungs- bzw. verbesserungswürdig, aber mir ging es primär darum, gewisse Dinge zu testen. Und bei der einen Sache klappt's halt leider nicht so wie ich es mir vorstelle... (-> a:hover)Der ganze Rest funzt schon wunderbar...
Wobei ich ja mittlerweile glaube, dass es besser wäre, das ganze über ne UL zu machen... ;) Allerdings krieg ich's damit nicht so wirklich hin. Ich will auch bewusst diese hovers nicht über onmouseover und onmouseout machen. Das hatte ich mal getestet, allerdings wären mir normale Textlinks lieber als das ganze mit Bildern zu machen. (Also die Buttons schon vorher beschriftet und dann lediglich nen Austausch machen. Soweit ich weiß ist das für google nicht so dolle...?!)
-
@@Paradiesvogel:
nuqneH
Mal deine Seite verlinken.
Findest Du unter: http://www.schlossbogen.de/test/Sagte ich „den URI deiner Seite nennen“? Nein, ich sagte „deine Seite verlinken“.
Wie gesagt - das ist im Moment lediglich ne Testversion
Die schon einiges offenbart: Dein Server gibt im HTTP-Header keine Zeichencodierung an. Im Dokument gibst du als HTTP-EQUIV "ISO 8859-1" an, was wirkt, wenn dein XHTML als Tagsoup verarbeitet wird. Sollte es einmal irgendwie als XML verarbeitet werden, ist keine Angabe zur Zeichencodierung vorhanden, dann wird per Default UTF-8 angenommen, was zu Problemen führt. Für XML müsstest du die Zeichencodierung per XML-Deklaration angeben, was aber IE < 7 in den Quirksmode schickt.
Verwende als Zeichencodierung UTF-8! Damit kannst du dann auch wirklich alle im Deutschen gebräuchlichen Zeichen codieren; ISO 8859-1 ist dafür ungeeignet.
Desweiteren:
<a href="../index.htm" onfocus="[code lang=javascript]blur()">[/code] macht deine Seite per Tastatur unbenutzbar. Weg mit '@onfocus="blur()"'!Wobei ich ja mittlerweile glaube, dass es besser wäre, das ganze über ne UL zu machen... ;)
Ja, das ist sicher sinnvoller als weitere Zeit für den Tabellenkram zu vergeuden.
Die IDs für die einzelnen Menüpunkte sind nicht unbedingt notwendig, die einzelnen verschieden breiten Hintergrundbilder sind keinesfalls notwendig. Stattdessen: Sliding Doors.
BTW, die aktuelle Seite sollte nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
-
-
-
-
-
-
-
-
Das ist falsch. Jedes Menü ist eine Liste von Links, gehört also in ein ul - und dafür findest Du dann auch tausende fertiger Beispiele, die du relativ leicht an deine Bedürfnisse anpassen kannst - z. B. List-a-maticHTML validieren beim W3C-ValidatorCSS validieren beim W3C-CSS-Validator
Danke für den Link. Der ist sicherlich mal gut zum aufheben.
Ich hätte wohl noch eine wichtige Info dazu schreiben sollen, weshalb ich keine ul benutzt habe, sondern ein table. Die Buttons des Menüs haben unterschiedliche Breiten und müssen daher jeweils einzelne id's haben, damit ich jeweils für das hover ein entsprechendes background-image einsetzen kann. Und das funktioniert ja prinzipiell auch gut, bis auf die Tatsache, dass beim darüber fahren mit der Maus der Text in der Spalte nach oben springt und ich weiß nicht wie ich das beheben kann?! Soweit ich weiß, sind bei ul's die Buttons im Navmenü immer gleich groß, oder? (Kann auch sein, dass ich mich täusche - bin noch nicht der Vollprofi - man möge es mir verzeihen ;) )
Aber danke für eure Beteiligung. Freue mich auf weitere Anregungen...
-
-
@@Paradiesvogel:
nuqneH
}#tdstartseite a:hover {
background-image: url(tdstartseite.png);
width: 114px;
height: 40px;
margin: -1px;
}Abgehesen von dem Gemüffel ist es sicher keine gute Idee, 'a' und 'a:hover' unterschiedliche Werte für 'width', 'height' und 'margin' zu verpassen. Zumindest sollte man sich dann nicht über Rumspringen wundern.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)