nicht angemeldet
Layout: Fixer Kopf + Fuss mit Overflow:auto Content
Hallo,
versuche ein Layout über CSS zu erstellen, welches auch im IE6 funktionieren muss.
Habe schon das Web und SelfHTML durchforstet und was gebaut,
das läuft allerdings nicht wie gewollt. ;(
FF zeigt den Kopf nicht korrekt an, IE nichts wie er soll...
Dabei erhalte ich verschiedene Ergebnisse, wenn ich die Reihenfolge der
CSS-Anweisungen für Kopf, Content und Fuss ändere.
Im FF läuft es, wenn ich die Anweisungen für die Zentrierung weglasse?
So soll es sein:
Das Layout soll insgesamt 740 Pixel breit sein, im Fenster zentriert.
Oben steht ein 150 Pixel grosser Kopf fest und unten ein 20 Pixel
großer Fuß, ebenfalls fixiert. Der Bereich dazwischen nimmt den Content
auf und passt sich dynamisch der Fenstergröße an, bei Bedarf wird
ggf. ein Scrollbalken für den Contentbereich eingeblendet (per Overflow).
Kann mir wer helfen?
Hier der bisherige Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS-Layout</title>
<style type="text/css">
<!--/
.kopf
{
position: absolute;
top: 0px;
width: 740px;
height: 150px;
left: 50%;
margin-left: -370px;
background-color:#9999FF;
}
.content
{
position: absolute;
width: 740px;
top: 150px;
bottom: 20px;
left: 50%;
margin-left: -370px;
overflow:auto;
}
.fuss
{
position: absolute;
bottom: 0px;
width: 740px;
height: 20px;
left: 50%;
margin-left: -370px;
background-color:#9999FF;
}
/-->
</style>
</head>
<body>
<div class="kopf">
Kopfbereich für Logo, Navigation, etc.<p>
</div>
<div class="content">
<h1>Und hier kommt der Content hin!<p>
Und<br>der<br>soll<br>scroll<br>wenn<br>er<br>
den<br>Bereich<br>überschreitet.<br>
Dabei<br>aber<br>dynamisch<br>in<br>der<br>Höhe<br>sein!<br></h1>
</div>
<div class="fuss">
Fußbereich für fixe Infos wie z.B. Impressum, etc.
</div>
</body>
</html>
Danke für Hilfe.
-
Hi!
wie waere es mit "margin:auto" statt "left: 50%; margin-left: -370px;" in deinen Style-Angaben? Das zentriert, nachzulesen in http://de.selfhtml.org/css/eigenschaften/randabstand.htm und muesste auch im IE funktionieren - Fx. 1.5 zeigt den Kopf uebrigens auch falsch an. Ausserdem solltest du dir angewoehnen, <p>-tags abzuschliessen (siehe Kopf-Div).
ciao,
xjs--
http://itisme.org <-- hab ich im mOment keine Zeit fuer
linux is like a wigwam: no windows, no gates and an apache inside!
Selfcode: sh:( fo:| ch:| rl:° br:> n4:| ie:{ mo:} va:) de:> zu:) fl:) ss:{ ls:& js:|-
Hallo XJS.
Habe die Zentrierung ebenfalls aus SelfHTML:
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
Absolute Zentrierung weil ich ja eine Fixe Inhaltsbreite habe.Den <P>-Tag habe ich vergessen, war an der Stelle ja auch nicht so ganz wichtig, nur um Inhalt zu produzieren! ;-)
Ich habe in der Style-Definition noch ein
body { text-align:center; height: 100%; width: 100%; }eingefügt. Jetzt wird alles, auch der Kopf, im FF und IE7 zentriert angezeigt.
Der IE scrollt aber nicht wie gewünscht, sondern überlagert den Fuss mit dem Contentinhalt und scrollt die komplette Seite?
-
Der IE scrollt aber nicht wie gewünscht, sondern überlagert den Fuss mit dem Contentinhalt und scrollt die komplette Seite?
moin joerg!
gib dem content-klasse einfach noch ein "height: 100%;" dann funzt es im FF sowie IE7...
IE6 is da noch was ganz anderes... ;)
.greetz
FRIIIEEK-
Also, ich habe im der Content-Klasse die Height-Angabe ganz weggelassen.
Dann habe ich die Seite so deklariert wie es bei "Kristof Lipfert"
(Link oben) gemacht wurde:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Und schwups: Im FF2 und IE7 siehts so aus, wie ich es haben wollte! :-D
Jetzt darf ich mich dann noch mit Euren Links beschäftigen, um es für
den IE6 hinzubekommen... ich gebe hier Rückmeldung.P.S. Die anderen Links führten alle zu Designs, die den Kopf und Fuss
über die ganze Fensterbreite haben, deshalb funktionierte das hier nicht.Bis hier hin schon mal vielen Dank!
-
IE6 macht es nicht :(
Der zeigt beim Aufruf Kopf und Fuss an der richtigen Position an.
Der Content (mitte) überlagert den Fuss und wenn man scrollt,
dann scrollt alles - Kopf, Content und Fuss! :@Ich sag nichts zum IE und hoffe, es kann mir jemand einen Tipp geben.
Danke!
-
IE6 macht es nicht :(
Der zeigt beim Aufruf Kopf und Fuss an der richtigen Position an.
Der Content (mitte) überlagert den Fuss und wenn man scrollt,
dann scrollt alles - Kopf, Content und Fuss!Ich sag nichts zum IE und hoffe, es kann mir jemand einen Tipp geben.
Wie wäre es, wenn du dir nochmal das verlinkte Beispiel von Stu Nicholls in meinem obigen Posting anschaust, und vielleicht mal darauf eingehst, ob, oder warum das nicht das Gewünschte ist.
Grüße
gaby -
Hallo,
Ich sag nichts zum IE und hoffe, es kann mir jemand einen Tipp geben.
hast du mal eine URI zu deinem aktuellen Code o.ä.?
Grüsse
Cyx23
-
-
-
Hallo,
Der IE scrollt aber nicht wie gewünscht, sondern überlagert den Fuss mit dem Contentinhalt und scrollt die komplette Seite?
was soll er denn scrollen, bzw. was meinst du mit kompletter Seite?
Soll der IE 6 den Scrollbalken verkürzen wie hier?
http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel_self.htmWeitere Beispiele zu position:fixed:
http://www.lipfert-malik.de/webdesign/tutorial/bsp/zwei-spalten-layout.html
http://www.lipfert-malik.de/webdesign/tutorial/bsp/position-fixed.html
http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htmGrüsse
Cyx23
-
-
-
So soll es sein:
Das Layout soll insgesamt 740 Pixel breit sein, im Fenster zentriert.
Oben steht ein 150 Pixel grosser Kopf fest und unten ein 20 Pixel
großer Fuß, ebenfalls fixiert. Der Bereich dazwischen nimmt den Content
auf und passt sich dynamisch der Fenstergröße an,Hi,
Guck mal hier
< http://www.cssplay.co.uk/layouts/bodyfix.html>
Allerdings würde ich hier nicht so, wie Stu Nicholls das gemacht hat, mit "position:absolute" zentrieren, sondern so, wie xjs es vorgeschlagen hat. Evtl braucht der umfassende Container neben dem 'margin:auto' noch ein 'position: relative'.
Grüße
gaby