Willkommen in der Webstatt
User-1 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. xyz-48ke schonmal.

netcup.de Warum gibt es hier Werbung?
User-2 am 02.11.06 11:46

Kannste das nicht irgendwo hochladen?

User-1 am 02.11.06 12:09

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

User-3 am 02.11.06 13:39

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

User-1 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.

User-3 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>

User-1 am 02.11.06 16:14

xyz-48ke, schaus mir gleich an

User-1 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 :(

User-4 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.

User-1 am 07.11.06 13:05

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

User-4 am 07.11.06 17:45

was geht noch nicht?

User-1 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

User-3 am 07.11.06 20:09

Warum hast du dir mein Beispiel nicht richtig angeguckt? Du scheinst den Cxyz-123 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.

User-1 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 xyz-48k 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