✔ Div Background

dsNDesign

dsNDesign

Erfahrenes Mitglied
Hi,
Mein Anliegen:
Habe im oberen Bereich einen background im body, welcher in x-Richtung wiederholt wird. Der Content wird automatisch angepasst (height:auto)
Unter dem Content möchte ich nun einen Footer anbringen. Ist ja eigentlich kein Problem. Jedoch soll dort auch ein Hintergrund über die ganze Breite des Bildschirms gehen.

So sieht es aus:
http://www.imagebanana.com/img/jcz93mdq/Unbenannt.png

Der graue Balken soll immer ganz unten sein.

CSS:
Code: 
body {
	margin:0px;
	padding:0px;
	font-size:12px;
	font-family:Arial;
	color:#fff;
        background-image:url(../bilder/bg.png);
	background-repeat:repeat-x;
	background-color:#0692a2;
}
#bgg {
	width:100%;
	background-image:url(../bilder/footbg.png);
	height:39px;
	left:0;
	position:absolute;
	bottom:0px;
}
#footer {
	width:1200px;
	height:39px;
	background-image:url(../bilder/foot.png);
	position:absolute;
	bottom:0;
}

HTML:
Code: 
<div id="container">
    <div id="content">></div>
    <div id="bgg"></div>
    <div id="footer"></div>
</div>

Der #bgg ist der Background des Footers, dass dieser über die gesamte Breite geht. Ich kann diesen ja nicht in den background vom body einbinden, da dort überhalb des sich anpassenden contents bereits der breitere graue Balken ist, der im body-Tag festgehalten ist.

Weiß jemand, wie ich das ganze richtig lösen kann?

Gruß
 
Hi,

ein Blick in die von mir als Wichtig markierten, und dementsprechend in der Themenübersicht oben festgehaltenen CSS - FAQ, hätte dir deine Frage beantwortet, und das Thema hier erspart.

Maik hat gesagt.:
Moin,

da im abgelaufenen Jahr '09 in mehr oder weniger regelmäßigen Abständen (aktuell erst vor wenigen Tagen wieder) Anfragen zum Thema "Sticky Footer"* im CSS-Forum aufgetaucht sind, hab' ich mich mal den vergangenen Abend mit drei technischen Lösungsansätzen näher beschäftigt, denen ich im Webmaster FAQ-Bereich einen Beitrag gegönnt habe, um zukünftig auf ihn verweisen zu können :)

* Footer haftet bei geringem Seiteninhalt am unteren Rand des Browserfensters, und rückt bei zunehmenden Inhaltsumfang nach unten.


  1. Wie lässt sich der Footer am unteren Fensterrand ausrichten? - Neu -
Zum Vergrößern anklicken....

Dein illustriertes Problem dürfte in dem Moment im Browser aufgenommen worden sein, wenn der Inhalt der Seite gescrollt werden kann, und der Footer-Bereich in seiner ursprünglichen Fensterposition verharrt, anstatt im Anschluß des Inhalts zu folgen, sprich bei zunehmenden Inhaltsumfang auch nach unten zu rücken.

mfg Maik
 
Übrigens bietet sich bei deinem Vorhaben an, den Footer-Bereich so auszuzeichnen:
HTML: 
<div id="container">
    <div id="content">></div>
    <div id="bgg">
        <div id="footer"></div>
    </div>
</div>


CSS-Regeln für das Kindelement #footer:
CSS: 
#footer {
	width:1200px;
	height:39px;
	background-image:url(../bilder/foot.png);
}

mfg Maik
 
Danke schonmal für die Antwort. Jedoch ist mein Problem noch nicht ganz gelöst. Auf manchen Seiten habe ich weniger Inhalt, als das Fenster groß ist. Das heißt, dass bei solchen Seiten nun der Footer zwar direkt unter dem Content kommt, er aber somit "in der Luft hängt".

Ich hoffe, man kann verstehen was ich meine. Wenn nicht, kann ich noch ein Bild dazu posten.

EDIT: Hatte einen einfachen Fehler^^ Es geht nun perfekt. Danke nochmal.
 
Zuletzt bearbeitet:
Wenn es dir darum geht, dass der Footer bei geringem Inhalt am unteren Fensterrand sitzen soll, löst mein "Webmaster FAQ"-Artikel auch dieses Problem.

Hier mal die dritte Variante, in der, analog zu deinem eingangs gezeigten CSS, der Footer mittels einer absoluten bottom:0-Position am unteren Rand des Fensters ausgerichtet wird:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
            <title>Sticky Footer - Version III</title>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
            <meta name="author" content="Maik" />
            <meta name="date" content="2010-01-16" />
            <style type="text/css">
            * {
                    margin:0;
                    padding:0;
            }
            html,body {
                    height:100%;
            }
            body {
                    font:normal 1em verdana, sans-serif;
            }
            #wrapper {
                    position:relative;
                    width:900px;
                    min-height:100%;
                    height:auto !important;
                    height:100%;
                    margin:0 auto;
                    background:#f8f8f8;
            }
            #header {
                    height:100px;
                    background:#e8e8e8;
                    padding:10px;
                    text-align:center;
            }
            #middle {
                    padding:10px 10px 80px 10px;
            }
            #middle p {
                    margin:5px 0;
            }
            #footer {
                    position:absolute;
                    bottom:0;
                    left:0;
                    width:100%;
                    height:80px;
                    line-height:80px;
                    background:#e8e8e8;
                    text-align:center;
            }
            .clearfix:after {
                    content:".";
                    display:block;
                    height:0;
                    font-size:0;
                    clear:both;
                    visibility:hidden;
            }
            .clearfix {
                    display:inline-block;
            }
            /* Bereich nicht für IE-mac Anfang \*/
            * html .clearfix {
                    height:1%;
            }
            .clearfix {
                    display:block;
            }
            /* Bereich nicht für IE-mac Ende */
            </style>
      </head>
      <body>
            <div id="wrapper">
                 <div id="header">
                      <h1>Sticky Footer - Version III</h1>
                 </div>
                 <div id="middle" class="clearfix">
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <!-- Ab hier ist der weitere Inhalt zunächst auskommentiert, um die Ausgangsposition des Footers zu demonstrieren -->
                      <!--<p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>-->
                      <p>- End of Content -</p>
                 </div>
                 <div id="footer">
                      <p>&copy; 2010 Maik@tutorials.de</p>
                 </div>
            </div>
      </body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück