Variable div-Höhe

[Casablanca]

Hallo,

ich habe ein div-Element mit einem Hintergrundbild. Das Bild ändert seine Größe, wenn die Browser-Größe sich ändert. Das Problem ist, dass die Höhe des div sich mit verändern muss, was nicht passiert und somit der Abstand des Bildes zu den darunter stehenden Elementen immer größer wird, wenn der Browser verkleinert wird.

Nun muss das div-Element, das kein Inhalt außer einem Hintergrundbild hat, eine Anfangsgröße haben. Es muss sich aber mit dem Hintergrundbild verkleinern, wenn der Browser-Größe sich ändert.

div #logo {
    width: 100%;
    height: 200px;
    border: 1px solid lightgray;
    background-image: url('../Content/images/m3_header.jpg');
    background-repeat: no-repeat;
    background-size: contain;
}

<div id="logo"></div>
Abstand z.B. 20px
<div>Ein anderes Element</div>

Danke im Voraus. Gruß

[Gunnar Bittersmann]

@@Casablanca

das div-Element, das kein Inhalt außer einem Hintergrundbild hat

Das ist wohl der Fehler.

Das Logo gehört ins Markup: <img src="{path}/m3_header.jpg" alt="{Logo}"/>

Und vermutlich ist für ein Logo SVG besser geeignet als JPEG.

LLAP 🖖

[Casablanca]

Hallo Gunnar,

danke für die Antwort. So ist das Bild dann aber kein Hintergrundbild mehr, sondern ein Bild, das in einem div eingebettet ist. Das Bild soll seine Größe responsive ändern, wie auch das div-Element.

Gruß

[Gunnar Bittersmann]

@@Casablanca

So ist das Bild dann aber kein Hintergrundbild mehr, sondern ein Bild, das in einem div eingebettet ist. Das Bild soll seine Größe responsive ändern, wie auch das div-Element.

Wobei beides nichts miteinander zu tun hat. Ob das Bild ein Hintergrundbild ist oder ins Markup gehört, hängt allein davon ab, ob es schmückende Dekoration ist oder ob es zum Seiteninhalt gehört. Bei einem Logo würde ich stark letzeres annehmen.

Und die Größe eines Bildes kann sich auch der Vieportgröße anpassen. Für <img id="logo" …/>:

#logo
{
	width: 42%;
	min-width: 4.2rem;
}

Ein div darum ist nicht erforderlich.

LLAP 🖖

[Casablanca]

Hi,

danke. So klappt es.

Gruß

[Gunnar Bittersmann]

@@Casablanca

danke. So klappt es.

Siehste! 😉

Statt {Logo} ist natürlich ein Alternativtext vorzusehen, der Nutzern, die das Bild nicht sehen, wirklich hilft.

Was das ist, hängt vom Kontext ab:

• {Organisation/Firmenname} (wenn der nicht dahinter auftaucht)
• {Logo von Organisation/Firmenname}
• zur Homepage (wenn das Logo denn dorthin verlinkt ist)

LLAP 🖖

[TS]

Hello,

Statt {Logo} ist natürlich ein Alternativtext vorzusehen, der Nutzern, die das Bild nicht sehen, wirklich hilft.

Was das ist, hängt vom Kontext ab:

• {Organisation/Firmenname} (wenn der nicht dahinter auftaucht)
• {Logo von Organisation/Firmenname}
• zur Homepage (wenn das Logo denn dorthin verlinkt ist)

Das habe ich schon immer wissen wollen, aber nie zu fragen gewagt: Wie ausführlich soll man werden bei Alternative-Texten? Sollte man nicht sogar so weit gehen: "rechte obere Ecke Logo der Firma Hummelman & Hund, ein Hund, der auf einem hölzernen Bierfass sitzt"?

Oder ist das dann wieder zuviel?

Ich möchte mich aus familiären Gründen mit Screenreadern beschäftigen. Bisher habe ich überhaupt keine Ahnung davon.

Kannst Du mir da einen Einstieg geben, was die leisten, welche es gibt und wie man sie benutzt? Das wäre mMn auch einen Artikel wert, wenn Du irgendwann die Zeit dazu hättest.

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

Wie ausführlich soll man werden bei Alternative-Texten? Sollte man nicht sogar so weit gehen: "rechte obere Ecke Logo der Firma Hummelman & Hund, ein Hund, der auf einem hölzernen Bierfass sitzt"?

Von einem, der es wissen muss:

https://twitter.com/MarcoZehe/status/869918360020058112

alt="Ich vorher mit für meine Verhältnisse schon langen Haaren, fast bis zu den Augen. Ziemlich dichtes, volles Haar."

alt="Ich nach dem Friseurbesuch. Haare deutlich kürzer, Ohren frei, Kopfhaar ausgedünnt, Stirn liegt frei. Und auf diesem Selfie lächle ich auch."

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wie ausführlich soll man werden bei Alternative-Texten? Sollte man nicht sogar so weit gehen: "rechte obere Ecke Logo der Firma Hummelman & Hund, ein Hund, der auf einem hölzernen Bierfass sitzt"?

alt="Ich vorher mit für meine Verhältnisse schon langen Haaren, fast bis zu den Augen. Ziemlich dichtes, volles Haar."

alt="Ich nach dem Friseurbesuch. Haare deutlich kürzer, Ohren frei, Kopfhaar ausgedünnt, Stirn liegt frei. Und auf diesem Selfie lächle ich auch."

Das beantwortet Toms Frage nicht. Oder wenn, dann falsch.

Wie ich schrub, hängt das vom Kontext ab.

Auf einer Seite, die sich mit dem Logo-Design beschäftigt, wird man das Aussehen des Logos im Alternativtext beschreiben wollen. Sonst nicht.

LLAP 🖖

[Gunnar Bittersmann]

@@TS

Das habe ich schon immer wissen wollen, aber nie zu fragen gewagt: Wie ausführlich soll man werden bei Alternative-Texten? Sollte man nicht sogar so weit gehen: "rechte obere Ecke Logo der Firma Hummelman & Hund, ein Hund, der auf einem hölzernen Bierfass sitzt"?

Oder ist das dann wieder zuviel?

IIRC hatte genau das jemand in ihrem/seinem ID24-Vortrag. Mal nachgefragt.

Ich möchte mich aus familiären Gründen mit Screenreadern beschäftigen. Bisher habe ich überhaupt keine Ahnung davon.

Du hast die Chance verstreichen lassen‽

Kannst Du mir da einen Einstieg geben, was die leisten, welche es gibt und wie man sie benutzt? Das wäre mMn auch einen Artikel wert, wenn Du irgendwann die Zeit dazu hättest.

Wikipeadia sollte einen Einstieg geben.

LLAP 🖖

[marctrix]

Hej TS,

Statt {Logo} ist natürlich ein Alternativtext vorzusehen, der Nutzern, die das Bild nicht sehen, wirklich hilft.

Was das ist, hängt vom Kontext ab:

Das habe ich schon immer wissen wollen, aber nie zu fragen gewagt: Wie ausführlich soll man werden bei Alternative-Texten?

Das hängt vom errechneten "accessible name" und vom Kontext ab: man sollte es tunlichst vermeiden, unnötig zu wiederholen, was sich eh schon im Text befindet.

Wie immer gilt: wesentliches, insbesondere das, worauf ich meine Argumentation stütze, gehört in den Fließtext. Darüber hinaus haben inhaltlich relevante Bilder oft noch eine Bildunterschrift. Das was sich im Fließtext und ggfs. in der Bildunterschrift befindet, soll nicht ein drittes Mal in den Alternativ-Text.

Der kann aber für ein inhaltlich bereits beschriebenes Bild dennoch zusätzliches leisten. Zum Beispiel eine Bildstimmung wiedergeben.

Ein Beispiel: im Wikipedia−Artikel über Henri Cartier Bresson findest du ein Bild von seiner ersten Kamera. Die Bildunterschrift gibt außerdem noch Auskunft über den Hersteller (Leica). Außerdem fehlt der Hinweis auf das Linkziel. Hier könnte der alt-Text lauten: zur Medienseite - antiquarische Kamera mit Patina und starken Gebrauchsspuren neben einer braunen Ledertasche

Zu Deinem Vorschlag: Oben rechts unbedingt weglassen! Wie willst du das sicherstellen auf einer responsiveness Webseite oder nach eine Redesign?

Webseiten haben kein rechts, links, oben oder unten! - Höchsten auf einem zufälligen Screenshot zu einem zufälligen Zeitpunkt!

Marc

PS: Auch bei Links auf sinnvolle accessible names achten! In meinem post hier lauten die beispielsweise: "accessible names" und „Wikipedia−Artikel über Henri Cartier Bresson“ - beide sollten auch aus dem Zusammenhang gerissen (z.B. beim durchhaben der Seite oder bei einer alphabetischen Auflistung aller enthaltenen Links) durchaus verständlich sein!

[marctrix]

Hej TS,

Kannst Du mir da einen Einstieg geben, was die leisten, welche es gibt und wie man sie benutzt? Das wäre mMn auch einen Artikel wert, wenn Du irgendwann die Zeit dazu hättest.

Kein Artikel, aber viele schöne Beispiele gibt es in der Facebook-Gruppe "Sinnvoll - ich leih dir meine Sinne"

Marc

[marctrix]

Hej Gunnar,

@@Casablanca

• zur Homepage (wenn das Logo denn dorthin verlinkt ist)

Nein, denn das sagt nichts über den Inhalt aus. Der Alternativ-Text muss das Bild und das Linkziel beschreiben - Ausnahme: ein verlinktes Logo, das am Anfang der Seite steht.

Hintergrund: Wir alle (Blinde eingeschlossen) haben uns an die Konvention gewöhnt, dass an dieser Stelle (für Sehende oben links, für Blinde nach den Skiplinks) der Link zur Startseite zu finden ist. 😉

Marc

[Gunnar Bittersmann]

@@marctrix

• zur Homepage (wenn das Logo denn dorthin verlinkt ist)

Nein, denn das sagt nichts über den Inhalt aus. Der Alternativ-Text muss das Bild und das Linkziel beschreiben - Ausnahme: ein verlinktes Logo, das am Anfang der Seite steht.

Den Fall hatte ich im Auge. Das hätte in Klammern stehen sollen gemusst.

Die Liste erhob keinen Anspruch auf Vollständigkeit. Danke für die Ergänzung.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

• zur Homepage (wenn das Logo denn dorthin verlinkt ist)

Nein, denn das sagt nichts über den Inhalt aus. Der Alternativ-Text muss das Bild und das Linkziel beschreiben - Ausnahme: ein verlinktes Logo, das am Anfang der Seite steht.

Den Fall hatte ich im Auge. Das hätte in Klammern stehen sollen gemusst.

Die habe ich im Geist ersetzt. Trotzdem muss bei einem verlinkten Logo (nicht zwingend) auf die Funktion hingewiesen werden. In allen anderen Fällen schon!

Die Liste erhob keinen Anspruch auf Vollständigkeit.

Ja, es gibt noch mehr Fälle, aber auf das wichtigste/gängigste Fehler hast du schon hingewiesen (wen wundert es 😉 - verstehst halt Dein Handwerk.)

Danke für die Ergänzung.

Das Logo ist halt ein doofer Fall, weil es eine Ausnahme ist…

Marc

[marctrix]

Hej marctrix,

Den Fall hatte ich im Auge. Das hätte in Klammern stehen sollen gemusst.

Die habe ich im Geist ersetzt. Trotzdem muss bei einem verlinkten Logo (nicht zwingend) auf die Funktion hingewiesen werden. In allen anderen Fällen schon!

Falsch geklammert. es muss heißen:

Die habe ich im Geist ersetzt. Trotzdem muss bei einem verlinkten Logo nicht (jedenfalls nicht zwingend) auf die Funktion hingewiesen werden. In allen anderen Fällen schon!

Marc