Spalt zwischen DIV-Elementen

[Detlef G.]

Hallo dr. no

ich schick mal wieder den betreffenden Quellcode.

Ich hasse solche Quelltextschnipsel, weil in ihnen oft wichtiges fehlt, weil man mit diesen nie den Gesamteindruck bekommt, und weil ich diese meist erst noch selbst in eine Beispielseite einfügen muss, um das Problem wirklich nachvollziehen zu können.

Wunder Dich bitte nicht - in das CSS-File hab ich alles reingepackt, was mir so eingefallen oder ich als Tip bekommen habe. Mit Sicherhheit ist die Hälfte unnütz aber so bin ich wenigstens sicher, nix vergessen zu haben.

Hälfte unnütz, nix vergessen?
Wenn du alles mögliche hineinschreibst, ohne zu wissen, wofür es überhaupt gut ist, dann kann es dir leicht passieren, dass du mit einer Angabe einen Bug auslöst, den du mit einer anderen zu beseitigen versuchst.

Was ich an deinen Quelltextstückchen sehe:
Du denkst in Tabellen!
Das kann für vernünftig funktionierende CSS-Layouts tödlich sein!
Bei einem Tabellenlayout setzt du das Layout aus Tabellenzellen zusammen. Alles ist nebeneinander, in Zeilen und Spalten sortiert.
Bei CSS-Layout gibt es keine Spalten sondern rechteckige Bereiche, die (fast) beliebig angeordnet werden können, die nicht zwangsläufig nebeneinander sondern auch inneinander sein können. Ein Designelement braucht vielleicht ein extra Element (z.B. weil einem Element nur _ein_ Hintergrundbild zugewiesen werden kann), aber keine extra Spalte nur für sich selbst.

So weit zur Vorrede, nun zu deinem CSS:

#bkgShade
{
position: absolute;

Wozu das?
Zitat Nummer 87
Nur position:absolute, keine Angaben wo es positioniert werden soll, dürfte also unnütz oder sogar schädlich sein.

width: 850px;
margin: 0 auto;

Ist wirkungslos, aufgrund der absoluten Positionierung.

margin-top: 38px;

Das würde einfacher gehen:

margin: 38px auto 0 auto;

display: block;

Unnötig, weil Defaulteigenschaft von Div-Elementen.

vertical-align: bottom;

Wirkungslos, weil nur auf Inlineelemente und Tabellenzellen anwendbar.

#bkgShade .left
{
...
width: 20px;
...
text-align: right;

Ich kann mir kaum vorstellen, dass in 20px wirklich Text stehen könnte.
Enthält das Element Text oder weitere Inhalte, oder ist es nur für den linken Rahmen?

#bkgShade .middle
{
height: 600px;

Hiermit löst du im IE Hashlayout aus. Das bedeutet, dass das Element nicht mehr von gefloateten Elementen überlappt werden kann, sondern immer daneben oder darunter angezeigt wird. Dabei lässt er ein paar Pixel Abstand. Wie dieser wegzubekommen ist, ohne die Höhenangabe diese Elements wegzulassen, weiß ich auch nicht.

So, nun zu einer möglichen Lösung des Problems:

HTML wie bei dir, und das CSS:

body {  
 text-align: center;  /* damit auch ältere IEs den Block zentrieren */  
}  
#bkgShade  
{  
 width: 850px;  
 margin: 38px auto 0 auto ;  
 height: 600px;  
 background: url(../images/bkg_content_main.jpg) repeat-x top left; /* noch eine zur Grafik passende Hintergrundfarbe angeben, die angezeigt wird, wenn die Grafik noch nicht geladen ist; statt top left wäre auch 20px 0 denkbar */  
 text-align: left;   /* wieder zurück zur Standardausrichtung */  
}  
  
#bkgShade .left  
{  
 float: left;  
 width: 20px;  
 height: 600px;  
 text-align: right;  
 background: url(../images/bkg_content_left.jpg) no-repeat top left;  
}  
  
#bkgShade .middle  
{  
 margin: 0 20px 0 25px;  
}  
#bkgShade .right  
{  
 float: right;  
 width: 25px;  
 height: 600px;  
 background: url(../images/bkg_content_right.jpg) no-repeat top left;  
}

Wenn .left und .right nur das jeweilige Hintergrundbild und keinen Inhalt haben, gäbe es noch einfachere und in der Höhe flexible Möglichkeiten.

Auf Wiederlesen
Detlef