Willkommen in der Webstatt Zum Webstatt Blog und Stories
Sven Sven am 02.11.06 10:59

Moin,
ich versprechs euch, irgendwann bekomm ich CSS auch gebacken :P
Hab mich mal an folgender Technik versucht, um den Footer ganz unten hinzubekommen: http://solardreamstudios.com/learn/css/footerstick/

Naja, tut leider nicht so ganz. Wäre nett wenn sich das jemand schnell anschauen könnte. Das ganze Layout wie gehabt im Anhang. Danke schonmal.

netcup.de Warum gibt es hier Werbung?
Christian am 02.11.06 11:46

Kannste das nicht irgendwo hochladen?

Sven Sven am 02.11.06 12:09

Getan: http://feinarbeit.net/rossi/

Scraper Scraper am 02.11.06 13:39

Ähm, aber das ist doch ganz unten? Sorry bin grad verwirrt. :(

Sven Sven am 02.11.06 13:42

Ja, der Footer klebt zwar am Rand, aber im Firefox geht der Contentbereich nicht bis ganz runter und im IE geht er zu weit runter. Schaus dir mal an im IE.

Scraper Scraper am 02.11.06 16:06

Also, da ja schon ein Beispiel vorhanden war, hab ich das jetzt einfach umgestellt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Rossitown-Clan.de</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Content-Language" content="de" />
</head>
<style type="text/css" title="defaultStyle">
/*<![CDATA[*/
<!--
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

body {
background-color: #646464;
background-image: url('bilder/background.jpg');
background-repeat: repeat-x;
}

div {
font-family: Verdana, Helvetica, Tahoma, Sans-Serif;
font-size: 11px;
color: #000000;
}

#container-page {
position: relative;
margin: 0 auto;
width: 803px;
min-height: 100%;
height: auto !important;
height: 100%;
border-left: 1px solid #101010;
border-right: 1px solid #101010;
background: #3C3C3C;
}

#container-head {
line-height: 0px;
}

#container-content:after {
display: block;
height: 0;
content: ".";
visibility: hidden;
clear: both;
font: 1px/0px serif;
}

#container-foot {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0 !important;
bottom: -1px; /* For Certain IE widths */
height: 15px;
}
-->
/*]]>*/
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<img src="bilder/top.jpg"><br />
<img src="bilder/header.jpg"><img src="bilder/login.jpg">
</div>
<div id="container-content">Content</div>
<div id="container-foot"><img src="bilder/footer.jpg"></div>
</div>
</body>
</html>

Sven Sven am 02.11.06 16:14

Danke, schaus mir gleich an

Sven Sven am 04.11.06 21:40

Baahhh, ich bekomms einfach nicht gebacken :( http://feinarbeit.net/rossi/
Erbarmt sich mir einer und streckt mir den Contentbereich? Bitte :(

mab mab am 06.11.06 20:23

ich habs mir mal kurz angeschaut und was geändert.

edit:

ups, hab was vergessen. wenn du viel text drin hast, dann könnte es probleme geben. der IE ist hier mal wieder ne ausnahme und spannt die box auf, wenn viel text im content bereich steht. mozilla z.B. macht da nicht mit, deswegen ersetze in der content box height:100% noch mit auto.

Sven Sven am 07.11.06 13:05

Jawoll, tut zwar immernoch nicht 100%ig, aber kann ich mit Leben. Danke dir für deine Mühe!

mab mab am 07.11.06 17:45

was geht noch nicht?

Sven Sven am 07.11.06 18:14

Ist noch bischen zu lang.

Edit: Jetzt ist mir das mit dem längeren Text aufgefallen. Der Text läuft über den Footer und drunter weiter. Bei FF und IE

Scraper Scraper am 07.11.06 20:09

Warum hast du dir mein Beispiel nicht richtig angeguckt? Du scheinst den Clou dieses CSS-Tricks nicht verstanden zu haben. Der Hintergrund wird nicht über dein Content-Div festgelegt, sondern über den Gesamten umschließenden Container. Des Weiteren brauchst du den ganzen Div-Salat, den du gemacht hast nicht.

Sven Sven am 07.11.06 20:27

Ich hatte es mir schon angeguckt, nur wohl wie du sagtest nicht ganz verstanden. Mab hat mir aber schon geholfen, vielen Dank nochmal an dieser Stelle.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt