Footer unten ausrichten

  • Hallöchen alle zusammen,


    ich versuche meine Footer am unteren Ende meiner Seite zu positionieren, und habe dazu natürlich auch schon diverse Tutorials konsultiert aber trotz allem will er (der Footer) nicht und legt sich einfach mal quer über den Content der Seite. Warum weiß ich nicht und ich deshalb hoffe ich auf eure Hilfe. Mein gescheiterter Versuch ist hier abrufbar: www.mein-urheberrecht.de/sandbox/index.html bzw. www.mein-urheberrecht.de/sandbox/style.css


    Da der CSS-Code sehr lang ist und ich nicht weiß, wo der eigentliche Fehler liegt, belasse ich es bei den Links.


    LG


    Ringo

  • Oh ja, die Positionierung des Footers ... ich habe es innerhalb und außerhalb des "Corpus" (Wrapper) probiert, nachdem es nicht klappen wollte, das Ergebnis war immer das gleiche. Also daran krankt es nicht, hab den Footer jetzt wieder in den "Corpus" gesteckt, aber der Contentbereich wird dennoch vom Footer überlagert. :wacko:

  • Die Seite ist nicht korrekt aufgebaut,. Du musst genau auf die Strucktur der End-Tags achten.
    Die Seite sollte in etwa so aussehen:


  • HTML
    <article>
       <!--  ab hier Seiteninhalt   -->
       <h1>Überschrift</h1>
       <p>der ganze Text etc.</p>
    </article>


    Warum packen manche (inkl. du) den Content in den article-Tag, der für mich eher als Auszeichnung für Artikel gilt und nicht vom gesamten Content?


    Besser ist meiner Meinung nach der <main>-Tag.


    Steckt da irgendein tieferer Sinn hinter? Tut mir leid, dass ich damit jetzt vielleicht am Thema vorbeigehe, aber wo ich das gerade wieder sehe, muss ich einfach mal nachfragen.

  • Ich würde heutzutage auch den <main> tag bevorzugen. Die Seite begann ich aufzubauen, als tags wie <main> und <article> noch nícht verwendet wurden. Die Verwendung von <div id="wtf"> ist damit nicht inkorrekt, sondern allenfalls nicht mehr zeitgemäß. Jedenfalls hat es mit dem Problem nichts zu tun, und wenn doch, so kann ich aus den Antworten nicht entnehmen, wo konkret der Fehler ist. Allgemeine Hinweise auf den Aufbau der Seite helfen mir nicht weiter und ich habe auch keine Lust, die Seite mit allen Unterseiten zu überarbeiten, nur um die aktuellsten Tags zu verwenden, wenn es technisch gesehen mit den <div> Tags genauso gut funzt.


    Mein Anliegen: Ich möchte den Footer am Ende der Seite, nach dem Contentbereich. Deshalb bitte nur Beiträge, die zur Problemlösung beitragen.

  • HTML-Seminar Axel Pratzner

    Warum packen manche (inkl. du) den Content in den article-Tag, der für mich eher als Auszeichnung für Artikel gilt und nicht vom gesamten Content?


    Besser ist meiner Meinung nach der -Tag.


    Steckt da irgendein tieferer Sinn hinter? Tut mir leid, dass ich damit jetzt vielleicht am Thema vorbeigehe, aber wo ich das gerade wieder sehe, muss ich einfach mal nachfragen.


    @hey JR Cologne,
    ich habe meine Seite auf Resonsiv-Webdesign umgestellt und mir dazu die Videos von Axel Pratzner zu Hilfe genommen. Auch ich hatte vorher in HTML4 noch den main-Tag. Habe jetzt aber umgestellt nach den Vorlagen von Herrn Pratzner.
    Hier übrigens eine Kopie der HTML-Übersicht von Axel Pratzners HTML-Seminar www.html-seminar.de : (ich denke dies ist der neuste Stand! Kannst mich aber gerne eines Besseren belehren! ;) )
    Bereiche einteilen über HTML5



    HTML5-Befehle
    Beschreibung






    <header>
    Bereich für Kopf (nicht verwechseln mit <head>!)




    <nav>
    Bereich Navigation (Steuerung)




    <section>
    Gruppiert Elemente




    <article>
    Bereich für Inhalt




    <aside>
    Bereich für Zusatzinformationen zum Inhalt




    <footer>
    Bereich für Fuß


    LG
    Seepferdchen

  • Dass du den main-Tag in HTML4 hattest, kann nicht sein. Der existiert erst seit HTML5.


    Ich verweise dich einfach mal auf das Mozilla Developer Network, wo es immer eine sehr schöne Übersicht und Erklärung zu dem Tag gibt.


    Dort heißt es:


    Zitat

    The HTML <main> element represents the main content of the <body> of a document or application.



    Möchte jetzt aber auch keine Diskussion anfangen, lieber zurück zum eigentlichen Thema...




    bloodyball Du musst dem Footer position: relative; geben, dann klappt's.

  • Also kurze aufklärung zum logischen verwenden von HTML5 Tags..
    Möglicher Seitenaufbau:

    Innerhalb der Hauptaufteilung dar sehr gerne noch mit div's gearbeitet werden, das Article Element sollte wirklich nur für zusammenhängende Inhalte benutzt werden, z.B. für einen Blogbeitrag, (..).
    Div's sind prinzipiell nichts schlechtes, solange sie ordentlich mit html5 tags ergänzt werden und man allgemein sparsam mit Tag's umgeht :)
    Das Article Element ist hingegen eher Selten so richtig richtig. (Hierbei wirklich drauf achten es nur für zusammenhängenden Content zu benutzen und nicht überall als wrapper, anstatt eines div's.


    PROBLEMLÖSUNG
    Bau deine Seitenstruktur nochmal neu auf, und lass mal alles Styling weg.
    Du machst es dir unnötig kompliziert!
    Wenn die Seite ordentlich aufgebaut ist geht alles viel einfacher!


    http://codepen.io/wolf-w/pen/JXqLea?editors=1100


    &Ein kleiner Tip, Klassen Namen udn ID's niemals nach der Position bzw. nach dem Aussehen, sondern immer nach dem Inhalt bzw. der Funktion.. :)

  • Vielen Dank, insbesondere an JR Cologne und Seepferdchen, eure beiden Hinweise haben das Problem gelöst. Ich hatte schon vermutet, dass es mit der Positionierung zu tun hat, da ich viel damit gestylt habe. Vergebt mir meine Sünden :D

Jetzt mitmachen!

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