Footer hat einen weißen Rand

[grafikrose]

Hallo zusammen,

ich bekomme den weißen Rand unterhalb meines Footers nicht weg! Er ist je nach Bildschirmgröße kleiner oder größer! Kann mir jemand helfen?

Zur Seite: http://www.graphicmonkeyz.com/roselinde/index.html

[MrMurphy1]

Hallo

Grundsätzlich machst du dir durch zu viele CSS-Angaben das Leben schwer.

So kannst du Angaben wie width: 100% oder min-width: 100% in die Tonne treten.

Auch Angaben wie position: absolute sollten mangels Sinn vermieden werden.

Dein Problem resultiert aus der Angabe

transform: translateY(-10%);

unter #impressum. Die musst du löschen.

Gruss

MrMurphy

[grafikrose]

Funktioniert! Vielen Dank!

[Gunnar Bittersmann]

@@grafikrose

ich bekomme den weißen Rand unterhalb meines Footers nicht weg! Er ist je nach Bildschirmgröße kleiner oder größer!

Was genau meinst du? Du willst den Footer (bei enig Seiteninhalt) an die Unterkante des Bildschirms setzen?

☞ Flexbox, unten in den Beispielen.

Zur Seite: http://www.graphicmonkeyz.com/roselinde/index.html

Das nächste Mal bitte verlinken: <url> bzw. [text](url) oder per Button über dem Eingabefeld. Ich hab das mal für dich nachgeholt.

Deine Seite weist einen groben Fehler auf: das Impressum ist nicht erreichbar – weder per Tastaturnavigation noch ohne JavaScript.

Um zweites zu beheben: Nicht mit HTML verstecken, sondern mit JavaScript; d.h. wenn JavaScript nicht ausgeführt wird, ist das Ding initial ausgeklappt.

Um erstes zu beheben: span ist kein interaktives Element. Es ist nur einem beschränkten Nutzerkreis möglich, darauf zu clicken. Per Tastatur ist es nicht erreichbar.

Also keine click-Events für nicht-interaktive Elemente registrieren!

Nimm anstelle des spans einen button. Den kannst du so stylen, dass er keinen Rahmen und keinen Hintergrund hat.

LLAP 🖖

[grafikrose]

Vielen Dank für die vielen Infos!

Wie man sicher unschwer, anhand des Codes erkennen kann, bin ich blutiger Anfänger: Das ist die erste Seite die ich programmiere und bin schon glücklich wenn überhaupt etwas so funktioniert wie es soll...

puh, was es da alles noch so zu beachten gibt 😟

Ich ziehe hier vor jedem der sowas beherrscht meinen Hut!

[Julius]

Hallo grafikrose,

Wie man sicher unschwer, anhand des Codes erkennen kann, bin ich blutiger Anfänger: Das ist die erste Seite die ich programmiere und bin schon glücklich wenn überhaupt etwas so funktioniert wie es soll...

Jeder fängt mal irgendwann irgendwie mit irgendwas an.

puh, was es da alles noch so zu beachten gibt 😟

Gunnar will dich halt gleich auf den richtigen Weg bringen – Zugänglichkeit ist enorm wichtig und die Nutzer deiner Seite werden es dir danken.

Gruß
Julius

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nimm anstelle des spans einen button.

Oder noch besser: Nimm die für sowas vorgesehenen HTML-Elemente details und summary

Dann brauchst du gar kein JavaScript:

<details>
  <summary>Impressum</summary>
  <p>laber</p>
  <p>fasel</p>
  <p>sülz</p>
</details>

Übrigens ist weiß auf hellgrün kaum lesbar, der Kontrast ist zu gering. Prüfen kannst du das z.B. mit dem WebAIM Color Contrast Checker.

Die von dir verwendete Condensed-Schriftart Oswald ist sowieso schon nicht besonders gut lesbar (also eine unglückliche Wahl für Fließtext). Und mit 12px viel zu klein.

Abgesehen davon in px keine Einheit, die in CSS vorkommen sollte (außer bei dünnen Rahmenlinien). Gib Schriftgrößen in em bzw. rem an.

LLAP 🖖

[Julius]

Hallo Gunnar,

Abgesehen davon in px keine Einheit, die in CSS vorkommen sollte (außer bei dünnen Rahmenlinien).

Was ist mit thin als Wert verkehrt? Also beispielsweise border:thin solid orange;

Gruß
Julius

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Also keine click-Events für nicht-interaktive Elemente registrieren!

Bevor sich ein anderer draufstürzt und mich zerpflückt: Bei event delegation macht man genau das.

Was hier gemeint ist: Keine nicht-interaktiven Elemente als Zielelement (event.target) vorsehen.

LLAP 🖖

[Matthias Apsel]

Hallo grafikrose,

ich bekomme den weißen Rand unterhalb meines Footers nicht weg! Er ist je nach Bildschirmgröße kleiner oder größer!

Du möchtest, dass der footer stets ganz unten auf der Seite ist, unabhängig von den Inhalten obendrüber?

position:sticky ist dein Freund. In Browsern, die das noch nicht unterstützen, steht der Footer dann eben nicht konsequent am unteren Rand. Das ist aber imho nicht schlimm.

Bis demnächst
Matthias

[grafikrose]

Muss man für eine weitere Frage zur Positionierung eines Elementes einen neue Frage erstellen?

Gruß

[Matthias Apsel]

Hallo grafikrose,

Muss man für eine weitere Frage zur Positionierung eines Elementes einen neue Frage erstellen?

Nur, wenn es ein grundsätzlich anderes Problem ist.

Bis demnächst
Matthias

[Julius]

Hallo grafikrose,

Muss man für eine weitere Frage zur Positionierung eines Elementes einen neue Frage erstellen?

Musst du nicht. Oft bleibt durch das Posten im selben Thread (Gesprächsfaden) der Kontext^[1] erhalten, was sinnvoll ist, wenn die nächste Frage mit der ersten verwandt ist – wie Matthias bereits sagte. Du kannst über dem Eingabefeld des Beitrags auch einen neuen Titel wählen, um den leichten Themenwechsel kenntlich zu machen.

Für eine Frage zu HTML-Formularen ist dagegen ein neuer Thread gerechtfertigt :-)

Gruß
Julius

---

---

1. z.B.: Wissenstand des Fragenden erkennbar, was will er erreichen? ↩︎

[MudGuard]

Hi,

Muss man für eine weitere Frage zur Positionierung eines Elementes einen neue Frage erstellen?

Ja - sonst kennt ja keiner die neue Frage.

Aber einen neuen Thread brauchst Du dafür nicht aufmachen.

cu,
Andreas a/k/a MudGuard