nicht angemeldet
Hi Alexander,
erstmal danke für Deine Anmerkungen, mit den meisten liegst Du sehr richtig. Aber mit meinem größten Problem bringt mich das noch nicht weiter ... ich versuch es noch einmal ein bisschen präziser zu formulieren:
Mozilla 1.72:
haut die mittlere Spalte über das Layout hinaus. ist richtig kaputt.
Das liegt daran, dass du als Höhe 100% angegeben hast,
das ist "eine Browserfensterhöhe"
Aber genau da liegt das Problem: Wenn ich da keine Höhe angebe, wird die Hintergrundfarbe immer nur soweit gefüllt, wie der DIV-Container mit Inhalt gefüllt ist.
Hier noch einmal so präzise wie möglich das Problem:
- Ich möchte alle drei Spalten mit bestimmten Hintergrundfarben dafiniert
haben (Links grau, Mitte weiss, Rechts grau) - Ich hätte gerne, dass alle Spalten, egal, wie viel Inhalt darin ist, die
definierte Hintergrundfarbe von oben bis unten tragen
-> so wie es jetzt ist (siehe neuer Code), ist es suboptimal. So
funktionierts nur, wenn die mittlere die inhaltlich längste ist
Finds echt haarig. Habe schon alles mögliche ausprobiert und das "hintergründliche" Füllen von Spalten sollte doch nun eigentlich kein Problem darstellen. Stelle ich mich in dieser Frage vielleicht etwas doof an? Habe ich einen grundsätzlichen Konstruktionsfehler im Spaltenlayout?
<html>
Wo ist der Doctype?
Vergessen. Hab ihn jetzt eingesetzt.
<head>
<style type="text/css">
/* Definitionen des Body und der Div-Container */
body {
text-align:center;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;Das kann man auf margin: 30px;
kürzen.
Danke, das lag an verschiedenen Varianten, die ich hier ausprobiert habe, die nicht so symmetrisch waren.
Hatte ich noch nicht gesäubert ...
}
/* Abstandsdiv */
Warum gibst du nicht einfach dem body
margin-top: 72px; ?
Weil das Layout genauso aussehen soll. Innerhalb der außeren gerstrichelt/gepunkteten Borders soll über den beiden Seitenspalten noch etwas hinein. Deswegen komme ich über den body nicht ran.
background-color:#ffffff;
Das geht auch so: #fff;
Danke, ja.
Warum gibst du die Einheiten nicht in em oder % an?
Damit hättest du ein skalierbares Layout.
Das hat auch einen Grund. Horizontal soll es bis auf einen kleinen Rand immer skalierbar sein. Allerdings soll in der mittleren Spalte ein Banner von 468x60 laufen. Das tut es bei 800x600 Screens (vorgegebene Minimal-Voraussetzung) aber ohne Layout-Verschiebungen nur, wenn ich die beiden Seitenspalten auf max. 120px laufen lasse. Nur dann ist in etwa genug Platz in der Mitte. Jedenfalls ist _mir_ hier keine andere Lösung eingefallen, die funktioniert hat.
Gruss und danke schon im Voraus für Eure Hilfe
Beatnik
--
Hier noch einmal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3-spaltiges Layout (Test)</title>
<style type="text/css">
/* Definitionen des Body und der Div-Container */
body {
text-align:center;
margin: 30px;
/* height:85%; */
}
/* Abstandsdiv */
#topspace {
height:40px;
background-color:#fff;
}
/* Inhaltsbereich (3spaltig) */
#main {
width:100%;
border: 1px dotted #9D9EB1;
background-color:#eeeded;
}
/* Inhaltsbereich (Mitte) */
#content {
margin-left: 120px;
margin-right: 120px;
padding-right:10px;
padding-left:10px;
text-align: left;
background-color:#fff;
border-right: 1px dotted #9D9EB1;
border-left: 1px dotted #9D9EB1;
}
/* Linke Spalte (grau hinterlegt) */
#leftbox {
border-top: 1px dotted #9D9EB1;
width: 120px;
float: left;
}
/* Rechte Spalte (grau hinterlegt) */
#rightbox {
border-top: 1px dotted #9D9EB1;
width: 120px;
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="topspace"></div>
<div id="leftbox">Links<br /> <br /> </div>
<div id="rightbox">Rechts</div>
<div id="content">Mitte</div>
</div>
</body>
</html>