Hallo da draußen!
Ich habe ein altes CSS Problem, für welches anscheinend die gesamte gebündelte Intelligenz des WWW keine Lösung weiß.
Es geht um folgendes: Ich habe eine Website mit dreispaltigem Layout, Kopf- und Fußzeile.
Nun will ich erreichen, daß die rechte Spalte immer bis zur Fußzeile reicht, egal wie groß der Inhalt der mittleren Spalte ist. Beim IE6 ist dies mit der Angabe: height:100% zu erreichen, bei Firefox und IE7 anscheinend gar nicht. Bei dem Originalbeispiel bei selhtml ist das Problem so gelöst, daß die mittlere Spalte einen relativen Abstand zur rechten Seite hat und so zumindest die ganz rechte Spalte nicht umflossen wird. Diese Lösung scheidet für mich al-lerdings aus, da bei meiner Website die rechte Spalte nur optional ist (das heißt dynamisch ange-zeigt bzw. ausgeblendet wird). Ist die rechte Spalte nicht vorhanden, soll der freiwerdende Platz also auch (ohne Änderungen an der CSS-Datei) genutzt werden.
Weiß irgend jemand, wie es möglich ist zu erreichen, daß die rechte Spalte immer so hoch ist, daß sie bis zur Fußzeile reicht?
Danke schon im Voraus
Gunwald
Ich habe ein altes CSS Problem, für welches anscheinend die gesamte gebündelte Intelligenz des WWW keine Lösung weiß.
Es geht um folgendes: Ich habe eine Website mit dreispaltigem Layout, Kopf- und Fußzeile.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
body, html {
height:100%;
}
body, p a {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver;
}
html>body h1 {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0em 1.1em 1em; padding: 0;
background-color: #eee; border: 1px dashed silver;
min-height:100%;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 0em 1em 16em;
padding: 0 1em 0 1em;
border: 1px dashed silver;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
</style>
</head>
<body>
<h1>CSS-basierte Layouts</h1>
<ul id="Navigation">
<li><a href="../einfuehrung.htm">Einführung in CSS-basierte Layouts</a></li>
<li><a href="../mehrspaltige.htm">Mehrspaltige CSS-basierte Layouts</a></li>
<li><a href="../fixbereiche.htm">Fixe Bereiche mit CSS-basierten Layouts</a></li>
<li><a href="../navigationsleisten.htm">CSS-basierte Navigationsleisten</a></li>
<li><a href="../browserweichen.htm">CSS-Browserweichen</a></li>
</ul>
<div id="Info">
<h2>Info-Box</h2>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div>
<div id="Inhalt">
<h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
<p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
<p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
</div>
<p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.</p>
<p><a href="../mehrspaltige.htm#kopf_fuss">zurück</a></p>
</body>
</html>
Nun will ich erreichen, daß die rechte Spalte immer bis zur Fußzeile reicht, egal wie groß der Inhalt der mittleren Spalte ist. Beim IE6 ist dies mit der Angabe: height:100% zu erreichen, bei Firefox und IE7 anscheinend gar nicht. Bei dem Originalbeispiel bei selhtml ist das Problem so gelöst, daß die mittlere Spalte einen relativen Abstand zur rechten Seite hat und so zumindest die ganz rechte Spalte nicht umflossen wird. Diese Lösung scheidet für mich al-lerdings aus, da bei meiner Website die rechte Spalte nur optional ist (das heißt dynamisch ange-zeigt bzw. ausgeblendet wird). Ist die rechte Spalte nicht vorhanden, soll der freiwerdende Platz also auch (ohne Änderungen an der CSS-Datei) genutzt werden.
Weiß irgend jemand, wie es möglich ist zu erreichen, daß die rechte Spalte immer so hoch ist, daß sie bis zur Fußzeile reicht?
Danke schon im Voraus
Gunwald