nicht angemeldet
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
apsel
Patrick Andrieu
Der Martin
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hallo miteinander!
Ich habe im Footer meiner neuen Webseite drei Grafiken, die etwas aufgepeppte Texte sind (das hängt mit der CI der Firma zusammen, da ist die Hausschrift Univers). Aussehen soll das etwa so:
--------------------------------------------------
Blog | Übersicht | Impressum
--------------------------------------------------
Das Problem ist: Die Ü-Punkte bei Übersicht sind zwei Pixel über dem B von Blog und dem I von Impressum. Und genau um diese beiden Punkte ist das jetzt schief.
Ich hab alles mögliche probiert und stehe jetzt ziemlich auf dem Schlauch:
Nach wie vor verstehe ich nicht, warum es nicht geht, wenn man bei blog.png und impressum.png einfach zwei leere Pixel drauftut. Es ändert aber nichts am Ergebnis. Ich check es einfach nicht.
Ich habe auch versucht, einzelne IDs zu vergeben, aber aus Gründen, die ich ebenfalls nicht verstehe, gilt jeweils die ID mit dem größten Margin-Top für alle.
Der Code dafür ist so:
<div id="footer">
<div id="footer_btn">
<a href=""><img onMouseOver="this.src='img/blog_a.png'" onMouseOut="this.src='img/blog.png'" src="img/blog.png" width="25" height="21" alt="Blog"></a>
<a href =""><img src="img/vertical_line.png" alt="Seperator" width="2" height="18" /></a>
<a href =""><img src="img/uebersicht.png" alt="Übersicht" width="55" height="21" onMouseOver="this.src='img/uebersicht_a.png'" onMouseOut="this.src='img/uebersicht.png'" /></a>
<a href =""><img src="img/vertical_line.png" alt="Seperator" width="2" height="18" /></a>
<a href =""><img src="img/impressum.png" alt="Impressum" width="63" height="21" onMouseOver="this.src='img/impressum_a.png'" onMouseOut="this.src='img/impressum.png'" /></a>
</div>
</div>
Der CSS Code der folgende:
#footer {
height:48px;
background-image: url(img/footer.png);
background-repeat: repeat-x;
}
#footer_btn {
margin-right:50px;
float:right;
margin-top: 11px;
}
Bitte helft mit! Danke!
@@Mathias Treim:
nuqneH
Bitte helft mit!
Wie denn?
Ich sehe deine Grafiken nicht einmal in meiner Glaskugel.
Aber ich sehe, dass du die Separator-Grafiken gar nicht verlinken willst.
Und ich sehe, dass es zu viele Grafiken sind. Die optimale Anzahl wäre 1 – entweder Imagemap oder CSS-Sprites.
Qapla'
Danke für deine Antwort.
Hier ist ein Beispiel Link:
http://digitale-avantgarde.com/files/test.html
Wenn ich eine Imagemap mache, wird das ganze ja nicht mehr WAI-Tauglich, außerdem kann ich dann keine richtigen Hoover Effekte mehr machen...
Hallo,
Danke für deine Antwort.
wessen Antwort? Wenn du Gunnars Beitrag meinst, antworte doch bitte auch direkt auf den und nicht auf dein eigenes Originalposting.
Hier ist ein Beispiel Link:
http://digitale-avantgarde.com/files/test.html
Das ist kein Link. Das ist einer: http://digitale-avantgarde.com/files/test.html
Und da sieht man das Problem deutlich: Die Grafiken sind unterschiedlich beschnitten. Beim Wort "Impressum", das keine Unterlängen hat, wurde der Platz, der eigentlich für Unterlängen reserviert ist, gleich mit weggeschnitten. Kein Wunder, dass dieses Wort dann vertikal versetzt erscheint.
So long,
Martin
@@Der Martin:
nuqneH
Das ist kein Link. Das ist einer: http://digitale-avantgarde.com/files/test.html
Und so wird’s gemacht. Oder per „Formatierungen einfügen: [Link]“
--
Lieber Blödeleien als blöde Laien.
Qapla'
Wie schön.
@@Der Martin wiederholt das Problem, dass ich geschildert habe und der Gunnar gibt seinen Senf dazu.
Lösungen gibt es nicht? Wie kann ich die Verschnitte so positionieren, dass es wieder stimmt?
@@Der Martin:
nuqneH
Das ist kein Link. Das ist einer: http://digitale-avantgarde.com/files/test.html
Und so wird’s gemacht. Oder per „Formatierungen einfügen: [Link]“
--
Lieber Blödeleien als blöde Laien.Qapla'
Om nah hoo pez nyeetz,
Wie schön.
@@Der Martin wiederholt das Problem, dass ich geschildert habe und der Gunnar gibt seinen Senf dazu.
Ich finde Martins Lösung schon richtig gelungen.
Übersetzung: Bearbeite die Grafiken so, dass die Texte in der selben Höhe liegen.
Matthias
Entschuldigung: Ich habe gar keine große Klappe. Außerdem ist das gar nicht meine Domain.
Hier scheint auch nicht die große Ahnung zu herrschen, da bisher nur Belehrungen kamen und keine konstruktiven Tipps obwohl ich eigentlich eine recht ausführlich gestellte Frage gestellt habe.
Inzwischen hab ich's auch gelöst.
Om nah hoo pez nyeetz,
Wie schön.
@@Der Martin wiederholt das Problem, dass ich geschildert habe und der Gunnar gibt seinen Senf dazu.
Ich finde Martins Lösung schon richtig gelungen.
Übersetzung: Bearbeite die Grafiken so, dass die Texte in der selben Höhe liegen.
Matthias
Hi,
Hier scheint auch nicht die große Ahnung zu herrschen, da bisher nur Belehrungen kamen und keine konstruktiven Tipps
Wenn du nicht in der Lage bist, aus der Erklärung der Ursache eines Problems selbstständig die (/eine) Lösung zu erarbeiten, ist das nicht unsere Schuld.
MfG ChrisB
Hallo Mathias!
Entschuldigung: Ich habe gar keine große Klappe.
Dafür nimmst Du aber den Mund sehr voll.
Hier scheint auch nicht die große Ahnung zu herrschen
Hier herrscht mehr Ahnung als Du zu ahnen in der Lage bist.
obwohl ich eigentlich eine recht ausführlich gestellte Frage gestellt habe.
Das stimmt. Dafür hast Du die Tipps nicht beherzigt.
Oder doch?
Viele Grüße aus Frankfurt/Main,
Patrick
Welche Tipps?
Der?
Und da sieht man das Problem deutlich: Die Grafiken sind unterschiedlich »» beschnitten. Beim Wort "Impressum", das keine Unterlängen hat, wurde der »» Platz, der eigentlich für Unterlängen reserviert ist, gleich mit
weggeschnitten. Kein Wunder, dass dieses Wort dann vertikal versetzt
erscheint.
Dazu zitiere ich mal aus meiner Frage:
Nach wie vor verstehe ich nicht, warum es nicht geht, wenn man bei
blog.png und impressum.png einfach zwei leere Pixel drauftut. Es ändert
aber nichts am Ergebnis.
Das hatte ich schon probiert. Whatsoever, mault euch gegenseitig an, ich hab es ja schon gelöst.
Danke trotzdem.
Hallo Mathias!
Entschuldigung: Ich habe gar keine große Klappe.
Dafür nimmst Du aber den Mund sehr voll.
Hier scheint auch nicht die große Ahnung zu herrschen
Hier herrscht mehr Ahnung als Du zu ahnen in der Lage bist.
obwohl ich eigentlich eine recht ausführlich gestellte Frage gestellt habe.
Das stimmt. Dafür hast Du die Tipps nicht beherzigt.
Oder doch?
Viele Grüße aus Frankfurt/Main,
Patrick
@@Mathias:
nuqneH
ich hab es ja schon gelöst.
Aber suboptimal.
Dafür hast Du die Tipps nicht beherzigt.
Welche Tipps?
Zum Beispiel diesen, nicht 4 Grafikdateien zu verwenden, sondern eine.
Für den Hover-Effekt (ein O!) benutzt du ja schon CSS-Sprites: "blogBLOG", "übersichtÜBERSICHT", "impressumIMPRESSUM". (Die Klein-/Großschreibung soll die Textvarianten für nicht gehovert/gehovert symbolisieren.) Wobei die Anordnung untereinander sinnvoller wäre
blog
BLOG
etc., dann hättest du nicht jeweils unteschiedliche Werte für den horizontalen Versatz, sondern für alle den gleichen vertikalen Versatz. Und dabei musst du nicht einmal Pixel zählen, sondern kannst "top" und "bottom" verwenden. Hm, du hättest auch bei deiner Anordnung "left" und "right" verwenden können, aber:
Genauso, wie du jeweils beide Textgrafiken "blogBLOG" usw. in jeweils einer Grafikdatei hast, kannst du auch gleich alle Texte und den Separator in einer Grafikdatei unterbringen:
blog|übersicht|impressum
BLOG|ÜBERSICHT|IMPRESSUM
'background-position' in x liefert den entsprechenden Text; in y die Textvariante für nicht gehovert/gehovert.
Wobei du für den Hover-Effekt gar keine verschiedenen Textvarianten als Grafik bräuchtest; er ließe sich auch mit der 'opacity'-Eigenschaft realisieren.
Qapla'
PS: Und den Tip mit „kein TOFU“ hast du auch nicht verstanden?
@@Mathias:
nuqneH
ich hab es ja schon gelöst.
Aber suboptimal.
Dafür hast Du die Tipps nicht beherzigt.
Welche Tipps?Zum Beispiel diesen, nicht 4 Grafikdateien zu verwenden, sondern eine.
Für den Hover-Effekt (ein O!) benutzt du ja schon CSS-Sprites: "blogBLOG", "übersichtÜBERSICHT", "impressumIMPRESSUM". (Die Klein-/Großschreibung soll die Textvarianten für nicht gehovert/gehovert symbolisieren.) Wobei die Anordnung untereinander sinnvoller wäre
blog
BLOG
etc., dann hättest du nicht jeweils unteschiedliche Werte für den horizontalen Versatz, sondern für alle den gleichen vertikalen Versatz. Und dabei musst du nicht einmal Pixel zählen, sondern kannst "top" und "bottom" verwenden. Hm, du hättest auch bei deiner Anordnung "left" und "right" verwenden können, aber:Genauso, wie du jeweils beide Textgrafiken "blogBLOG" usw. in jeweils einer Grafikdatei hast, kannst du auch gleich alle Texte und den Separator in einer Grafikdatei unterbringen:
blog|übersicht|impressum
BLOG|ÜBERSICHT|IMPRESSUM
'background-position' in x liefert den entsprechenden Text; in y die Textvariante für nicht gehovert/gehovert.Wobei du für den Hover-Effekt gar keine verschiedenen Textvarianten als Grafik bräuchtest; er ließe sich auch mit der 'opacity'-Eigenschaft realisieren.
Qapla'
PS: Und den Tip mit „kein TOFU“ hast du auch nicht verstanden?
Das mit dem TOFU habe ich tatsächlich nicht verstanden (hoffe jetzt wird es richtig).
Danke für deinen Tipp. Ich verstehe noch nicht so ganz, woher der Browser dann weiß, wo er gerade drüber ist, aber ich lese mich mal noch ein bisschen in die CSS Sprites ein. Es ließe sich doch dann nur "ALle aktiviert" bzw. "nicht aktiviert" anzeigen, oder?
Grundsätzlich finde ich diese Sache mit den Sprites allerdings nicht so toll, weil es Dinge, die eigentlich nicht im Hintergrund sind (die Navigation ist ja schon wichtig), als Hintergrund kennzeichnet (background-url). Barrierefrei ist das ja nicht gerade.
Die Idee mit der Opacity gefällt mir sehr gut.
Danke!
@@Mathias:
nuqneH
Das mit dem TOFU habe ich tatsächlich nicht verstanden (hoffe jetzt wird es richtig).
Nicht wirklich. FOTU ist auch nicht besser. Zitiere bitte sinnvoll, nicht alles.
Danke für deinen Tipp. Ich verstehe noch nicht so ganz, woher der Browser dann weiß, wo er gerade drüber ist
Die 3 Links sind doch 3 verschiedene 'a'-Elemente. Da weiß der Browser schon, über welchem der Mauszeiger ist. Bzw. welches den Fokus hat. An Navigation per Tastatur hast du gedacht?
Es ließe sich doch dann nur "ALle aktiviert" bzw. "nicht aktiviert" anzeigen, oder?
Nein.
Grundsätzlich finde ich diese Sache mit den Sprites allerdings nicht so toll, weil es Dinge, die eigentlich nicht im Hintergrund sind (die Navigation ist ja schon wichtig), als Hintergrund kennzeichnet (background-url). Barrierefrei ist das ja nicht gerade.
Ja, deinen Links fehlt der Linktitel: bspw. <a id="blog_btn" href="#">Blog</a>. Beschäftige dich mit Image-Replacement-Techniken!
Qapla'
Nicht wirklich. FOTU ist auch nicht besser. Zitiere bitte sinnvoll, nicht alles.
So?
Ja, deinen Links fehlt der Linktitel: bspw.
<a id="blog_btn" href="#">Blog</a>. Beschäftige dich mit Image-Replacement-Techniken!Qapla'
Danke. Ich habe mir den Artikel durchgelesen, der sehr gut ist. Das werde ich mal versuchen umzusetzen.
Hi,
@@Der Martin wiederholt das Problem, dass ich geschildert habe und der Gunnar gibt seinen Senf dazu.
Für jemanden, der trotz eines Beispiels unter einem Domainnamen, der eigentlich höhere Erwartungen weckt, so wenig Ahnung hat, hast du eine ganz schön grosse Klappe.
MfG ChrisB
Hallo,
@@Der Martin wiederholt das Problem, dass ich geschildert habe und der Gunnar gibt seinen Senf dazu.
wenn du feststellst, dass es im Zimmer zieht, reicht es dir also nicht, dass jemand feststellt: Das Fenster ist offen. Du brauchst anscheinend den Imperativ: Mach das Fenster zu.
Lösungen gibt es nicht?
Die Problemanalyse ist doch schon der wesentliche Schritt zur Lösung. Den letzten kleinen Denkschritt hatte ich dir schon zugetraut.
Wie kann ich die Verschnitte so positionieren, dass es wieder stimmt?
Entweder schneide die Grafiken gleich so zu, dass sie auf den abgebildeten Text bezogen alle die gleichen Maße haben, oder gleiche die zuviel abgeschnittenen Ränder durch entsprechende Margins aus.
@@Der Martin:
[...]
Qapla'
Und das nächste Mal bitte kein TOFU. Danke.
Ciao,
Martin
@@Der Martin:
nuqneH
--
Lieber Blödeleien als blöde Laien.
Lieber blöde Laien als blöde Leyen.
So, genug geblödelt.
Qapla'
@@Mathias Treim:
nuqneH
Wenn ich eine Imagemap mache, wird das ganze ja nicht mehr WAI-Tauglich
Warum sollte es das nicht sein? @alt für 'area' existiert.
außerdem kann ich dann keine richtigen Hoover Effekte mehr machen...
Auch das ist falsch. JavaScript macht’s möglich.
Qapla'
@@Mathias Treim:
nuqneH
Hoover Effekte
Den Blitz-blank-Effekt hätte ich bei mir auch gerne. Wenn du bei dir fertig bist, kommst du dann bitte bei mir staubsaugen?
Und bei zusammengesetzten Substantiven, die nicht zusammengeschrieben sind, steht im Deutschen ein Bindestrich, kein Deppenleerzeichen.
Qapla'
Hallo Gunnar!
Den Blitz-blank-Effekt hätte ich bei mir auch gerne. Wenn du bei dir fertig bist, kommst du dann bitte bei mir staubsaugen?
Wenn er mit einem Gerät der britischen Marke kommt, lieber nicht! ;)
Viele Grüße aus Frankfurt/Main,
Patrick
@@Patrick Andrieu:
nuqneH
Wenn er mit einem Gerät der britischen Marke kommt, lieber nicht! ;)
Wenn er verspricht, mit einem Hoover daherzukommen, dann bestehe ich auch auf diesen.
Qapla'
