Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > background Grafik bei NS & Co.
| geschrieben von sobi am 29.05.2005 - 14:43 |
| Bevor ich hier viele Codezeilen zeige, versuch ich mal ein Problem zu erklären:: Ich hab eine HP geschrieben, bei der ein Button (jpg) als Hintergrund einer Tabellenzelle eingesetzt ist. Mit dem HOVER Befehl bei Links überlagere ich die Background Grafik mit einer anderen. Funzt im IE prima. Mit dem NS 7, FireFox und Opera gibts Probleme. Die überlagernde Grafik wird irgendwie nach oben verschoben und in der Buttondarstellung kommt unter dem nachgeladenen Button (160x25) eine Lücke von 1 oder 2 Pixel. Ich umgeh'/löse das Problem zZt. so, dass ich die Symbole auf den Buttons verkleinere und allen Buttons eine gleiche Flächenfarbe zuweise, so dass man es nicht sieht. Find ich wenig elegant, aber dann funzt die HP mit allen Browsern. Kennt jemand vielleicht den Grund für solche Verschiebungen, oder eine Lösung ???  Ich hab mal aufgeschnappt das soll an einem Boxenmodell liegen, was IE anders interpretiert als NS & Co. ?? Obwohl bei IE sind Original und nachgeladene Grafik deckungsgleich.MfG Uli |
| geschrieben von Matneu am 29.05.2005 - 20:58 |
| Hast Du mal eine Beispiel-Seite? Ich kann mir das schwer vorstellen. Könnte mir aber vorstellen, dass es an fehlenden/falschen top-, left-, margin- oder sonstigen Einstellungen liegt. Ich gehe davon aus, dass Du die Positionierung mit CSS machst!?! So far... Matthias |
| geschrieben von sobi am 30.05.2005 - 00:28 |
| Hier mal der Code: HTML:: <table> <tr> <td class="menue" width="160" height="25" background="grafics/lnk_btn_wht.jpg" valign="top"> <a href="../02-templates1.html" target="_top" onmouseover="parent.oben.logo.src='grafics/logo_bl.gif'" onmouseout="parent.oben.logo.src='grafics/logo_rd.gif'"> Home</a> </td> </tr> </table> CSS:: .menue a:hover{ background-image: url(grafics/lnk_btn_dot.jpg); width=160; height=25; letter-spacing: 0px; color: #909090; text-decoration:none; font-family: courier new, arial; font-size: 12pt } Probleme gibts mit der Grafik lnk_btn_dot.jpg. Die wird ausser in IE bei anderen Browsern 1-2 px kleiner/höher (???) nachgeladen. Ich hatte auch das Problem, dass NS7 die Grafiken manchmal nicht lädt, wenn ich das "letter-spacing: 0px" weglasse .Beispielseite: http://free.templates.sobers.de Bereich intro/more sets/Set BA/business i Auf der Beispielseite sieht man das Problem so nicht, weil ich es umschippert habe. Wenn Du willst, bau ich Dir da aber mal einen schwarzen Button in die weisse HP damit es deutlich wird. Say when. Vielleicht mach ich ja auch einen CSS Fehler den ich nicht bemerke. Die CSS Zeile stammt aus einer Veröffentlichung die ich ausprobiert habe. Ich hab wohl wo anders kürzlich gelesen, dass IE Rahmenränder anders interpretieren soll als die restlichen Browser. Das würde sich auch mit meinen Erfahrungen sonst decken, da gibt es bei Tabellen immer Verschiebungen, je nachdem mit welchem Browser ich sie anschaue. Aber vielleicht siehst Du ja mehr als ich und ich bin betriebsblind. MfG Uli PS: hab die HP mal in den Anhang getan. Die Codezeilen stehen in der Datei left.html und styles.css. cu |
| geschrieben von Matneu am 30.05.2005 - 00:42 | ||||||||
when  Kann es so nicht nachvollziehen. Aber dass der IE Probleme mit CSS hat ist keine Neuheit. Habe auch mal was von einem margin-Fehler gehört. Am einfachsten wäre es, wenn Du eine Seite lediglich mit dem Button erzeugst, wo nur das nötigste drauf ist. Für alle anderen: Das Beispiel befindet sich unter http://free.templates.sobers.de/bus....index.html , so muss man sich nicht kompliziert durchklicken.
ist übrigens kein vernünftiger CSS-Code. Was passiert, wenn Du das Hintergrundbild noch per
formatierst? Probieren geht über studieren. So far... Matthias |
| geschrieben von sobi am 30.05.2005 - 08:20 |
| Hier der Link zu einer reinen Testseite mit nur 1 Button :: http://www.sobers.de/AAA/index.html Bitte die Seite mal mit IE und NS oder FF aufrufen und bei NS/FF mit der Maus ganz links auf den schwarzen Button gehen. Bei IE funktioniert das Nachladen der Buttongrafik in den Tabellenrahmen, bei NS und FF wird der nachgeladene Button immer nur so groß dargestellt wie der zugehörige Text von dem Link (mit Lücke rechts und unten). Übrigens: wenn ich width und height in der CSS weglasse, macht auch IE Probleme (hab ich ausgetestet). Hier nochmal die Einträge in der zugehörigen CSS der Testdatei:: /* Schriftstile und Abstände */ body {background-color: #eCeDe7; color: black; font-family: courier new, arial; font-size: 12pt;} /* Links Menue (linke Seite) */ .menue a:link{color: #000000; text-decoration:none; font-family: courier new, arial; font-size: 12pt} .menue a:visited{color: #000000; text-decoration:none; font-family: courier new, arial; font-size: 12pt} .menue a:active{background-image: url(grafics/lnk_btn_non.jpg); width=160; height=25; letter-spacing: 0px; color: red; text-decoration:none; font-family: courier new, arial; font-size: 12pt} .menue a:hover{background-image: url(grafics/lnk_btn_dot.jpg); width=160; height=25; letter-spacing: 0px; color: #909090; text-decoration:none; font-family: courier new, arial; font-size: 12pt} Ich denke man kann das Problem so am Bildschirm sehen. Kennt zufällig jemand den Grund dafür ?? MfG Uli |
| geschrieben von Micha am 30.05.2005 - 08:41 |
| Hi ein display: block; sollte Dir afaik helfen Micha |
| geschrieben von Matneu am 30.05.2005 - 08:54 |
| geschrieben von sobi am 30.05.2005 - 13:22 |
| Erst mal Danke. bla:blub und display:block sind prinzipiell die richtigen Lösungen. Es taucht aber dann ein Folgeproblem auf:: --Es verschiebt sich die ganze Rahmenkonstruktion sichtbar beim Überfahren der Links mit der Maus im NS7 (nicht IE)-- Ich frag jetzt nur mal spasseshalber ob jemand das Problem so noch kennt. Hier ein Link zum Anschauen, die Macke mit dem Menue sieht man mit NS7 pp.:: http://www.sobers.de/AAA/index.html Als Lösung des Problems arbeite ich jetzt bei meiner HP mit dem display:block und lass width und height in der CSS weg. Ansonsten sind die Grafiken der Buttons so ausgelegt, dass man es in NS/FF/Opera nicht sieht. Die Verschiebungen beim Menu mit den letztgenannten Browsern kann ich leider nicht mehr nachvollziehen. Freundlichen Dank Uli |
| geschrieben von Matneu am 30.05.2005 - 14:00 |
| Ok, mal ein ganz anderer Weg: Warum definierst Du das ganze in einer Tabelle? Was passiert, wenn Du die Tabelle komplett rausnimmst, die a-Tags einfach hintereinander packst, ein <br /> hinter jedes Tag (alternativ clear:both) und die a-Tags dann definierst? Das sollte wesentlich einfacher sein und ich vermute mal, dass sich dann der Hintergrund auch vernünftig formatieren lässt. Sonst fiele mir noch ein, dass Du den Hintergrund per background:url(bla) top left no-repeat; So far... Matthias |
| geschrieben von Armin am 30.05.2005 - 14:31 |
| Guten Tag, da passen nicht die CSS-Angaben. Beim hover im Menue hast du die Angaben width:160; height:25 , beim einfachen a aber nicht, also muss es da nicht unbedingt 25 hoch sein.! Armin |
| geschrieben von sobi am 30.05.2005 - 17:26 |
| Dank Schützenhilfe aus allen Rohren funzt es jetzt auf der HP. Für die Interessierten; folgender Code muss in jeden Formatierungsblock für die Links a: - a:active - a:visited und a:hover :: display: block; width:160px; height:25px; Es macht keinen Unterschied, ob noch eine Grafik geladen wird oder nicht, Hauptsache die Höhe und Breite ist für alle Links gleich formatiert. Beim Nachladen der Grafik darf man wie gesagt das LETTER-SPACING :0PX nicht vergessen. Ich bekam ohne Probleme. Der Dank gebührt wie gesagt Allen. MfG Uli  |
| geschrieben von sobi am 30.05.2005 - 17:38 | ||||
Die HP ist über CSS und Grafiktausch skinbar. Es werden bei den Varianten verschiedene Buttonaufrufe über die CSS gesteuert ohne in den Quellcode der Seiten einzugreifen. Außerdem ist die HP für Einsteiger gedacht. Die Styles lassen sich nur durch Tausch der CSS Datei und des Grafik Ordners ändern. Unterstützt werden auch User die sich noch keine Grafik Buttons selber machen können, sondern die Buttons per Text beschriften. Ich mach solche Geschichten aus Freude an der Sache, die gibt's dann zum freien Download. Ist halt was für Einsteiger. cu Uli  |