Footer-Hintergrund verschwnden, wenn Elemente position:absolute

    Ich teste momentan das HTML5 Boilerplate und habe schon im Header-Bereich zwei Bilder ganz links bzw rechts am Rand positioniert mit position:absolute. Nun habe ich das gleiche mit dem Footer vor, nur dass es sich hier um Text-Elemente handelt. Allerdings ist hier das Problem, dass er dann diese Elemente nicht mehr als Inhalt vom Footer ansieht, sodass er keinen Hintergrund anzeigt. Das ist der Fall, sobald das zweite Element auf position:absolute gesetzt wird. Kann sich das jemand erklären???
    Als Anhang stelle ich einen Auszug vom HTML Code und CSS Code bereit.

    Ich hoffe, es kann mir jemand weiterhelfen :) Ich stehe langsam echt aufm Schlauch...


    Danke!
    Gruß Franzi

    problem.txt


    achso das "height: 100px" natürlich wegdenken ;) das war nur erstma meine Notlösung

    Einmal editiert, zuletzt von Franzi2704 (1. November 2012 um 13:47)

    Hallo,

    Zitat

    1. ist das ganze lokal und

    Speicherplatz gibt es umsonst, jeder Websiteersteller sollte sich für Tests einen Free-Account zulegen.

    Zitat

    2. firmeninterne daten/informationen dabei

    Die rauszulöschen und durch Blindtext zu ersetzen dauert keine 5 Minuten.

    Wenn du Hilfe wünscht solltest du schon 1. alle Infos liefern und die 2. möglichst barrierefrei zu Verfügung stellen.

    Gruss

    MrMurphy

    Hallo,

    Zitat

    oder?

    Nein. Erst mal fängt schon die Bastelei damit an, das der Pfad zur main.css angepasst werden muss. Und dann fehlen eingebundene Dateien wie

    normalize.min.css

    oder

    modernizr-2.6.1-respond-1.1.0.min.js

    Bei mir sieht die Seite aus deinen Codeschnipseln folgendermaßen aus:

    Daraus kann ich recht wenig erkennen.

    Gruss

    MrMurphy

    also die anderen elemente sind ja hier egal... das js hab ich irgendwie noch nicht mal irgendwo drin und das normalize.min.css macht jetz nicht so viel, aber hier nochma die datei...
    aber du erkennst ja, dass im footer kein hintergrund zu sehen ist, gibt man aber height: 100px oder so an, ist er da... er erkennt die footer-elemente halt nicht als inhalt.

    hab ja gesagt, dass es daran liegt, wenn ich es auf position:absolute setze...

    aber ohne das bekomm ich den inhalt ja nicht an die rechte seite?!? also ok man bekommt es schon mit position:relative hin, aber dann geht das mit respnsive nicht mehr hin und das ist ja der knackpunkt!

    Einmal editiert, zuletzt von Franzi2704 (7. November 2012 um 13:07)

    Hallo,

    Zitat

    hab ja gesagt, dass es daran liegt, wenn ich es auf position:absolute setze...

    Das Problem ist, das du die entscheidenden Infos nur bringst wenn du gereizt wirst. Von

    Zitat

    respnsive

    responsive Design war bisher nämlich überhaupt noch nicht die Rede. Und das von dir genannte HMTL5 Boilerplate benutzt du auch nicht. Es gibt nämlich nicht nur ein Boilerplate sondern auch darauf aufbauende mit speziellen Eigenschaften.

    Soweit ich das bis jetzt verstehe, möchtest du eine Website mit responsive Design erstellen und benutzt dazu Yamb (Yet another mobile boilerplate) als Grundgerüst.

    http://www.prowebdesign.ro/yamb/

    Wenn dem so ist bist du die Site vollkommen falsch angegangen. Wenn du so ein Grundgerüst benutzen willst musst du dich natürlich auch an die Anleitung bzw. die Vorgaben halten. Das sind in Yamb unter anderem die grid-Klassen, also grid_1, grid_2 u.s.w. Die ignorierst du jedoch vollständig.

    Damit passt auch dein gesamter Quelltext nicht. Eine einfache Korrektur ist deshalb nicht möglich.

    Gruss

    MrMurphy

    Ich habe mich daran gehalten: http://www.initializr.com/try und bisher hat ja auch alles geklappt, nur der Footer noch nicht so recht. Habe jetzt drüber nachgedacht, dass ich die Höhe wirklich von Anfang an definiere (erst noch höher) und dann je größer das Fenster wird, umso kleiner wird die Footer-Leiste. Müsste ja eigentlich mit den Media-Queries funktionieren.
    Und ich glaube nicht, dass ich da falsch rangegangen bin, da mein Chef Schritt für Schritt kontrolliert hat ;)