Seitenlayout mit

Computer: Software & Programmierung HTML & CSS
#1

Hi Leute,

ich brauche eine HTML Seite, die eine Höhe und Breite von jeweils 100% hat und dazu folgende Eigenschaften:

Header und Footer mit fester Höhe und dazwischen einen Bereich, der den restlichen Teil füllt. Dieser Bereich kann unter Umständen breiter oder höher werden, als Platz vorhanden ist. In diesem Fall soll auch nur dieser Bereich scrollbar sein - Header und Footer sollen „stehen“ bleiben.

Hier mein erster Entwurf, der noch einige Tücken hat.

html:

…

…

…

css:
#header {
position: absolute;
top: 0px;
width: 100%;
height: 60px;
background-image:url(header.jpg);
background-repeat:repeat-x;
}

#content {
position: absolute;
top: 60px;
bottom: 20px;
width: 100%;
background-color: #ff66ff;
overflow: auto;
}

#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 20px;
background-image:url(footer.jpg);
background-repeat:repeat-x;
}

Kann jemand helfen?
Vielen Dank

#2

Moin

Header und Footer mit fester Höhe und dazwischen einen
Bereich, der den restlichen Teil füllt. Dieser Bereich kann
unter Umständen breiter oder höher werden, als Platz vorhanden
ist.

Das „breiter“ macht mir Sorgen.

#header {

da „fehlt“ ein „left: 0px“.

#content {

„left: 0px“ und overflow muss auf „scroll“ gesetzt werden.

#footer {

und nochmal „left: 0px“.

Kann jemand helfen?

Kannst du das Zeug mit Inhalt online stellen ?

cu

#3

Hi,

Kannst du das Zeug mit Inhalt online stellen ?

cu

Ich habe mal ein Bsp. gebastelt, das alle Probleme aufzeigt. Die Tabelle im mittleren Bereich ist zu breit, der Text darunter zu hoch. Trotzdem ist kein Scrollen möglich.
Wenn der Inhalt im mittleren Bereich nur zu breit, aber nicht zu hoch ist, kann man in der Breite scrollen. Allerdings wird dann auch nicht der komplette Bereich zwischen header und footer gefüllt.

http://home.t-online.de/home/520004422557-0000/test…

mfg

#4

Hallo,

korrekt wäre es, wenn du für header und footer position:fixed; einsetzt. dann braucht header ausserdem ein top:0px; und dann stehen die beiden.

Mit dem Anschneiden des Inhalts ist das so eine Sache. Da konnte ich jetzt auch erst mal nichts machen.

Gruss, Omar Abo-Namous

#5

Ich habe mal ein Bsp. gebastelt, das alle Probleme aufzeigt.
Die Tabelle im mittleren Bereich ist zu breit, der Text
darunter zu hoch. Trotzdem ist kein Scrollen möglich.

Scrollen ist nicht moeglich, da Du den horizontalen Scrollbalken nicht siehst und vom vertikalen zu wenig.

Wenn der Inhalt im mittleren Bereich nur zu breit, aber nicht
zu hoch ist, kann man in der Breite scrollen. Allerdings wird
dann auch nicht der komplette Bereich zwischen header und
footer gefüllt.
http://home.t-online.de/home/520004422557-0000/test…

Fuege in ‚style.css‘ nach Zeile 23 (‚top: 60px;‘) die folgende Zeile ein:
bottom: 20px;
Damit gibst Du fuer den Inhalt auch eine untere Grenze an, so dass die gesamte Seite ausgefuellt wird.
Wenn Du in die Kopf-/Fusszeile Text einfuegst denke bitte daran, die Groessen relativ zu gestalten (also ex als Einheit zu nutzen), ansonsten gibt es insbesondere bei grosser Schrift einige Anzeigeprobleme.

Gruss
Diether Knof

#6

Hallo,

wenn keine Scrollbalken erscheinen, würde ich mal nach Overflow suchen
overflow:scroll sollte die schon zeigen.

ansonsten wie waer es denn mit einem iframe?

Gruss