Probleme mit Layout

R

RuthG

Mitglied
Hallo,

ich grübbel jetzt schon sehr lange an einem Problem rum.
Ich habe ein layout welches einen fixen Kopfteil hat, einen Mittelteil der sich dem Content anpasst und einen Fußzeile die immer unten bleibt. Prinzipiell kein Problem, aber der Mittelteil soll einen Hintergrund haben der mitwächst. Leider funktioniert das einfach nicht. Es bleibt dann je nach Größe des Fensters/Content ein Abstand zur Fußzeile.

Kennt da jemand ein Tutorial / Script oder kann mir einen Tipp geben?
Danke, LG Ruth
 
Das ist leider nicht das was ich suche. Der Mittlereteil soll nicht scrollen. Der Fuß hängt immer unterhalb des Content dran.
Ich hab mich an diese Anleitung gehalten:
http://www.cssstickyfooter.com/de/
Funktioniert auch super, aber leider nicht mit einem Hintergrund im Mittelteil.

So soll es einmal aussehen:
http://www.rundesache.cc/odv.jpg
Man muss sich jetzt nur vorstellen das unten noch ein Abschluss mit einer Fußzeile dran hängt. Die man in diesem Fall nicht sieht, weil sie außerhalb des Ausschnittes ist.

Danke
 
Wie es aussehen soll, hätten wir soweit geklärt, nur wie du es konkret erfolglos versucht hast, weiß hier bislang noch niemand.
 
Nachtrag. Am besten postet du einen Link zu deinem lebenden Objekt, damit man es direkt live und unter Einschluß der verwendeten Grafikdateien betrachten kann.
 
Also so sieht mein Code zur Zeit aus:

HTML: 
<div id="wrap">

    <div id="header">
    <div id="topmenu"><jdoc:include type="modules" style="xhtml" name="top" /></div>
    <div id="logo"></div>
    <div id="kopf"><jdoc:include type="modules" name="bread" styles="xhtml"/></div>
    </div> <!--Ende Header -->
    
    <div id="main">
        <div id="links"><jdoc:include type="modules" name="links" styles="xhtml"/></div>
        <div id="content"><jdoc:include type="component"  /></div>
        <div id="rechts"><jdoc:include type="modules" style="xhtml" name="rechts" /></div>           
	</div> <!--Ende Main-->   
    
</div><!--Ende wrap --> 

<div id="footer">
<div id="fuss"></div>
<p>Österreichischer Diabetiker Verein, Adresse, Kontakt - Impressum</p></div>


Code: 
html, body {
        height: 100%;}

#header, #footer {
	margin: 0 auto;
	width: 1010px;}

#wrap {height: 100%;
	margin: 0 auto; 
	width: 1010px;
}

#main {overflow:auto;
	padding-bottom: 50px;/* must be same height as the footer */
	margin: 0 auto; 
	width: 1010px;	
	background-image: url(../images/content.png);
	background-repeat:repeat-y;}  

#footer {position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	clear:both;
	background-color:#CCC
}

Mit diesen Einstellungen wird entweder ein Abstand vom Content-Hintergrund angezeigt, wenn der Content zu kurz ist oder wenn der Content zu lang ist bleibt die Fußzeile stehen und der Content inkl. Hintergrund läuft dahinter bis zum Ende des Content.
 
Du hast zum einen die Vorgabe des "Sticky Footers" unvollständig übernommen (body > #wrap {height: auto; min-height: 100%;} fehlt bei dir gänzlich), womit #wrap in standardkonformen Browsern keine Mindesthöhe (min-height:100%) besitzt, die gewährleistet, dass der Footer bei zunehmenden Inhalt nach unten rückt, und zum anderen muß #wrap das Hintergrundbild erhalten, da nur es alleine sich bis zum unteren Fensterrand erstreckt, #main hingegen eine Höhe in Abhängigkeit seines Inhaltumfangs besitzt.
 
Zuletzt bearbeitet:
So funktionierts:
CSS:
Code: 
/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 
p {margin:20px 0px}
/* Du musst margin auf 0 für alle Elemente setzen und immer padding statt margin
für vertikale Abstände (top und bottom) verwenden, anderenfalls werden diese margin-
Werte zur Gesamthöhe addiert und der Footer wird zu weit nach unten geschoben, was
vertikale Scrollbalken im Browser erzeugt. */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%; width:960px; margin:0 auto; background-color:#FC0}

#main {padding-bottom: 150px; width:800px; margin:0 auto;}  /* Muss genau so hoch sein wie der Footer */

#footer {
    position: relative;
    margin:0 auto;
    margin-top: -150px; /* Negativer Wert der Footer-Höe */
    height: 150px;
    clear:both;
    background-color:#036;
    width:960px;
}

/* CLEAR FIX */
.clearfix:after {
    content: ".";
    display: block;
    height: 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 */

HTML:
Code: 
<body class="oneColFixCtrHdr">
    <div id="wrap">
        <div id="main" class="clearfix">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>Quis arcu sed elementum, scelerisque egestas, donec elit integer molestie.</p>
        </div>
    </div>
    
    <div id="footer">
        <p>Footer</p>
    </div>
</body>

An Stelle der Farbangabe im CSS Code Zeile 17 kannst Du auch eine Grafik verwenden.

Nachtrag: Hab nicht gesehen, dass Du Code gepostest hast. Der hier ist natürlich nur aufs Wesentliche Deines Problems reduziert.
 
Zuletzt bearbeitet:
Spelmann hat gesagt.:
So funktionierts:
CSS:
Code: 
body > #wrap {height: auto; min-height: 100%; width:960px; margin:0 auto; background-color:#FC0}
Zum Vergrößern anklicken....
Alle von dir im Anschluß von min-height hinzugefügten Regeln sollten besser in einem gesonderten Selektor (#wrap { ... }) aufgenommen werden, damit ältere Browser, die den Kind-Selektor (body > wrap { }) nicht interpretieren, diese auch anwenden.

Der Selektor dient hier nämlich lediglich als Browserweiche, um eine Unterscheidung bei der Mindesthöhenregelung zwischen height:100% und min-height:100% vorzunehmen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück