Guten Rat zu einem Footer

    so der Footer ist fertig. Gefällt mich auch selbst ganz gut.

    Vielleicht schaust du, wenn du Zeit hast noch mal über den Code. Ich befürchte da ist mehr drin als man braucht.


    Aber mehr sorgen macht mir der link Inhalt. Mir will sich nicht erschließen wieso der nich direkt zum Ziel Inhalt springt.


    miflo.de

    Zitat von Emess

    so der Footer ist fertig. Gefällt mich auch selbst ganz gut.

    Vielleicht schaust du, wenn du Zeit hast noch mal über den Code. Ich befürchte da ist mehr drin als man braucht.

    Semantisch ist der Footer eine Katastrophe:

    1. die Links bei Telefonnummer und E-Mailadresse kannst du dir schenken: sie haben keinerlei Inhalt (sowohl für sehende gerade aber auch für nicht sehende - da ist nur ein leeres i in dem Link); ggf. wäre für die Kontaktdaten auch ein address-Element angebracht
    2. h1 scheint mir für die Überschriften die falsche Ebene …
    3. Die Öffnungszeiten (warum "hours" als Überschrift?) sind eine ungenießbare Div-Suppe, wären aber gerne eine Liste - damit kann der Browser dann auch eine Beziehung zwischen Wochentag und Uhrzeit herstellen (am Grid-Layout ändert sich da - bis auf die Selektoren - nichts); generell: bau das HTML erst semantisch passend zusammen und formatiere das Ergebnis anschließend.
    4. die URL ganz am Ende möchte keine Überschrift sein

    Dein Facebook-Link ist übrigens etwas verunglückt, da musst du nochmal ran. Zudem steht im Content-Type-Header ein "charset=none" und der Header hat Vorrang vor dem was im HTML steht womit die charset-Angabe quasi fehlt - da musst du dem Server noch Manieren beibringen

    Zitat

    Aber mehr sorgen macht mir der link Inhalt. Mir will sich nicht erschließen wieso der nich direkt zum Ziel Inhalt springt.

    Ich bin mir nicht sicher was du meinst, vermute aber mal dass dich stört dass die angesprungene Überschrift hinter der Navigation verschwindet - dagegen hilft ein scroll-padding-top für das html-Element.

    Zitat

    Aber mehr sorgen macht mir der link Inhalt. Mir will sich nicht erschließen wieso der nich direkt zum Ziel Inhalt springt.

    Du meinst den Link "INHALTE" in der Navigation? Der springt bei mir schon zum Ziel aber die Überschrift verschwindet hinter der Navigation. Ist es das, was Du meinst?

    Zitat von Sempervivum

    Du meinst den Link "INHALTE" in der Navigation? Der springt bei mir schon zum Ziel aber die Überschrift verschwindet hinter der Navigation. Ist es das, was Du meinst?

    Genau.

    @TK Natürlich bin ich mir bewusst der Code noch einigen Murks enthält..

    Für mich soll es erst mal schön aussehen Und mir dabei Helfen meine Zeit nicht mit Hartz TV verbringen zu müssen..

    Wenn ich ein guter Webdesigner wäre, hätte ich mich hier nicht als Hilfesuchender angemeldet, sondern als Helfer

    Wenn es das ist, findest Du die Lösung in dem Posting von tk1234 , ganz am Schluss. Diese Insel mit einem nützlichen Hinweis hatte ich zunächst in dem Ozean von unproduktiver Nörgelei übersehen.

    In solchen Situationen fällt mit immer ein Zitat von Albert Einstein ein:

    Zitat

    Stay away from negative people - they have a problem for every solution.

    :)

    Das hat tatsächlich geklappt. Doch ganz ehrlich verstehe ich nicht wieso. Ist eben alles in IT Englisch. ( Da bin ich leider auch nicht ganz perfekt)


    Was die mobile Ansicht Angeht klappt das nicht.

    mobil.jpeg


    Ganz oben im css steht das!

    Das scroll-padding-top gibt an, wie viel Platz der Browser beim Scrollen oben frei lässt. Damit das genau passt, muss dieser Wert gleich der Höhe des sticky-Elementes sein, also in deinem Fall der Nav im Header.

    Zitat von Sempervivum

    Finde ich vollkommen OK, wie Du das vor hast. Statt der Tabelle mit den Öffnungszeiten kannst Du auch ein Grid verwenden, dann würde das HTML wesentlich schlanker.

    Ehrlich gesagt finde ich es an dieser Stelle etwas unpassend.

    Ich hätte nicht für die Tage und die Uhrzeiten alles einzelne Elemente genutzt und sie mit Grid ausgerichtet.


    Die Uhrzeiten gehören zum entsprechenden Tag und für mich in ein einzelnes Element, mit "flex" & "space-between" wunderbar ausgerichtet.

    Zitat von nextuser

    Die Uhrzeiten gehören zum entsprechenden Tag und für mich in ein einzelnes Element, mit "flex" & "space-between" wunderbar ausgerichtet.

    Viele Wege führen Nach Rom. An deinem wäre ich interessiert

    Könntest du das Mal veranschaulichen. Da ich ja eine funktionierte Lösung habe, Wäre das ja keine bitte um ein fertigen Code.

    Doch wie gesagt, deine Lösung könnte ja mein Horizont erweitern

    Vorab erst mal noch einige Dinge, die mir grade bei deinem footer aufgefallen sind:

    • Der hr-Tag hat heute eher nur eine semantische Bedeutung. Ihn für Linien vor und nach einem h1-Tag zu benutzen ist eindeutig fehl am Platz. Das sollte die Aufgabe eines Borders sein!
    • In deinem footer-Code sind paar div-Tags (bzw. div-Schließungs-Tags) zu viel.
    • Wie schon von anderen erwähnt, sind h1-Tags als Überschriften im footer nicht so passend gewählt. Nimm da lieber ein paar Ebenen tiefer (z.B. h4)
    • Für einen Kontaktdaten-Abschnitt im footer bietet sich der address-Tag ideal an.
    • img-Tags sollten idealerweise auch heute noch das alt-Attribute gesetzt bekommen. Für Screenreader oder als Infotext, wenn das Bild mal nicht lädt.


    Aus deinem footer:


    würde ich folgendes machen:


    mit entsprechendem CSS:

    das ist ja echt interessant.. Überschriften h1-h6 waren für mich immer nur Überschriften unterschiedlicher Größe und Schriftart

    Das mit der Hierarchie war mir nicht bewusst.

    Dein Code sieht auch sehr aufgeräumt und strukturiert aus. Um das alles erst zu verinnerlichen werde ich damit etwas rumspielen.

    Vielen Dank

    Ich finde deinen Code echt super, doch ich da noch Fragen. Ich schau mir den jetzt schon seit Tagen an und hab auch mit rum gespielt.

    das ist das grundsätzliche Footerstyle. Doch wieso flex-direction: column;

    Müsste die 4 section dann nicht untereinander stehen

    Welchen vorteil hat der Html Tag address.


    Wieso ordnet sich die letzte section mittig unten an?

    footer>section:last-of-type Das ist der unterster Flexcontainer


    first-of- und last -of-type bezeichnen die beiden letzen Absätze.


    Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?

    Code
    footer>section:last-of-type
{
    flex-basis: calc(100% - 4rem);
    flex-shrink: 0;
}

    Ich schätze ja dieses Vorgehen mit Wrapping und Rechnerei mit calc nicht so sehr. Dadurch, dass es Flex gibt, ist das überflüssig. flex: 1; und gut ist, das ist übersichtlich, klar und lesbar. Und man muss sich nicht mit padding, border etc. befassen. An den Fragen von Emess erkennt man ja, dass dieses Vorgehen unübersichtlich ist und das Verständnis erschwert.


    Und, Bemerkung am Rande: Auch an dieser Stelle frage ich mich, wo die Mitglieder sind, die sonst das Posten von fertigem Code reflexhaft beanstanden. ;)

    Um euch mal alle wegen des fertigen codes auf den Boden zu bringen.

    Ich bin eigentlich ein Freund von fertigem Code. Ich kann mir dann tagelang ansehen und studieren. Ist ja nicht so, dass ich den direkt reinkopiere und weitervekaufe. Ich wiil was ich gelernt habe bzw fertig bekommen habe mir zu eigen machen. Um das auch mal selbstständig zu können.

    Im Übrigen hat mir dieses Code auch ne Vorstellung für mein Problem mit diesem Thread eventuell mit weniger HIlfe zurecht komme.

    Also für micht gibt es da ein Für und ein wider!


    Doch das gibt mir immer noch Rätsel auf

    Zitat

    Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?

    Das liegt daran, dass dieses Vorgehen mit Flex nichts zu tun hat, sondern veraltet ist. Es bringt dir wenig Nutzen wenn Du dort einsteigst um es zu verstehen. Profitieren würdest Du, wenn Du dich damit vertraut machen würdest, wie man so etwas mit Mitteln umsetzt, die Stand der Technik sind, siehe auch mein Posting #23 in deinem anderen Thread.

    Zitat von Sempervivum
    Code
    footer>section:last-of-type
{
    flex-basis: calc(100% - 4rem);
    flex-shrink: 0;
}

    Ich schätze ja dieses Vorgehen mit Wrapping und Rechnerei mit calc nicht so sehr.

    calc hätte es hier auch nicht benötigt.

    Das habe ich nur gemacht, damit die letzte section unten genau so breit ist wie die oberen 3, optisch auch wegen dem border.


    Zitat von Sempervivum

    Dadurch, dass es Flex gibt, ist das überflüssig. flex: 1; und gut ist, das ist übersichtlich, klar und lesbar.

    Dadurch das es Flex gibt??? Das verwende ich doch!

    Und mit "flex: 1" wäre es eben nicht getan! Du vergisst wohl, das die letzte section nach unten soll.

    Oder du hast vergessen, welche Standard-Werte die Flex-Kinder haben. Nur ein "flex: 1" reicht da nicht!


    Zitat von Sempervivum

    Und man muss sich nicht mit padding, border etc. befassen.

    Was haben die beiden Dinge denn jetzt damit zu tun? Die sind doch für was ganz anderes!

    Ich glaube, du bringst da paar Sachen durcheinander.

    padding => für Innenabstand (nicht margin! hat also keinen Bezug zur Anordnung / Ausrichtung der section-Parts)

    border => für die von ihm gewünschten Linien (Border!) oben und unten der Überschriften.


    Zitat von Sempervivum

    An den Fragen von Emess erkennt man ja, dass dieses Vorgehen unübersichtlich ist und das Verständnis erschwert.

    Absolut nicht.

    Dieses Vorgehen ist simpel und übersichtlich, und an seinen Fragen erkenne ich viel eher einfach nur, das es für ihn wohl ein paar neue Stellen gibt.

    Hat er einmal das mit "flex-basis / flex-shrink / flex-grow" verstanden, ist mein Vorgehen nahezu selbsterklärend.


    Zitat von Sempervivum

    Und, Bemerkung am Rande: Auch an dieser Stelle frage ich mich, wo die Mitglieder sind, die sonst das Posten von fertigem Code reflexhaft beanstanden. ;)

    Eigentlich schon. Aber hier habe ich eher sein vorhandenen Code umgeschrieben.

    Eine Antwort wie "Ich würde die & die Elemente gegen die & die tauschen und dies und jenes anders machen" würde an dieser Stelle denke

    ich nicht so zielführend sein und nur ein paar (durch das Codeposting) vermeidbare (Verständnis-)Fragen hervorrufen...


    ======================================


    Zitat von Emess

    Ich bin eigentlich ein Freund von fertigem Code. Ich kann mir dann tagelang ansehen und studieren. Ist ja nicht so, dass ich den direkt reinkopiere und weitervekaufe. Ich wiil was ich gelernt habe bzw fertig bekommen habe mir zu eigen machen. Um das auch mal selbstständig zu können.

    Ja, das ist immer so eine Sache.

    Auf der einen Seite haben die anderen schon recht, (komplett) fertigen Code zu kritisieren. Das führt bei Leuten, die ne schnelle C&P Lösung anstreben zu einem deutlich schlechteren (bleibenden) Effekt.

    Auf der anderen Seite ist so ein Code-Posting bei Leuten wie dir, die "wissbegierig" sind, meiner Meinung nach effektiver, als seine Vorschläge nur "trocken" zu beschreiben.

    Auch kann man ja nicht von jedem der im Forum eine Frage stellt erwarten, das er zu einem Entwickler werden und deshalb gefälligst lernen soll.

    Manche brauchen wirklich einfach nur kurz Hilfe bei gewissen Aufgabenstellungen, ohne das sie überhaupt in diesem Bereich tätig sein wollen.

    Sollen diese Leute dann auch selbst bei den kleinsten Dingen entweder alles benötigte lernen oder es einem Entwickler überlassen, anstatt als "Außenstehender" eine kurze Frage zu stellen und auf die Lösung ihres Problems zu hoffen?


    Zitat von Emess

    Doch wieso flex-direction: column;

    Müsste die 4 section dann nicht untereinander stehen

    Sie genauer hin. "flex-direction: column" steht hier nicht "footer", sonder bei "footer>section", ist also auf die section (deren Inhalt) bezogen.


    Zitat von Emess

    Wieso ordnet sich die letzte section mittig unten an?

    ...

    Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?

    Die anderen haben alle "flex-basis: 0", sind also gleich. Die letzte hat da aber einen entsprechenden Wert und "flex-shrink: 0" sorgt dafür, das es nicht schrumpft, um noch in die erste Zeile zu passen (falls der Inhalt so klein wäre), sondern immer diese "100% - 4rem" bleibt.

    Genau deshalb ist die letzte section auch, wie gewollt unterhalb. Sie hat eine Breite bekommen und die Anweisung, nicht zu schrumpfen (sonst wäre sie geschrumpft in der ersten Zeile neben den anderen). Damit sie auf die nächste Zeile springt, braucht das Elternelement noch "flex-wrap: wrap".


    Zitat von Sempervivum

    Code sollte so gestaltet sein, dass er klar und selbst erklärend ist und keine Rätsel aufgibt.

    Bei Neulingen die die Befehle noch nicht kannten, wird er nicht selbsterklärend sein außer, man versieht ihn mit Kommentaren oder erklärt ihn!


    Das ergibt sich automatisch sobald du, wie ich weiter oben grad schon angesprochen habe, verstanden hast, was "flex-basis / flex-shrink / flex-grow" machen.

    Ich empfehle dir als Nachschlagwerk das MDN.

    Und für FlexBox im speziellen auch den Guide.


    Zitat von Sempervivum

    Das liegt daran, dass dieses Vorgehen mit Flex nichts zu tun hat, sondern veraltet ist.

    Was genau ist veraltet und was genau hat nichts mit Flexbox zu tun?


    Zitat von Sempervivum

    Es bringt dir wenig Nutzen wenn Du dort einsteigst um es zu verstehen.

    Im Gegenteil! Flex & Grid und deren Anweisungen richtig zu verstehen bringt ihn auf jeden Fall weiter.


    Zitat von Sempervivum

    Profitieren würdest Du, wenn Du dich damit vertraut machen würdest, wie man so etwas mit Mitteln umsetzt, die Stand der Technik sind, siehe auch mein Posting #23 in deinem anderen Thread.

    Was genau aus deinem Posting #23 im anderen Thread steht in Differrenz zu meinem vorgehen hier?

    Was ist hier so veraltetes im Code / Vorgehen? Und was hat nichts mit Flex zu tun?

    Dies bedarf auch noch der Kommentierung:

    Zitat

    Ehrlich gesagt finde ich es an dieser Stelle etwas unpassend.

    Ich hätte nicht für die Tage und die Uhrzeiten alles einzelne Elemente genutzt und sie mit Grid ausgerichtet.

    Beim dl, das tk1234 vorschlägt, ist das genau so vorgesehen:

    HTML/Tutorials/Listen/Beschreibungslisten – SELFHTML-Wiki

    Die Elemente werden aneinander gereiht ohne jedes Paar zu umschließen. Aber wahrscheinlich liegen die Leute, die hier den Standard definiert haben, ebenfalls falsch ;)


    Ich bin dann aber erst Mal raus hier bzw. heraus gedrängt. Unbefriedigend, wenn die Beiträge nicht von Sachverstand, sowohl technisch als auch didaktisch, geprägt sind sondern von Besserwisserei.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden