Footer-Hintergrund verschwnden, wenn Elemente position:absolute

Franzi2704

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

synaptic

ein link zum problem wäre weitaus einfacher, dann kann man sich den murks live ansehen und inspecten, statt sich selber aus deinen schnipseln ne seite zu bauen

Franzi2704

das geht leider nicht... 1. ist das ganze lokal und 2. firmeninterne daten/informationen dabei

MrMurphy

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

Franzi2704

Der Anhang von mir hier müsste eigentlich genügen, oder?

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

Franzi2704

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.

MrMurphy

Hallo,

schmeiß mal

Zitat

position: absolute;

aus der CSS raus und lies nach, wofür das gedacht ist und was es bewirkt.

Gruss

MrMurphy

Franzi2704

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!

MrMurphy

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

Franzi2704

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

Footer-Hintergrund verschwnden, wenn Elemente position:absolute

Tags

Benutzer online in diesem Thema