[CSS] Logo sicher einbinden

[Squart]

Hallo,

zur Zeit bin ich wieder mal am CSSen und HTMLen. Vor einigen Wochen habe ich mir das Buch "Bulletproof WebDesign" gekauft, wobei ich nun versuche, möglichst genau auf alle Eventualitäten die Webseite vorzubereiten.

Zur Zeit sieht bei mir der Code des Logos standardmäßig aus:

<div id="logo">
			Logo
		</div>

und in CSS:

#logo {
	display: block;
	width: 200px;
	height: 244px;
	text-indent: -999em;
	background: url(logo.gif) no-repeat;
}

Also wird der Text nicht von modernen Browsern angezeigt, welche CSS verarbeiten können, Textreader zeigen dafür nur den Text an.

Soweit so gut, das Problem welches ich nun habe sind die Leute, welche das Laden der Bilder in einem Browser deaktivieren der auch CSS verarbeiten kann, z.B. weil sie eine langsame Verbindung haben. Somit wird weder Text noch Logo angezeigt, was ich mehr als ungünstig finde. Der Textzug des Logos ist Copperplate und sollte keinesfalls eine andere Schrift haben, ansonsten hätte man ihn einfach unterhalb des Logos als Teil des gleichen positionieren können.
Habt ihr eine Idee, wie diese den Text dennoch lesen könnten?

 

[supermario]

es gibt bestimmt mehrere lösungen. eine wäre...
im html:

<div id="logo">logo<span></span></div>

im css:

#logo  {
	display: block;
	width: 200px;
	height: 244px;
        position:relative;
	text-indent: -999em;
        overflow: hidden;
}
#logo span {
	display: block;
	width: 200px;
	height: 244px;
        position:absolute;
	text-indent: -999em;
	background: url(logo.gif) no-repeat;
        left: 0px;
	top: 0px;
}

das logo sollte dabei aber nicht transparent sein

 

[Nathea]

Ich hatte auch einmal ein solches Konstrukt - mit Logo als Background eines <div> -eingebunden. Dabei habe ich dann auch festgestellt, dass - wenn ich die Seite hätte ausdrucken wollen - dieses Logo auch nicht mit gedruckt worden wäre. Zwei unterschiedliche css-styles für screen und print wollte ich mir hingegen "fürs Erste" nicht antun, daher habe ich selbst mich dann dazu entschieden, das Logo als <img> auf die Seite einzubinden und nicht als Hintergrund. So kann ich dem Bild via alt="" auch die entsprechende Bezeichnung "ordentlich" mitgeben. Sind allerdings ein paar mehr Textzeichen mehr pro Seite zu laden, das gebe ich zu.

Frage an die Fachleute hier:
Welchen Vorteil hat es denn überhaupt, das Logo als background einzubinden, anstatt es als <img> an diese Stelle zu setzen? Geladen werden muss das Bild selbst doch in jedem Falle nur einmal. Oder irre ich mich?

Lieben Gruß,
Nathea

 

[ciryx]

also ich weiß nicht ob es wirklich leute gibt die das laden der bilder ausschalten, und falls ja, dann gibts da halt nichts zu sehen.
Ich poste mal wie ich bei meiner Homepage den Header einbinde:

<h1>obsessive</h1>

h1 { 
  text-indent: -2000px; 
  margin: 0px; 
  width: 709px; 
  height: 91px; 
  background-image: url(gfx/head.jpg); 
  background-repeat: no-repeat;
}

Und warum man images als bgimg einbindet macht vlt zuerst keinen sinn, aber es befreit das html von unötigem quelltext und vereinfacht die ganze struktur, außerdem kann man dann ganz normal noch etwas über das bg image legen wie man es gewohnt ist.

 

[kauan]

Statt diesem background-image Rumgebastel kannst du doch einfach das alt-Attribute von img verwenden (das ja sowieso ein Pflichtattribut ist). Dann erscheint, falls das Bild nicht angezeigt wird/werden kann, wird dann der alt-Text ausgegeben (von der Fehlimplementierung des Internet Explorers, der das alt- als title-Attribute missbraucht, sehe ich an dieser Stelle ab...)
Dass der Schriftzug in einer bestimmten Schrift angezeigt werden muss, kannst du sowieso nicht erreichen. Zum einen gibt es diese Schrift nicht auf allen Systemen, zum anderen kann man auch das Aendern der Schriftart im Browser deaktivieren. Aber du kannst natuerlich alternative Schriftarten angeben, als letzte Angabe empfielt sich immer eine der generischen Schriftarten (sans-serif, serif...)

Gruss
Jonathan

 

[Nathea]

Statt diesem background-image Rumgebastel kannst du doch einfach das alt-Attribute von img verwenden (das ja sowieso ein Pflichtattribut ist).

Funktioniert das auch, wenn das img als Background eingebunden ist? Oder nur, wenn es ein "normales" Bild ist?

Gruß,
Nathea

 

[kauan]

Funktioniert das auch, wenn das img als Background eingebunden ist? Oder nur, wenn es ein "normales" Bild ist?

Nur mit dem img-Tag. In CSS gibt es ja soweit ich weiss kein alt.
Aber ich sehe ueberhaupt nicht ein, warum man hier ein background-image nehmen sollte.

 

[stk]

Moin,

als erstes verabschiede Dich von der Idee, das Du im Web zuverlässig Design transportieren kannst. Das Web transportiert nur Information zuverlässig.

Deshalb: egal wie Du es machst - mit <img> oder per CSS-background - es wird Leute geben, die werden dein hübsches Logo nicht zu sehen bekommen. Basta.

Gruß Stefan

 

[Nathea]

Deshalb: egal wie Du es machst - mit <img> oder per CSS-background - es wird Leute geben, die werden dein hübsches Logo nicht zu sehen bekommen. Basta.

Gruß Stefan

Ich hatte Squart so verstanden, dass die Seite auch für Leute, die Bilder nicht mögen, in jedem Falle "lesbar" sein sollte. Also sozusagen barrierefrei. Die Sichtbarkeit seines Logos hatte ich nicht für den Anlass dieses Threads gehalten.

Das schließt natürlich ein, dass man da, wo normalerweise Bilder erscheinen würden, einen erklärenden Text (Bezeichnung, Name oder wie man es auch nennen mag) finden soll.

Ich hoffe, ich interpretiere da nix falsch

Einen schönen Tag Euch allen,
lieben Gruß,
Nathea

 

[Nathea]

also ich weiß nicht ob es wirklich leute gibt die das laden der bilder ausschalten, und falls ja, dann gibts da halt nichts zu sehen.

Dann schließt Du bereits von vorn herein alle Internet-Nutzer aus, die sehschwach oder gar blind sind. Die können nämlich nur das auf der Seite "lesen" - sprich: erkennen - was in Textform hinterlegt ist.

Gruß,
Nathea

 

[stk]

Moin,

dann ist die Anwort einfach:

<img src="logo.gif" class="logo" alt="Erklärender Text für alle ohne Bilder" />

Spart das umstellende <div> weil über die Klasse eindeutig zu identifizieren (falls sogar seitenweit eindeutig könnte statt Klasse auch ID verwandt werden). Die Formatierungen die das Image braucht (Position, Höhe, Breite, Textfluß etc.) lassen sich dann in die CSS-Anweisung packen

Gruß Stefan

 

[ciryx]

Zitat:
Zitat von ciryx
also ich weiß nicht ob es wirklich leute gibt die das laden der bilder ausschalten, und falls ja, dann gibts da halt nichts zu sehen.

Dann schließt Du bereits von vorn herein alle Internet-Nutzer aus, die sehschwach oder gar blind sind. Die können nämlich nur das auf der Seite "lesen" - sprich: erkennen - was in Textform hinterlegt ist.

Schau dir mal meinen Code an, dann wirst du festellen, dass der prima barriere frei ist. Es wird nämlich der h1 text angezeigt wenn die css style deaktiviert sind. Es ging hier so wie ich es verstanden habe, um nicht eingeschränkte Internetbenutzer, die Bilder deaktivieren, weil sie eine sehr langsame verbindung besitzen....


Zum Problem zurück, wenn ihr das ganze so umsetzt wie ich es angedeutet habe, dann ist der text in h1 prima lesbar wenn das css deaktiviert ist. Das ganze könnt ihr euch hier mal anschauen:
http://obsessive.de/dev/

 

[Nathea]

Schau dir mal meinen Code an, dann wirst du festellen, dass der prima barriere frei ist. Es wird nämlich der h1 text angezeigt wenn die css style deaktiviert sind. Es ging hier so wie ich es verstanden habe, um nicht eingeschränkte Internetbenutzer, die Bilder deaktivieren, weil sie eine sehr langsame verbindung besitzen....

Hab geschaut. Mit CSS, ohne Bilder. Und habe mich gefragt, auf welcher Seite ich mich wohl befinden mag ... Die Überschriften und der Text würden mir da im Bedarfsfalle nicht viel weiter helfen. Es sei denn, man macht sich die (in meinen Augen unsinnige, "doppelt gemoppelte") Mühe, z.B. den Firmennamen noch einmal als Überschrift zu wiederholen, damit man sich orientieren könnte.

Aber wer macht das schon, wenn doch "normalerweise" das Firmenlogo exakt diese Info in ausreichendem Maße liefert?

Ansonsten hat man bei Dir keine Chance, der Seite weitere Infos zu entnehmen.
Probiers mal selbst aus

Da würde halt ein alt="" Text anstelle des Bildes irre helfen ...

Lieben Gruß,
Nathea

 

[ciryx]

wenn es um barriere frei geht, dann geht es darum die page ohne css anzuzeigen. nicht irgendwas komisches mit css aber ohne bilder

 

[Nathea]

wenn es um barriere frei geht, dann geht es darum die page ohne css anzuzeigen. nicht irgendwas komisches mit css aber ohne bilder

Wie ich in diversen Browsern "Bilder ausschalten" kann, weiss ich.

Aber wie geht "CSS ausschalten"?

 

[stk]

Moin,

WebDevAdditions für Safari, WebDeveloper Extension für Firefox.
Bzgl. Feedback zu Barrierefreiheit kann ich die Nachtflug-ML empfehlen: http://groups.yahoo.com/group/nachtflug/.

Bei allem guten Willen: Wir "Normalen" sind da nämlich ziemlich behindert, wenn's darum geht die Barrieren, die wir anderen beim webdesignen aufstellen, zu erkennen.

BTW: ein sehr schönes PlugIn für den Firefox ist auch »Fangs« - die Emulation eines Screenreaders.

Gruß Stefan

 

[ciryx]

in ff reicht einfach ansicht -> webseiten stil -> kein stil (css aus) / standard stil (css an)

schau es dir dann mal an, dann hast du wirklich nur den inhalt den du für barrierefreies web brauchst

 

[stk]

Moin,

mit Verlaub, Barrierefreiheit ist mehr als nur HTML ohne CSS!

Auch da gibt's einschlägige Validatoren für:

http://webxact.watchfire.com/

Allerdings gibt's hier noch reichlich mehr rückmeldungen verglichen mit den W3C-HTML/-CSS-Validatoren, da vieles was Barrierefreiheit ausmacht nicht einfach, automatisch auf »Ja« oder »Nein« abprüfbar ist.

Gruß Stefan

 

[Squart]

Vielen Dank schon einmal für eure Beiträge. Dass dies so eine Diskussion auslöst hätte ich nicht gedacht.
Ich werde sie nachher noch einmal durchgehen müssen weil mir jetzt nicht viel Zeit bleibt. Aber einige Beiträge sehen viel versprechend aus ^^.

Nur noch zur Bestätigung: CSS bleibt, Bilder sind aus, darauf bezieht sich die Frage (scheint sich aber im Laufe ja hier als Diskussionsthema durchgesetzt zu haben).

Also, ich melde mich heute Abend noch.

Viele Grüße
Squart

 

[Squart]

Vielen Dank

Guten Abend,

vielen Dank, ihr habt mir wirklich geholfen. Es sieht nun wirklich gut aus und funktioniert hervorragend. Habe es folgendermassen:

#logo {
	display: block;
	width: 200px;
	height: 244px;
	margin: 0;
	padding: 0;
	font-family: "Copperplate", serif;
	font-size: 200%;
}

<div id="logo">
	<img src="logo.gif" alt="Beschreibungstext" />
</div>

was ist toll finde: der Beschreibungstext wird auch formatiert. Vielen vielen Dank, ihr wart mir eine große Hilfe.