✔ Div Layout, Header, Content (variable Größe?), Footer

[versuch13]

Hi,

hab hier mal wieder ein Problem mit einem Layout. Hab ewig hin und her probiert aber bekomm es nicht so hin wie ich möchte.

> Also, es geht darum das ich den Footer gerne ganz unten sitzen haben möchte, und der Content Bereich soll variabel in der Größe sein. So das die ganze Seite nicht gescrollt wird, aber der Content Bereich

Vielen Dank im vorraus.

greetings

 

[c2uk]

Nun gut, das was Du willst geht meines Wissens nur mit Javascript. Ich bin selber nicht so fit darin, aber hier: http://www.alistapart.com/articles/footers/ gibts nützliche Tipps wie man den footer ganz an den unteren Rand bekommt, vielleicht lässt sich das ganze noch so erweitern wie Du es gerne hättest.

P.S. Könnte vielleicht doch noch ohne Javascript gehen, ich versuchs mal, versprechen kann ich nichts.

 

[versuch13]

Ja, also, mit Tabellen, wäre es ja kein Problem zu realisieren. CSS Layouts mach ich noch nicht besonders lange.
Weißt du ob es nicht vielleicht möglich ist, den Footer, wie man z.B. in einer Zelle mit valign="bottom" etwas postionieren kann, an den Fuß vom main container zu verfrachten?

Danke im vorraus.

MfG

 

[Maik]

Hallo versuch13,

selbstverständlich geht es ohne JavaScript - hier ist die CSS-Lösung:

body
{
margin:0px auto;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#main
{
position: absolute;
left: 50%;
margin-left: -250px; /* neg. Hälfte von width:500px = zentriertes DIV */
width: 500px;
height: 100%;
background-color: #CCCCCC;
border:1px solid black;
}

#header
{
height: 100px;
background-color: #666666;
padding: 0;
}

#content
{
background-color: #999999;
padding: 0;
}

#footer {
position: absolute;
bottom: 0;
width: 500px;
height:30px;
background-color: #666666;
padding: 0;
}

Browsercheck: IE (5.5), Mozilla (1.6), NN (7.0), Opera (7.23)

[ editpost ]
Leider dehnt sich das contentDiv in der Höhe aus, wenn der Inhalt länger wird, sodass der Footer nach unten verschoben wird - ergo: nicht das contentDiv, sondern die komplette Seite muss gescrollt werden.

Hier zwei alternative Lösungen by Stu Nicholls:

1. Layout
2. Stu Nicholls | Cutting Edge CSS | CSS Layout Basics 2

 

[versuch13]

Hi Maik,

vielen Danke, das reicht ja auch erstmal aus. Die Lösungen von Stu Nicholls muss ich mir dann mal genauer ansehen. Aber dein Style ist wie immer ja gut zu verstehen. danke.

MfG

 

[hela]

Hallo,

falls es jemanden interessiert: In Zusammenarbeit mit Quaese ist ein Tutorial auf der Basis von Stu Nicholls 'Fixed' layout v3 entstanden. Leider liegt das schon seit Januar in der Tutorials-Inbox. Vielleicht ist es aber in o.g. Zusammenhang interessant und ich hänge es deshalb mal diesem Beitrag an.

 

[LeH]

@Maik:

Wie muss ich mit Navigationen (rechts und links, also 2) umgehen? Dein Code funktioniert wunderbar, nur werden untereinander dargestellt:

navi links

content

navi rechts
---

Ich bekomnme die dinger nicht nebeneinander.

Viele Grüße Leon

 

[ibomania]

Guck mal hier rein

http://www.tutorials.de/tutorials198400.html

IBO