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

Chriz · 07.01.2010, 21:51

Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<base href="http://digitale-avantgarde.com/files/" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title lang="de">Titel</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id="footer"> 
		<div id="footer_btn">
			<div style="float:left;margin-top:3px"><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></div>
			<div style="float:left;margin:3px 5px 0 5px"><a href =""><img src="img/vertical_line.png" alt="Seperator" width="2" height="18" /></a></div>
			<div style="float:left;margin-top:0px"><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></div>
			<div style="float:left;margin:3px 5px 0 5px"><a href =""><img src="img/vertical_line.png" alt="Seperator" width="2" height="18" /></a></div>
			<div style="float:left;margin-top:3px"><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>
		<br style="clear:left" />
	</div>
</body>
</html>

shredding · 07.01.2010, 23:17

Wusst ich doch das ich hier richtig bin!!!

Mit einer gewürzten Mischung aus allen Antworten habe ich das Problem nun elegant und auch ohne JavaScript gelöst!

Anschließende Frage: Der WAI Validator vom We Developer des Feuerfüchschens meckert zwar nicht, aber: Wie krieg ich es hin, dass die Links für Blinde nicht unsichtbar sind? Gibt es da eine Möglichkeit? Ich recherchiere jetzt mal selbst, aber vielleicht weiß ja einer was.

Vielen Dank an Alle!!!

Lösung:

Test

Chriz · 07.01.2010, 23:28

Zitat:

Zitat von shredding

Wie krieg ich es hin, dass die Links für Blinde nicht unsichtbar sind?

Wenn du einen Blinden wieder zum Sehen verholfen hast lass es uns wisssen.

shredding · 07.01.2010, 23:31

Ich denke, du weißt was ich meine

nikosch · 07.01.2010, 23:52

Setz mal background-repeat auf none. Man sieht die sich wiederholenden Oberlängen bei mir. Und wie gesagt - ich würde zu Sprites (also alle Items in einem Bild) raten. Der Grund steht oben im Link. Für Screenreader solltest Du
- UL-Listen verwenden
- die Texte mit CSS nach links ins Nirvana verschieben. (Negativer Margin)
-- dafür gibts aber verschiedene Ansätze, weil auch das nicht 100pro barrierefrei ist. *Quelle such*

[edit]
*Quelle find*: http://css-tricks.com/css-image-replacement/

shredding · 12.01.2010, 22:31

Danke.

Ich habe es jetzt mit der Phark Methode gelöst. Außerdem habe ich alles in ein PNG gepackt.

Perfekt.

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


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

07.01.2010, 23:17
shredding Benutzer Registriert seit: 17.11.2009 Beiträge: 71 PHP-Kenntnisse: Anfänger	Wusst ich doch das ich hier richtig bin!!! Mit einer gewürzten Mischung aus allen Antworten habe ich das Problem nun elegant und auch ohne JavaScript gelöst! Anschließende Frage: Der WAI Validator vom We Developer des Feuerfüchschens meckert zwar nicht, aber: Wie krieg ich es hin, dass die Links für Blinde nicht unsichtbar sind? Gibt es da eine Möglichkeit? Ich recherchiere jetzt mal selbst, aber vielleicht weiß ja einer was. Vielen Dank an Alle!!! Lösung: Test

07.01.2010, 23:31
shredding Benutzer Registriert seit: 17.11.2009 Beiträge: 71 PHP-Kenntnisse: Anfänger	Ich denke, du weißt was ich meine

07.01.2010, 23:52
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Setz mal background-repeat auf none. Man sieht die sich wiederholenden Oberlängen bei mir. Und wie gesagt - ich würde zu Sprites (also alle Items in einem Bild) raten. Der Grund steht oben im Link. Für Screenreader solltest Du - UL-Listen verwenden - die Texte mit CSS nach links ins Nirvana verschieben. (Negativer Margin) -- dafür gibts aber verschiedene Ansätze, weil auch das nicht 100pro barrierefrei ist. Quelle such [edit] Quelle find: http://css-tricks.com/css-image-replacement/ __________________ -- 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 23:57 Uhr).

12.01.2010, 22:31
shredding Benutzer Registriert seit: 17.11.2009 Beiträge: 71 PHP-Kenntnisse: Anfänger	Danke. Ich habe es jetzt mit der Phark Methode gelöst. Außerdem habe ich alles in ein PNG gepackt. Perfekt.