Footer fälschlicherweise mittig ausgerichtet

  • Der Footer und das entsprechende Hintergrundbild werden mittig ausgerichtet. Hat jemand eine Idee wie ich den Footer da hinbekomme wo er hingehört ?

  • Dir fliegen deine height-Angaben um die Ohren.


    In einem Responsive Design, welches du offensichtlich erreichen willst, haben height-Angaben nichts verloren.


    Die Höhe einer Webseite und ihrerer Inhalte hängt von ihrem Inhalt ab. Die erforderliche Höhe bestimmen die Browser dann selbst. heigt-Angaben sollten also nur ausnahmesweise und nur dann verwendet werden, wenn der Inhalt es erfordert.


    Hintergrundbilder sind kein Inhalt, damit haben height-Angaben im CSS für sie nichts verloren. Deine height-Angaben sind alle überflüssig.


    Zudem solltest du dich mit Klassen (class, .) und ID-Elementen (id, #) beschäftigen, deren Sinn hast du noch nicht verstanden. ID-Elemente dürfen auf jeder Webseite im body-Bereich nur einmal vorkommen. Mit einer Wichtigkeit oder Ähnlichem haben class und id nichts zu tun. Für das CSS solltest du nur class verwenden.


    Um den Footer auf die Schnelle nach unten zu bekommen kannst du das "height: 100%;" im #hauptcontainer" löschen.


    Bei Prozent-Angaben im CSS solltest du wissen, worauf sie sich beziehen. Durch das "height: 100%" wird der #hauptcontainer so hoch wie das jeweilige Browserfenster, der Inhalt des HTML erfordert aber mehr Höhe.

  • Das mit height: 100%; hat funktioniert. Ich weiß gar nicht warum das dort steht und was ich damit erreichen wollte.



    Wenn ich die Höhenangabe bei #header weglasse wird nichts angezeigt. Die Kopfnavigation muss exakt 53P groß sein. Bei dem Rest ist kommentiert worden, dass es nur temporär ist.



    Das mit den ID&Class ist mir Neu. Ich habe damals in einem Tutorial gelesen, dass es keinen Unterschied macht.

    Das heißt, dass IDs einmalig und Klassen mehrmals verwendet werden können ?


    Zitat

    Für das CSS solltest du nur class verwenden.

    Und auch das steht hier auf dieser Internetseite anders.


    Zitat

    Die Frage, warum nicht alles mit class gemacht wird ist berechtigt – die Antwort ist, dass es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf einen Blick sieht, was einmalige Bereiche sind. Weiterhin haben id-Bereiche mehr Gewicht.


    https://www.html-seminar.de/class_und_id.htm

  • Zitat

    Die Frage, warum nicht alles mit class gemacht wird ist berechtigt – die Antwort ist, dass es nicht von gutem Stil zeugt und es geschickter ist, wenn man auf einen Blick sieht, was einmalige Bereiche sind. Weiterhin haben id-Bereiche mehr Gewicht.

    Ja, das ist die seit Jahrzehnten verbreitete Meinung - und falsch. Da man dagegen nicht ankommt weise ich nur darauf hin. Damit haben selbst alte Hasen Schwierigkeiten.


    Da beides funktioniert musst du selbst entscheiden ob du CSS den Regeln nach anwenden willst oder nicht.


    Zitat

    Wenn ich die Höhenangabe bei #header weglasse wird nichts angezeigt.

    Dein #header hat keinen Inhalt, den kannst du also auch komplett weglassen. Auch wenn du es wahrscheinlich nicht verstehst: Eine Grundregel von Webseiten ist, das Hintergrundbilder kein Inhalt sind.


    Zitat
    Die Kopfnavigation muss exakt 53P groß sein.

    Nein.

  • Die Mitarbeiter von W3 haben das nicht verstanden. Das war wie geschrieben von mir nur ein Hinweis, falls du das korrekt lernen willst.


    Mein Beitrag ist weder polemisch noch süffisant gemeint, sondern sachlich. Es tut mir leid und ist schade, falls das bei dir falsch angekommen ist.


    Einfach erklären lässt es sich nicht, die Grundlagen von HTML und CSS, speziell auch des aktuellen, füllen ganze Bücher.


    Um eine Alternative aufzuzeigen muss man die Webseite mit dem aktuellen Inhalt kennen. Beim HTML haben seit HTML5 alle Elemente eine sogenannte semantische Bedeutung. Das dient der Benutzerfreundlichkeit und der Barrierefreiheit. Ohne Inhalt lassen sich deshalb keine korrekten Webseiten erstellen.


    Ich kann dir gerne Fehler und falsches Anwenden von HTML und CSS in deinem Beispiel zeigen. Das mache ich aber nur nach Wunsch, nicht um der Besserwisserei wegen. Das wird auch ein längerer Beitrag werden und auch nur für deinen Füllinhalt.

  • Naja das ist ja an sich einfach zu beantworten.



    #header enthält das Titelbild des Designs. Die einzige andere Möglichkeit das umzusetzen wäre das Bild direkt in die Indexdatei einzubinden. Das ist aber auch unschön.


    Nullius in verba ? ;)

    Verstehe mich bitte nich falsch aber es wäre schön, wenn du eine valide Quelle nennen könntest welche das so bestätigt. Denn selbst mein HTML Buch widerspricht dem.

  • Bei selfhtml steht nicht geschrieben, dass man ausschließlich Klassen verwendet.


    https://wiki.selfhtml.org/wiki…rials/Einstieg/Selektoren


    Man behauptet einfach etwas, das man versucht mit Scheinquellen zu belegen.


    Hier mal ein weitere dem widersprechende Meinung von der Universität in Washington oder aus der Dokumentation von Mozilla.


    https://www.washington.edu/acc…nit3/module5/lesson1.html


    https://developer.mozilla.org/…pe_Class_and_ID_Selectors



    Versteht mich mich nicht falsch, ich möchte es richtig machen aber einfach etwas zu behaupten ohne das adäquat zu begründen ist fragwürdig. Das mit den Höhenangaben und der neuen semantischen Struktur übernehme ich äußerst gerne. Nur hat mir noch niemand erklären können wie man den einen Hintergrund ohne Höhenangabe erstellt.




    Auf dieser Seite habe ich gelernt, dass man aufgrund der Ladezeit nur eine einzige CSS Datei verwendet. Spielt das bei heutigen Ladezeiten überhaupt eine Rolle ?


    Ich würde gerne das CSS vom Template und das vom Inhalt trennen.

  • Zitat

    Nur hat mir noch niemand erklären können wie man den einen Hintergrund ohne Höhenangabe erstellt.

    I. allg. hat der betr. Container auch einen Inhalt in Form von Text, Bildern etc. Dann stellt sich die Höhe dem entsprechend ein und das Hintergrundbild passt sich an.

    Hat er keinen Inhalt, sehe ich keinen Sinn darin, ein Hintergrundbild zu verwenden, sondern Du kannst dann auch ein img-Tag nehmen, wo sich die Abmessungen automatisch einstellen.

  • Mit einer Wichtigkeit oder Ähnlichem haben class und id nichts zu tun.

    Meinen wir was anderes? Selbstverständlich hat eine ID aus CSS Sicht mehr Gewicht, wie eine CLASS.

    Einfaches Beispiel:

    HTML
    1. <div id="bar" class="foo"></div>

    CSS wird Zeile für Zeile verarbeitet, wie folgendes CSS zeigt:

    CSS
    1. DIV { width:200px; height:200px; }
    2. .foo { background:#0c0; } /* grün */
    3. .foo { background:#c00; } /* rot */

    Der Hintergrund des DIV wird rot, weil rot die letzte Definition ist.

    Klar, zwei Klassen haben dasselbe Gewicht und die letztere gewinnt halt, aber

    CSS
    1. #bar { background:#0c0; } /* grün */
    2. .foo { background:#c00; } /* rot */

    zeigt das DIV mit grünem Hintergrund, obwohl rot die letzte Definition ist.

    Das liegt daran, dass die ID #bar wichtiger ist, aus CSS Sicht.


    Oder habe ich Deine Aussage falsch verstanden?