nicht angemeldet
3 Spalten Layout flexible Höhe
Matthias ApselHallo,
ich habe folgenden Code (teilweise von Selfhtml). Das Besondere an dem Code ist, dass er sich in der Breite anpasst. Dieses Verhalten möchte ich nun auch auf die Höhe übertragen.
Es soll sich immer nach der Längsten der 3 Spalten gerichtet werden (Länge der Spalten ist abhängig vom beinhalteten Text). Die anderen Beiden sollen dann die gleiche Länge haben. Sollten die Längen aller 3 Spalten unter der max. sichtbaren Anzeigenhöhe des Browserbildschirmes liegen, dann sollen die Spalten bis zum unteren Browserrand geführt werden.
Ich habe jetzt schon viel rumgebastelt es aber nicht hinbekomme. Ich vermute, dass ich um die 3 Spalten noch ein Div herummachen muss?!
Ansonsten soll die flexible Breiteneinstellung wie vorgegeben erhalten bleiben.
<!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</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 0em;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
div#top {
background: #345A87;
height: 2.7em;
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; padding: 0;
background: #003366;
}
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: #ffe7a5; background-color: #003366;
}
ul#Navigation a:visited {
color: #666; background-color: #003366;
}
ul#Navigation a:hover {
color: black; background-color: #003366;
}
ul#Navigation a:active {
color: white; background-color: #003366;
}
div#Inhalt {
margin: 0 10.8em 0 14.9em;
padding: 0 1em;
background: #fffcd6;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
background: #ffe7a5;
}
div#Info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
</style>
</head>
<body>
<div id="top">
Top
</div>
<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">
<strong>Info-Box</strong>
<p>Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.</p>
<p>Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
die Angabe einer Breite verzichtet werden und die Seite den ihr zur
Verfügung stehenden Raum ausnutzen.</p>
<p>Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
durch das falsche Box-Modell des Internet Explorer auszugleichen.</p>
</div>
<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>3-spaltiges Layout</h2>
<p>In diesem Beispiel ist die Breite der Navigation etwas reduziert,
um einer zusätzlichen Info-Box an der rechten Seite Platz zu machen;
die Schriftgröße der Navigation und Info-Box ist etwas verringert,
um den relativ geringen Breiten Rechnung zu tragen.</p>
<p>Nur für die äußeren Boxen ist eine Breite und float angegeben.
Durch die Angabe der Breiten relativ zur Schriftgröße in 'em'
können sich die Boxen einer Änderung des Schriftgrades anpassen.</p>
<p>Dieser mittlere Inhaltsbereich wird über seitliches margin auf Abstand
gehalten und passt sich flexibel an die Fensterbreite an.</p>
</div>
</body>
</html>
Gruß
-
Om nah hoo pez nyeetz, Mark!
Du suchst faux columns.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Mark!
Du suchst faux columns.
Matthias
Hallo,
ich hatte mir fast schon sowas gedacht, dass mit Hintergrundgrafiken gearbeitet werden muss, dachte aber es gibt vielleicht mit CSS eine elegantere Lösung. Ich werde mein Glück probieren und sollte es nicht klappen melde ich mich :-)
Gruß
Mark
-