nicht angemeldet
100% Höhe, fixe Bereiche und IE box model
Bevor jetzt gleich alle aufstöhnen, die "100% Höhe" und dergleichen lesen: dieses Forum hält einige gut Beiträge zu diesem Thema bereit. Was mir am meisten geholfen hat ist http://forum.de.selfhtml.org/archiv/2006/3/t125259/#m807759.
Das Beispiel von Detlef Graff hat mir einiges aufgezeigt, doch beim Erweitern für meine spezifischen Fall, macht mir der IE einen Strich durch die Rechnung. Ich würde gerne den mittleren Teil (content) in einen linken (ohne overflow) und rechten Bereich aufteilen. Firefox macht da problemlos mit. IE macht Mühe, da die CSS Definition für den content mit border-left/top/etc. statt mit left/top/etc. Angaben ausgestattet sein muss. Somit lässt sich das "linke <div>" nicht neben den eingerückten content schieben.
Meine Spielwiese ist <file:http://www.s-tisch.ch/breed/basis2.html>. Wäre toll, wenn mir jemand auf die Sprünge helfen könnte.
@Detlef, dein Beispiel läuft übrigens auch auf Safari wunderbar (deine Frage bezgl. browser Unterstützung)!
Gruss
Marcel
-
hoi, schreib mir aufm email die anfrage, werde dir den code schicken, works fuer alle browsern. Ist bissel der code complex, hab schon mehrere seiten so gemacht, muss noch code clear, um gut fuer dich uebersichtlich zu machen.
Gruess, Inita
-
hi, das ging ja schneller, hatte freie Zeit =)
Nun, es kann probleme beschtehen, wenn du mit verschiedenen bg colors fuer content, footer, header deine seite machen moechtest. Sonst footer ist sticky in allen browsern, auch Mac, Mozilla, ueberprueft =).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>sticky footer</title>
<style type="text/css">
body, html{
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#FFF;
height:100%;
padding:0;
margin:0;}
#page{
width:800px;
padding:0;
margin-top:0;
margin-right:auto;
margin-bottom:110px;
margin-left:auto;
position:relative;
top:0;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */ }
#header{
margin:0;
padding:0}
#cont{
margin:5px;
padding-bottom:160px;
height:auto !important;}
#footer{
width:100%;
margin:0;
padding:0;
position:absolute;
bottom: 0 !important;
bottom:-1px;
height:110px;}
</style>
</head>
<body>
<div id="page" style="border:1px solid">
<div id="header" style="border:1px solid">
<p>header</p><p>header</p><p>header</p>
</div>
<div id="cont" style="border:1px solid">
<p>content</p><p>content</p><p>content</p>
</div>
<div id="footer" style="border:1px solid">
<p>footer</p><p>footer</p><p>footer</p>
</div>
</div>
</body>
</html>-
Danke erstmal für das posting.
Wenn man sich meine Testseite http://www.s-tisch.ch/breed/basis2.html mit IE und Firefox anschaut, so sieht man, dass die Positionierung der einzelnen DIVs (mit sticky header & footer) prima funktioniert.
Das letzte(?) noch zu lösende Problem, ist die Unterteilung des content-DIVs in einen linken und einen rechten Teil. Im IE klappt die Unterteilung jedoch nicht so ganz, denn das Navigations-DIV wird an falscher Position dargestellt. Wieso?Grüsse
Marcel-
Hallo Marcel
Im IE klappt die Unterteilung jedoch nicht so ganz, denn das Navigations-DIV wird an falscher Position dargestellt. Wieso?
Vielleicht liegt es daran, dass du die entsprechenden Angaben für den IE auskommentiert hast?
/* * html #navigation { position: static; width: 305px; height: 100px; border-top: 132px solid white; border-bottom: 27px solid white; } */Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef
Danke für die rasche Antwort.
Vielleicht liegt es daran, dass du die entsprechenden Angaben für den IE auskommentiert hast?
Guter Hinweis ;-) Aber nein, daran liegt es nicht. Ich hatte das nur auskommentiert, um überhaupt einmal was zu Gesicht zu bekommen im IE. In meinen ursprünglichen Versionen hat das Hinzufügen der navigation-Klasse im IE jeweils das layout komplett zerschossen.
Ich habe in der Zwischenzeit die Kommentare entfernt und nochmals verschieden Varianten ausprobiert, aber das heureka habe ich immer noch nicht. Hast du noch Tipps?Gruss
Marcel-
Hallo Marcel
Ich habe in der Zwischenzeit die Kommentare entfernt und nochmals verschieden Varianten ausprobiert, aber das heureka habe ich immer noch nicht. Hast du noch Tipps?
OK, du positionierst #box absolut und zwar mit top, right _und_ bottom, left, jeweils 20px. Damit erreichst du den weißen Rand.
Weil der IE das nicht kann, wird für body ein Innenabstand von 20px gesetzt. Unter Ausnutzung des kaputten Boxmodels des IE im Quirksmodus (ausgelöst durch <?xml version="1.0"?> in der ersten Zeile) kann dann 100% Höhe verwendet werden, statt der absoluten Positionierung:* html #box { position: static; height: 100%; }Damit werden aber die 20px bei absoluten Positionierungen nicht mehr berücksichtigt.
Entweder du berücksichtigst disese Differenz bei der Positionierung von ~~~css #navigation, also:- html #navigation {
top: 152px;
}
oder du verwendest für #box nicht static sondern relative: ~~~css * html #box { position: relative; height: 100%; }Inwieweit das jetzt im IE wirklich funktioniert, kann ich im Moment nicht testen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef
OK, du positionierst #box absolut und zwar mit top, right _und_ bottom, left, jeweils 20px. Damit erreichst du den weißen Rand.
Weil der IE das nicht kann, wird für body ein Innenabstand von 20px gesetzt. Unter Ausnutzung des kaputten Boxmodels des IE im Quirksmodus (ausgelöst durch <?xml version="1.0"?> in der ersten Zeile) kann dann 100% Höhe verwendet werden, statt der absoluten Positionierung:- html #box {
position: static;
height: 100%;
}> Damit werden aber die 20px bei absoluten Positionierungen nicht mehr berücksichtigt. Klar, das habe ich verstanden - aber in der Hitze des Gefechts vergessen/übersehen. > Entweder du berücksichtigst disese Differenz bei der Positionierung von ~~~css #navigation, also: > * html #navigation { > top: 152px; > } >oder du verwendest für #box nicht static sondern relative:
- html #box {
position: relative;
height: 100%;
}> > Inwieweit das jetzt im IE wirklich funktioniert, kann ich im Moment nicht testen. Mit dem ersten Vorschlag kommt der pseudo-browser gut zurecht, der zweite passt ihm gar nicht. So, mittlerweile wird das navi DIV richtig positioniert. Der pseudo-browser versteht aber immer noch nicht, was ich meine, wenn ich ihm mitteile, er soll dieses navi DIV so gross wie möglich machen. Schreibe ich height: 100%; füllt er es bis zum untersten Rand (des viewports) auf, ansonsten räumt er ihm gerade soviel Platz ein, wie der Inhalt der navi benötigt. Was habe ich hier noch nicht verstanden? Es leuchtet mir nicht ein, warum ich content und navigation abgesehen von den linken/rechten Rändern gleich definieren kann. Natürlich habe ich auch was den Inhalt der einzelnen DIVs angeht noch Nachholbedarf, denn dort stehen noch Blindtabellen. Deren Eliminierung scheint mir allerdings dann ein Kinderspiel (öööhhhm, schluck, Mund zu voll genommen?), sobald das Grundgerüst einmal steht.-
Hallo Marcel
... Der pseudo-browser versteht aber immer noch nicht, was ich meine, wenn ich ihm mitteile, er soll dieses navi DIV so gross wie möglich machen. Schreibe ich height: 100%; füllt er es bis zum untersten Rand (des viewports) auf, ...
Wodurch sonst sollte denn die Höhe begrenzt werden, wenn das Element aus dem Fluss genommen ist?
Bei Browsern kann ich alle Seiten absolut positionieren und damit auf Höhe und Breite verzichten.
Das funktioniert beim IE nicht. Deshalb schicke ich ihn in den Quirksmodus, und mache mir das kaputte Boxmodel zu Nutze, indem ich statt absoluter Positionierung Padding fürs Elternelement angebe und Border und 100%.
Das funktioniert allerdings nicht, wenn ich das betreffende Element absolut positioniere.... ansonsten räumt er ihm gerade soviel Platz ein, wie der Inhalt der navi benötigt.
Ohne Höhenangabe bleibt ihm ja auch nichts weiter übrig.
Ich habe mir jetzt nicht die Mühe gemacht, auf deiner Seite nachzuvollziehen, was du dort genau ändern musst, stattdessen habe ich mal schnell lulas Beispiel um einen senkrechten Navigationsbereich erweitert.
Wenn du dir lula1.html genau anschaust, wirst du das bestimmt auch ohne große Probleme für deine Seite umsetzen können.Natürlich habe ich auch was den Inhalt der einzelnen DIVs angeht noch Nachholbedarf, denn dort stehen noch Blindtabellen. Deren Eliminierung scheint mir allerdings dann ein Kinderspiel (öööhhhm, schluck, Mund zu voll genommen?), sobald das Grundgerüst einmal steht.
Das ist die falsche Herangehensweise!
Betrachte deine Seite, so wie sie jetzt ist nur als Übung, wie du generell entsprechende Positionierungen lösen kannst.
Dann fange noch einmal an.
Schreibe erst das HTML, mit den Inhalten, vergesse dabei erstmal, wie es aussehen soll. Verwende dabei sinnvolle Elemente, so dass es ohne extra Layout übersichtlich und nachvollziehbar ist.Erst dann, formatiere die vorhanden Elemente so, dass sie das gewünschte Layout ergeben.
Noch etwas zu meinem Beispiel, und dazu, ob du das wirklich willst.
Das Beispiel entstand extra für lulas Anforderungen.
Sind deine wirklich identisch?
Brauchst du wirklich diese Framesetimitation oder könnte dein Layout auch auf der Basis dieses Beispiels aufgebaut sein. Dazu gibt es einen umfangreichen Artikel, der das sehr gut beschreibt "Footer aller Art - feststehende Elemente realisieren".Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef
Wenn du dir lula1.html genau anschaust, wirst du das bestimmt auch ohne große Probleme für deine Seite umsetzen können.
Super, kommt meinem gewünschten Endresultat ziemlich nahe!
Natürlich habe ich auch was den Inhalt der einzelnen DIVs angeht noch Nachholbedarf, denn dort stehen noch Blindtabellen. Deren Eliminierung scheint mir allerdings dann ein Kinderspiel (öööhhhm, schluck, Mund zu voll genommen?), sobald das Grundgerüst einmal steht.
Das ist die falsche Herangehensweise!
Betrachte deine Seite, so wie sie jetzt ist nur als Übung, wie du generell entsprechende Positionierungen lösen kannst.
Dann fange noch einmal an.
Schreibe erst das HTML, mit den Inhalten, vergesse dabei erstmal, wie es aussehen soll. Verwende dabei sinnvolle Elemente, so dass es ohne extra Layout übersichtlich und nachvollziehbar ist.Ok, auch diesen Tipp (common sense?) nehme ich dankend an.
Erst dann, formatiere die vorhanden Elemente so, dass sie das gewünschte Layout ergeben.
Noch etwas zu meinem Beispiel, und dazu, ob du das wirklich willst.
Das Beispiel entstand extra für lulas Anforderungen.
Sind deine wirklich identisch?Ja, fast identisch.
Brauchst du wirklich diese Framesetimitation oder könnte dein Layout auch auf der Basis dieses Beispiels aufgebaut sein. Dazu gibt es einen umfangreichen Artikel, der das sehr gut beschreibt "Footer aller Art - feststehende Elemente realisieren".
Diesen Artikel habe ich vor einiger Zeit schon gelesen und mir das Beispiel (d.h. die Beispiele) angeschaut. Da ich jedoch durch das padding den weissen Rand erreichen möchte, sieht halt ein scroll bar, der sich dann über die ganze Höhe des view ports erstreckt nicht so toll aus.
Grüsse
Marcel
-
- html #navigation {
-
-
-
-