[Erledigt] Als Grafik gespeicherte Texte mit verschiedene Grundlinie auf gleiche Höhe

shredding · 07.01.2010, 21:12

Dies ist ja eigentlich kein HTML Forum, aber bei selfhtml werde ich die ganze Zeit belehrt, weil ich einen Fehler bei der Forumsnutzung gemacht habe und weitergeholfen wird mir dort nicht... (Link)

Hier habe ich ja bisher gute Erfahrungen gemacht. Daher schildere ich mein Problem erneut.

Am deutlichsten wird es wenn man hier auf die Testfile schaut:

Ich habe mehrere Schriften als Grafik, die zwar gleich hoch sind, aber ihre Grundlinie an verschiedenen Stellen haben. Wie bekomme ich die nun gleichmäßig formatiert?

Zunächst der (betreffende) HTML Code (der Übersicht wegen ohne Javascript):

Code:

<div id="footer"> 
  <div id="footer_btn">
    <a href=""><img 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" /></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" /></a>
    </div>
</div>

Und der relevante CSS:

Code:

#footer {
  height:48px;
  background-image: url(img/footer.png);
  background-repeat: repeat-x;
}

#footer_btn {
  margin-top:10px;
  margin-right:47px;
  float:right;
}

Probiert habe ich schon folgendes:
- es geht nicht, wenn man bei blog.png und impressum.png einfach zwei leere Pixel drauftut. Es ändert nichts am Ergebnis.

- Ich habe auch versucht, einzelne IDs zu vergeben, aber aus Gründen, die ich nicht verstehe, gilt jeweils die ID mit dem größten Margin-Top für alle.

Ideen?

Danke!

Flor1an · 07.01.2010, 21:23

Das ist schwierig mit <img> Tags. Entweder du bearbeitest die Bilder sodass sie von Haus aus die selbe Grundlinie haben oder du musst dein HTML umstrukturieren.

Dazu könntest du den <a> Link als Blockelement darstellen (display: block

und ihm die Höhe/Breite des Bildes geben. Dazu noch das Bild als Hintergrundbild setzen. Dann kannst du das Hintergrundbild mit "background-position: <x>px <y>px;" verschieben. Einfach einen negativen x Wert angeben um das Bild um x Pixel nach oben zu verschieben.

shredding · 07.01.2010, 21:26

Hm. Da geht aber die Barrierefreiheit flöten?

Das Problem ist ja, dass ich nicht weiß wie ich die Grafiken entsprechend bearbeiten soll. Ich glaube ich habe da einen Logikfehler: Die Grafiken sind auch dann nicht auf gleicher Höhe, wenn ich in PS zwei transparente Pixel oben drauf tue...

Wenn ich gar keine Lösung finde, würde ich halt die Grafiken einfach mit dem Gradient im Hintergrund exportieren. Aber das wäre ja unelegant.

Chriz · 07.01.2010, 21:28

Schau dir mal den Wikieintrag Typografie an:
Typografie – Wikipedia
Deine Grafiken könnten als Beispiel auch gut herhalten, da ein Text keine Unterlänge (Übersicht), dafür aber mit der k-Linie einen Überhang über der Oberlänge besitzt (Übersicht). Die Texte sind also denkbar ungeeignet, um sie ohne manuelle Korrektur nebeneinander anzuordnen.

Du kannst den Ausgleich über die Grafik oder über ein padding-top herstellen. Da alle Buttons einheitlich sein sollten, auch was die Fokusierung angeht, würde ich die Grafik bearbeiten.

padding-top kannst du anwenden, in dem du jeder Grafik einen <div> zuweist (optional) und diesem dann die manuellen padding-top-Werte zuweist.

Zitat:

Zitat von shredding

Das Problem ist ja, dass ich nicht weiß wie ich die Grafiken entsprechend bearbeiten soll. Ich glaube ich habe da einen Logikfehler: Die Grafiken sind auch dann nicht auf gleicher Höhe, wenn ich in PS zwei transparente Pixel oben drauf tue...

Na gut Grundkenntnisse in Paintbrush oder Photoshop solltest du halt schon haben. Transparente Ränder werden von Grafikprogrammen gelegentlich automatisch entfernt (z.B. auch beim Copy&Paste der Grafik in Photoshop). Du musst eben notfalls mit Einfärbung das Speichern der hinzugefügten Pixel erzwingen.

nikosch · 07.01.2010, 21:33

Wenn nicht mach aus den Grafiken gefloatete block-Elemente und versuchs mit vertical-align auf #footer_btn.

[edit] Hmm, mit firebug klappts so nicht.
Aber eine andere Idee: Benutze doch einfach Sprites und setze die Dinger als background-image. Vorne machst Du schön eine semantisch korrekte ul-Liste mit Textelementen, die Du nachträglich ausblendest.

shredding · 07.01.2010, 21:40

Zitat:

Zitat von Chriz

Na gut Grundkenntnisse in Paintbrush oder Photoshop solltest du halt schon haben. Transparente Ränder werden von Grafikprogrammen gelegentlich automatisch entfernt (z.B. auch beim Copy&Paste der Grafik in Photoshop). Du musst eben notfalls mit Einfärbung das Speichern der hinzugefügten Pixel erzwingen.

Ich hab Grundkenntnisse, sogar etwas mehr. Das Problem besteht auch, wenn ich ganz weiße Blöcke verwende.

Die beiden vorgeschlagenen Lösungen führen dazu, dass die Buttons untereinander angezeigt werden (wobei ich bei der zweiten auch nicht weiß auf was ich float und vertical-align stellen muss)

shredding · 07.01.2010, 21:40

Ich denke mal, ich werde einfach den ganzen Gradient im Hintergrund mit exportieren und gut ist.

nikosch · 07.01.2010, 21:43

Siehe edit.

shredding · 07.01.2010, 21:48

Zitat:

Zitat von nikosch

Aber eine andere Idee: Benutze doch einfach Sprites und setze die Dinger als background-image. Vorne machst Du schön eine semantisch korrekte ul-Liste mit Textelementen, die Du nachträglich ausblendest.

Das klingt interessant, dass schaue ich mir mal näher an! Thx.

nikosch · 07.01.2010, 21:50

Aber denk dran, bei den Abständen die Grundlinie zu benutzen!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Grafik aus Form ausgelesen: Wie Infos über Breite, Höhe		PHP Tipps 2004	0	13.08.2004 12:14

07.01.2010, 21:12
shredding Benutzer Registriert seit: 17.11.2009 Beiträge: 71 PHP-Kenntnisse: Anfänger	[Erledigt] Als Grafik gespeicherte Texte mit verschiedene Grundlinie auf gleiche Höhe Dies ist ja eigentlich kein HTML Forum, aber bei selfhtml werde ich die ganze Zeit belehrt, weil ich einen Fehler bei der Forumsnutzung gemacht habe und weitergeholfen wird mir dort nicht... (Link) Hier habe ich ja bisher gute Erfahrungen gemacht. Daher schildere ich mein Problem erneut. Am deutlichsten wird es wenn man hier auf die Testfile schaut: Ich habe mehrere Schriften als Grafik, die zwar gleich hoch sind, aber ihre Grundlinie an verschiedenen Stellen haben. Wie bekomme ich die nun gleichmäßig formatiert? Zunächst der (betreffende) HTML Code (der Übersicht wegen ohne Javascript): Code: <div id="footer"> <div id="footer_btn"> <a href=""><img 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" /></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" /></a> </div> </div> Und der relevante CSS: Code: #footer { height:48px; background-image: url(img/footer.png); background-repeat: repeat-x; } #footer_btn { margin-top:10px; margin-right:47px; float:right; } Probiert habe ich schon folgendes: - es geht nicht, wenn man bei blog.png und impressum.png einfach zwei leere Pixel drauftut. Es ändert nichts am Ergebnis. - Ich habe auch versucht, einzelne IDs zu vergeben, aber aus Gründen, die ich nicht verstehe, gilt jeweils die ID mit dem größten Margin-Top für alle. Ideen? Danke!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

07.01.2010, 21:23
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	Das ist schwierig mit <img> Tags. Entweder du bearbeitest die Bilder sodass sie von Haus aus die selbe Grundlinie haben oder du musst dein HTML umstrukturieren. Dazu könntest du den <a> Link als Blockelement darstellen (display: block und ihm die Höhe/Breite des Bildes geben. Dazu noch das Bild als Hintergrundbild setzen. Dann kannst du das Hintergrundbild mit "background-position: <x>px <y>px;" verschieben. Einfach einen negativen x Wert angeben um das Bild um x Pixel nach oben zu verschieben.

07.01.2010, 21:26
shredding Benutzer Registriert seit: 17.11.2009 Beiträge: 71 PHP-Kenntnisse: Anfänger	Hm. Da geht aber die Barrierefreiheit flöten? Das Problem ist ja, dass ich nicht weiß wie ich die Grafiken entsprechend bearbeiten soll. Ich glaube ich habe da einen Logikfehler: Die Grafiken sind auch dann nicht auf gleicher Höhe, wenn ich in PS zwei transparente Pixel oben drauf tue... Wenn ich gar keine Lösung finde, würde ich halt die Grafiken einfach mit dem Gradient im Hintergrund exportieren. Aber das wäre ja unelegant.

07.01.2010, 21:33
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wenn nicht mach aus den Grafiken gefloatete block-Elemente und versuchs mit vertical-align auf #footer_btn. [edit] Hmm, mit firebug klappts so nicht. Aber eine andere Idee: Benutze doch einfach Sprites und setze die Dinger als background-image. Vorne machst Du schön eine semantisch korrekte ul-Liste mit Textelementen, die Du nachträglich ausblendest. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (07.01.2010 um 21:41 Uhr).

07.01.2010, 21:40
shredding Benutzer Registriert seit: 17.11.2009 Beiträge: 71 PHP-Kenntnisse: Anfänger	Ich denke mal, ich werde einfach den ganzen Gradient im Hintergrund mit exportieren und gut ist.

07.01.2010, 21:43
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Siehe edit. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

07.01.2010, 21:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Aber denk dran, bei den Abständen die Grundlinie zu benutzen! __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --