[TYPO3-german] ot: CSS mit Bild unterkante Browserfenster ausgerichtet

"Kitsunet (Christian Müller)" christian at kitsunet.de
Mon Aug 13 11:52:59 CEST 2007


Christoph Kuhn wrote:
> Guten Tag
> 
> Ist zwar nicht direkt Typo3 Topic, aber ich denke, hier hat's bestimmt 
> genügend CSS Profis ;-)
> 
> Ich bin ein Template am erstellen, in welchem ein grosses Hintergrundbild 
> unten mittig ausgerichtet wird. Der Footer der Seite soll dann exakt dort 
> drin erscheinen.
> Mit anderen Worten ist also die Anforderung, dass der Body mindestens Portview 
> Höhe hat und dass das Footer DIV immer schön unten ausgerichtet ist.
> 
> http://www.communitymx.com/content/article.cfm?page=2&cid=BAD95 erklärt, wie 
> man mit DIV die gesamte Browserhöhe ausfüllt. Das funktioniert aber nur 
> solange, als in dem DIV nicht weitere divs sind.
> 
> Wenn nun zu wenig Inhalt auf der Site ist, liegt der untere Bildrand in 
> Mozilla mitten in der Seite. In Konqueror liegt das Bild zwar an der 
> Browserunterkante, aber der Footer mitten in der Seite.
> Wenn ich den Footer nun position:absolute mach, ist der Footer in Konqueror 
> zwar am unteren Rand, aber das Bild stimmt nicht mehr überein.
> 
> Hier die grobe Struktur:
> 
> <body>
>   <div id="container">
>     <div id="header">...</div>
>     <div id="sub-container">
>       <div id="main-column">...</div>
>       <div id="left-column">...</div>
>       <div id="right-column">...</div>
>     </div>
>     <div id="footer"></div>
>   </div>
> </body>
> 
> und Teile des entsprechenden CSS dazu:
> 
> body {
> 	background: #000518 url(images/background.jpg) repeat-x;
> 	background-position: center bottom;
> 	margin: 0px;
> 	padding: 0px;
> 	height:100%;
> }
> 
> #container {
> 	width: 100%;
> 	min-height:100%;
> }
> 
> #footer {
> 	width: 100%;
> 	height: 65px;
> 	/*position: absolute;*/
> 	bottom: 5px;
> 	margin-bottom:0px;
> 	vertical-align: bottom;
> }
> 
> 
> 
> vielen Dank für tips
> 
> mfg chris

Google nach footerstickalt. Funktioniert ziemlich gut, damit sollte sich
dein Problem lösen lassen...


More information about the TYPO3-german mailing list