Impressum soll im Footer nach unten aufklappen

[Linda]

Hallo zusammen,

Ich bin blutiger Anfänger und soll im Rahmen einer Projektarbeit eine einfach Webseite erstellen. Ich hänge gerade am Footer: dieser ist so geplant, dass im er wie üblich ganz am Schluss kommt und sich nur das Wort Impressum darin befindet. Sobald man es anklickt soll der Footer nach unten aufklappen, sich also um den Menge des Textes der erscheint vergrößern.

Kann mir jemand helfen?

VG Linda

[Achot]

Hallo,

hast du jQuery auf deiner Seite? Dann kannst du es ganz einfach über toggle machen: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

[Linda]

Hallo,

hast du jQuery auf deiner Seite? Dann kannst du es ganz einfach über toggle machen: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

Nein, "noch nicht", kommt in den nächsten Unterrichtsstunden bestimmt noch, aber schon mal gut zu wissen! Anders ist es wahrscheinlich komplizierter?

Vielen Dank!

[Achot]

Hallo,

dann schau dir mal diese Seite an:
https://blog.kulturbanause.de/2013/03/die-css-pseudoklasse-target-funktion-beispiele/

Anders ist es wahrscheinlich komplizierter?

mit jQuery toggle müsstest du in das Div, welches zuerst ausgeblendet ist, einfach style:display:none; schreiben. Der Rest macht jQuery ;) Für mich persönlich am einfachsten. @Gunnar Bittersmann ist da bestimmt anderer Meinung. Jeder hat seine Vorlieben, wie er zum Ziel kommt.

[MudGuard]

Hi,

mit jQuery toggle müsstest du in das Div, welches zuerst ausgeblendet ist, einfach style:display:none; schreiben.

Wenn man für's Aus- und Einblenden mit Javascript arbeiten will, sollte man das div anfangs im HTML/CSS nicht ausblenden.
Das Element sollte dann per Javascript ausgeblendet und bei Bedarf wieder eingeblendet werden.

Sonst ist im Fall des Falles (kein Javascript) das Impressum nicht sichtbar.

cu,
Andreas a/k/a MudGuard

[j4nk3y]

Hey,

hast du jQuery auf deiner Seite? Dann kannst du es ganz einfach über toggle machen:

Das sollte auch rein mit CSS machbar sein.

Gruß
Jo

[marctrix]

Hej j4nk3y,

hast du jQuery auf deiner Seite? Dann kannst du es ganz einfach über toggle machen:

Das sollte auch rein mit CSS machbar sein.

Es reicht sogar reines HTML

Marc

[Matthias Apsel]

Hallo Linda,

Die Pseudoklasse target ist dein Freund.

<footer>
  <a href="#impressum">Impressum</a>
  <article id="impressum">
    …
  </article>
</footer>

#impressum {
  display: none;
}
#impressum:target {
  display: block;
}

Bis demnächst
Matthias

[JürgenB]

Hallo,

alternativ geht das auch mit dem Checkbox-Hack, Javascript braucht man da nicht.

Ich hab da mal was gebastelt. Der Teil mit „Info anzeigen“ macht, was du wünscht.

Alternativ könnte das auch mit dem Paar summary und details gehen, allerdings lässt da die Browserunterstützung noch zu wünschen übrig.

Gruß
Jürgen

[Achot]

Hallo,

Ich hab da mal was gebastelt. Der Teil mit „Info anzeigen“ macht, was du wünscht.

das ist eine sehr schöne Idee, wenn man mal kein jQuery eingebunden hat. Deine Seite muss ich mir mal speichern.

[Gunnar Bittersmann]

@@JürgenB

Ich hab da mal was gebastelt. Der Teil mit „Info anzeigen“ macht, was du wünscht.

Der Teil mit „Info anzeigen“ macht: gar nichts. Dein Beispiel ist kaputt.^[1]

Kann auch nichts machen, was soll ein <span>Info anzeigen</span> denn tun? span ist kein interaktives Element. Wenn du einen Button willst, willst du ein button-Element.

LLAP 🖖

---

1. “Keyboard accessibility is not a feature. If an interactive widget is on The Web and not keyboard accessible, it is unfinished / broken. It is not ready for The Web's diversity of users.” —Heydon Pickering ↩︎

[JürgenB]

Hallo Gunnar,

Ich hab da mal was gebastelt. Der Teil mit „Info anzeigen“ macht, was du wünscht.

Der Teil mit „Info anzeigen“ macht: gar nichts. Dein Beispiel ist kaputt.[^1]

das stimmt so nicht. Ich habe nur vergessen, den Text im Label bei Focus auf der versteckten Checkbox zu makieren. Ich habe das mal nachgeholt.

Kann auch nichts machen, was soll ein <span>Info anzeigen</span> denn tun? span ist kein interaktives Element. Wenn du einen Button willst, willst du ein button-Element.

die span sind Teil eines Labels, wie mir da ein Button helfen kann, sehe ich jetzt noch nicht.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

das stimmt so nicht. Ich habe nur vergessen, den Text im Label bei Focus auf der versteckten Checkbox zu makieren.

Ah, Checkbox-Hack. Da hatte ich nicht genau genug hingesehen.

Ich habe das mal nachgeholt.

Ich bin mir aber nicht sicher, ob eine Umsetzung mit Checkbox-Hack wirklich barrierefrei ist. Es ist tastaturbedienbar, aber ist das auch verständlich, wenn der Screenreader eine Auswahloption vorliest?

wie mir da ein Button helfen kann, sehe ich jetzt noch nicht.

Bei einem Button wäre klar erkennbar, dass eine Aktion dahintersteckt.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

Ah, Checkbox-Hack. Da hatte ich nicht genau genug hingesehen.

Ich habe das mal nachgeholt.

Ich bin mir aber nicht sicher, ob eine Umsetzung mit Checkbox-Hack wirklich barrierefrei ist. Es ist tastaturbedienbar, aber ist das auch verständlich, wenn der Screenreader eine Auswahloption vorliest?

meine eigen Vorgabe war, das ganze ohne Javascript umzusetzen. Über Barrierefreiheit weiß ich zu wenig, um zu entscheiden, ob diese Technik bedienbar ist. Warscheinlich ist die Lösung mit details und summary die Beste, selbst wenn man die IEs abhängt und ihnen ein „immer sichtbar“ anbietet.

wie mir da ein Button helfen kann, sehe ich jetzt noch nicht.

Bei einem Button wäre klar erkennbar, dass eine Aktion dahintersteckt.

meine Frage war, wie ich es mit html und css schaffe, mit einem Button ein Element aufzuklappen, also so etwas wie button:pressed ~ p.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

meine Frage war, wie ich es mit html und css schaffe, mit einem Button ein Element aufzuklappen, also so etwas wie button:pressed ~ p.

Auch hierfür ist details das Mittel der Wahl (auch wenn es dann nicht mehr nötig wäre, was das Aufklappen betrifft): mit [open] ~ * kannst Du Elemente nach dem Details abhängig von dem Zustand (geöffnet oder geschlossen) formatieren. Zum Beispiel abdunkeln, um die Aufmerksamkeit auf die geöffneten Inhalte zu lenken.

Marc

[Matthias Apsel]

Hallo marctrix,

Auch hierfür ist details das Mittel der Wahl (auch wenn es dann nicht mehr nötig wäre, was das Aufklappen betrifft): mit [open] ~ * kannst Du Elemente nach dem Details abhängig von dem Zustand (geöffnet oder geschlossen) formatieren. Zum Beispiel abdunkeln, um die Aufmerksamkeit auf die geöffneten Inhalte zu lenken.

Ich bin nicht sicher, ob details das richtige Element für den Haupinhalt ist.

<article>
  Das gesamte Impressum, was oft auch eine eigene Seite bekommt, …
</article>

vs.

<article>
  <details>
    Das gesamte Impressum, was oft auch eine eigene Seite bekommt, …
  </details>
</article>

Ich habe das Gefühl, dass letzteres nicht im Sinne des Erfinders ist.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

details darf Blockelemente wie article beinhalten. Es ist zum Gruppieren von Elementen gedacht. Daher auch die ARIA-Rolle group - meiner Meinung nach auch das Mittel der Wahl, wenn es je ein details gebe mit Zusammenfassungen wie "Ausland", "Inland, "Sport" usw und dann jeweils ganz vielen Artikeln.

Es darf sogar weitere details beinhalten...

Marc

[Matthias Apsel]

Hallo marctrix,

details darf Blockelemente wie article beinhalten.

Die Unterscheidung zwischen Block- und Inline-Elementen ist inzwischen überholt.

Es ist zum Gruppieren von Elementen gedacht.

Aus dem Entwurf:

The details element represents a disclosure widget from which the user can obtain additional information or controls.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Die Unterscheidung zwischen Block- und Inline-Elementen ist inzwischen überholt.

Jetzt wird zwischen flow content und phrasing content unterschieden.

♫ It’s a kind of magicontent

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Matthias Apsel

Die Unterscheidung zwischen Block- und Inline-Elementen ist inzwischen überholt.

Jetzt wird zwischen flow content und phrasing content unterschieden.

Nein, es gibt noch mehr, wie „heading content“, „interactive conten“t usw...

„phrasing content“ ist ein Teil von „flow content“ - aber nicht immer. th ist weder noch, auch kein heading content- wtf?

Was sind denn nun td, li usw - und warum ist table „flow content“ - verhält sich nicht die Bohne wie anderer „flow content“.

Warum ist link sowohl als auch?

Die neue Unterteilung ist vollkommen unnütz, in vielen Fällen irreführend in meinen Augen.

Keine Ahnung, wie ich das jemanden erklären soll. Ich bleibe bei meiner alten Erklärweise: "Es gibt verschiedene Darstellungsformen. Elemente können wie Bilder inline-block, wie Tabellenzellen oder Listenpunkte dargestellt werden und es gibt eine Standard-Darstellung für jedes Element, die sich mittels display-Eigenschaft ändern lässt."

Na gut, das ist die praktische Sicht…

Marc

[marctrix]

Hej Matthias,

details darf Blockelemente wie article beinhalten.

Die Unterscheidung zwischen Block- und Inline-Elementen ist inzwischen überholt.

Guter Einwand, ich unterscheide aber seit jeher nicht wirklich zwischen diesen beiden - schon gar nicht als Gegensatz (wie so viele Bücher das tun). Es handelt sich ja nur um eine Darstellungsform von vielen, so wie "Darstellung als Tabellenzelle" oder wie "Darstellung wie Listeneintrag".

Marc

[JürgenB]

Hallo Marc,

Auch hierfür ist details das Mittel der Wahl …

darauf hatte ich ja schon hingewiesen, und auch auf die noch nicht zufriedenstellende Browserunterstützung. Wenn es reicht, im IE einfach alles zu zeigen, ist details ok. Wenn nicht, bleibt die Frage, Alternative mit oder ohne Javascript. Bei meinem Vorschlag wollte ich eine JS-freie Lösung.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Wenn es reicht, im IE einfach alles zu zeigen, ist details ok. Wenn nicht, bleibt die Frage, Alternative mit oder ohne Javascript.

Vorher kommt aber noch eine andere Frage: Polyfill oder Alternative.

Wobei „Alternative“ hier heißt: das Rad neu erfinden. Die Frage, welche Alternative, sollte sich dann nicht mehr stellen.

Bei meinem Vorschlag wollte ich eine JS-freie Lösung.

Ich bin ja durchaus ein Freund von JS-freien Lösungen. Aber wenn das CSS-Hack heißt, dann doch lieber JS.

LLAP 🖖

[marctrix]

Hej JürgenB,

Auch hierfür ist details das Mittel der Wahl …

darauf hatte ich ja schon hingewiesen, und auch auf die noch nicht zufriedenstellende Browserunterstützung. Wenn es reicht, im IE einfach alles zu zeigen, ist details ok. Wenn nicht, bleibt die Frage, Alternative mit oder ohne Javascript. Bei meinem Vorschlag wollte ich eine JS-freie Lösung.

Na ja, die „Lösung“ ist ja JS-frei - denjenigen mehr Komfort anzubieten, die JS haben, nennt man „progressive enhancement“. Wenn etwas ohne JS nicht funktioniert, ist das nicht so gut. Wenn man etwas unschönes, aber funktionierendes für diejenigen verbessert, die JS zulassen: was spricht dagegen?

Es gibt in der Webentwicklungen Prinzipien, die sich als sinnvoll erwiesen haben:

• Don't make me think
• mobile first
• progressive enhancement uswusf

Aber "Ich will eine Lösung ohne JavaScript" würde ich jetzt nicht unbedingt dazu zählen. ;-)

Zumal: wieviel Prozent der Nutzer deiner Webseite, die mit dem vorinstallierten Browser unterwegs sind, fummeln in den Einstellungen rum? - Wer sich nicht einmal traut den FF oder so zu installieren, wird da fast immer die Finger von weg lassen...

Müsstest in Deinen Statistiken sehen können, ob du überhaupt einen einzigen Besucher hattest, der mit IE, aber ohne JS bei dir war (war dann bestimmt eine Behörde)...

Marc

[JürgenB]

Hallo Marc,

… JS-frei …

Müsstest in Deinen Statistiken sehen können, ob du überhaupt einen einzigen Besucher hattest, der mit IE, aber ohne JS bei dir war (war dann bestimmt eine Behörde)...

vernachlässigbar. Bemerkbar eigentlich nur, wenn ich im Forum einen Link gesetzt habe :). Aber das war vor langer Zeit.

Gruß
Jürgen

[Linda]

Vielen Dank! Hat geklappt!

[Gunnar Bittersmann]

@@Matthias Apsel

Die Pseudoklasse target ist dein Freund.

Und der Anwalt des Klägers dein Feind …

#impressum {
  display: none;
}
#impressum:target {
  display: block;
}

… denn in Browsern, die :target nicht unterstützen, erscheint kein Impressum.

Wenn, dann so:

#impressum:not(:target)
{
  display: none;
}

LLAP 🖖

[Gunnar Bittersmann]

@@Linda

Sobald man es anklickt soll der Footer nach unten aufklappen, sich also um den Menge des Textes der erscheint vergrößern.

In Heydon Pickerings Practical ARIA Examples sind progressive collapsibles beschrieben.

LLAP 🖖

[marctrix]

Hej Gunnar,

In Heydon Pickerings Practical ARIA Examples sind progressive collapsibles beschrieben.

Dann muss ich zu aria-expand usw ja ncihts mehr sagen, aber: Heydon widerspricht hier sich selber. So wie button für Buttons genutzt werden sollte, gibt es in HTML auch Elemente, die für aufklappbare Inhalte gedacht sind:

details und summary - leider wurden die hier nur beiläufig genannt, obwohl sie hier das Mittel der Wahl sind.

Da die tatsächlich noch nicht in allen Browsern korrekt und vollständig implementiert sind, wäre es angebracht die impliziten Rollen (<summary role="button"> und <details role="group">) anzugeben, außerdem aria-expand true oder false.

Ein Polyfill gibt es unter http://html5please.com/#details

Marc