Footer bg-repeat funktioniert nicht

[dsricco]

Hallo zusammen,
bin neu hier dazu gestoßen und habe direkt ein Problem. Habe eine Div-Ebene namens Footer und möchte sie auf die 100%ige Breite repeaten.

Allerdings will es nicht so richtig.


Vorschau der Webseite
Vorschau

Footerebene CSS

    #footer {

      height: auto;
      clear: both;
      float:center;
      text-align: center;
      color: #ffffff;
      background-image: url('Bilder/footer_bg_repeat.jpg');
      background-repeat:repeat-x;
    }

Footerebene HTML

<div id="footer">
 <img src="Bilder/footer_bg.png" width="1100" height="97">
</div>

Probiere das Ganze mittlerweile ziemlich lange aus. Leider ohne Erfolg. Wäre euch sehr verbunden, wenn mir jemand behilflich sein könnte.

Vielen Dank im Voraus!

 

[threadi]

Die Eigenschaft

float:center;

gibt es nicht.

Ebenso gibt es das Bild was Du als Hintergrund einbindest nicht:
http://escore-media.de/preview/belay_test/Bilder/footer_bg_repeat.jpg
Das muss natürlich existieren um überhaupt angezeigt zu werden.

 

[djheke]

Bitte beachte, dass bei einer kleineren Auflösung Inhalte der like-box verloren gehen

 

[dsricco]

Bitte beachte, dass bei einer kleineren Auflösung Inhalte der like-box verloren gehen

Genau! Das habe ich auch festgestellt. Ich möchte, dass sich der Footer je nach Menge des Inhalts anpasst. Wie kann ich das machen. Habe leider keine Idee.

 

[threadi]

Hilft dir meine Antwort oben dazu nicht schon weiter?

 

[dsricco]

Doch die Antwort hat mir sogar sehr gut geholfen, da der Footer sich nun repeatet :) Allerdings ist bei verschiedenen Auflösungen die Webseite verschieden.

 

[threadi]

Webseiten interessieren sich nicht für Auflösungen. Webseiten nehmen immer nur den Bereich im Browserfenster ein (= Viewport). Das Fenster kann auch mal kleiner oder größer sein.

Deine Webseite hat eine Mindestbreite. Daher bildet sich bei Viewports die eine geringere Breite haben ein horizontaler Scrollbalken.

Deine Frage bezieht sich glaube ich jedoch auf den Inhaltsbereich, das der vom Footer überlagert wird sobald der Viewport in der Höhe geringer ist. Die Methode um das zu verhindern nennt man im Netz "footer sticker alt". Hier ist ein Beispiel:
A CSS Sticky Footer
Vergleiche mal deine CSS-Eigenschaften (inkl. html und body) mit denen von dieser Seite und passe deine Seite entsprechend an.

 

[dsricco]

Das klingt doch schon einmal sehr gut :) Ich werde heute Abend den Footer mal durcharbeiten und dann schaue ich mal. Vielen Dank :)

 

[dsricco]

So ich habe es jetzt nachgebaut und es war erfolgreich! :) Vielen Dank schon einmal dafür. Allerdings habe ich jetzt keine Ahnung, wie ich den BG des Headbereichs und des Footers repeaten kann, da diese Ebenen ja eine feste Breite haben und so sich nicht der Auflösung anpassen (so weit ich weiß). Habe es zwar eingebaut aber es funktioniert nicht.

Testseite

 

[threadi]

Nimm beim footer die feste Breite raus, dann geht es.

 

[dsricco]

Nimm beim footer die feste Breite raus, dann geht es.

funktioniert aber die positionierung des copyright-vermerks im footer rutscht dann von auflösung zu auflösung

 

[threadi]

Ich weiß nicht was Du immer mit der Auflösung hast. Die ist irrelevant für Webseiten. Wenn Du diesen Text unten positionieren willst, kannst Du auch auf die absolute Positionierung verzichten und dafür z.B. padding verwenden. Ein padding-top-Wert der groß genug ist damit der Text unten im Footer steht.