Hallo zusammen, ich habe meine Webseite mit CSS aufgebaut und stehe nun vor einem kleinen Problem!

Aufgebaut ist die Seite wie folgt:

3 Bereiche untereinander (header, wrap, footer width:750px)

in wrap befinden sich 2 Bereiche untereinander (description, content width:500px) und rechts daneben habe ich einen bereich (sidebar width:250px)

das problem ist das der Bereich "sidebar" nicht über die Bereiche descrition und content geht (in html wäre das problem rowspan, in css habe ich leider keine ahnung)

formatiert ist das ganze wie folgt:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

#header {   height:84px;   width:750px;   border:2px solid #545539;   margin:0 auto;   background-image: url(../gfx/sb.jpg);   background-repeat:no-repeat;   background-position:50% 50%;   background-color:#808259;   padding:12px;   }     #wrap {   background:#fff;   margin:0 auto;   border:2px solid #545539;   border-width:0 1px;   width:750px;   }     #description {   width:500px;   margin: 0;   background:#efefef;   padding:0px 0px 0px 0px;   }     #content {   background-color: #323232;   padding:0px 0px 0px 0px;   width:500px;   text-align: justify;   }     #sidebar {   padding:0px 0px 0px 0px;   margin:0px 5px 5px 0px;   margin-left:500px;   width:250px;   text-align:right;   background-color:#646464;   }     #footer {   margin:0 auto;   background:#f6f6f6;   border:2px solid #545539;   text-align:center;   font-size:0.94em;   padding:5px;   width:740px;   text-decoration:none;   }

anbei noch ein bild um das besser zu verstehen. der weisse Bereich ist "wrap"

Hi,

hoffentlich habe ich Dein Problem richtig verstanden.

Da das Sidebar-Div seine Höhe immer an seinen Inhalt anpasst, ist eine eindeutige Höhenangabe
nicht möglich. Eine Lösung wäre es, im wrap-Div ein Hintergrundbild einzubinden, das 750 Pixel
breit und nur wenige Pixel hoch ist. Diesem Bild gibst Du in den linken 500 Pixeln die Hintergrundfarbe
des Contents, die rechten 250 Pixel füllst Du mit der Sidebar-Background-Farbe. Die Grafik weist
Du per CSS dem entsprechenden Container zu.

Code :

1	#wrap{ background: #fff url(hintergrundgrafik.gif) 0 0 repeat-y;}

Damit wird dem Container eine HIntergrundgrafik eingefügt, die in der linken oberen Ecke
beginnt und sich nur in y-Richtung wiederholt. Da sich diese Grafik über die gesamte Dvi-Höhe
erstreckt, erscheint der Eindruck, dass die Bereiche ebenfalls über die gesamte Höhe ausgedehnt
sind.

Ich hoffe, das hilft Dir weiter.

Ciao
Quaese

Hallo!

Ich bin mir auch nicht wirklich sicher, ob ich Dein Problem verstanden habe Du versuchst den "weissen" Bereich wegzubekommen, oder? Sollte dem so sein, dann versuch's mal so:

Ein div außenrum zur Positionierung auf der Seite insgesamt (das zentrieren). Dort rein kommen Deine jetzt schon gemachten divs. Und damit kannst Du die auch positionieren.

Das so als Denkansatz, wenn Du da nicht weiter kommst, dann sag's nochmal, dann schreibe ich Dir den Code nochmal um.

Gruss

hi,

wenn ich dich richtig verstanden habe dann könntest du einfach mit fest definierten tabellen arbeiten, dann könntest du dir auch die umständlichen css`s sparen. Bsp:

<table style="position:absolute;top:0px;left:0px;"><tr><td>header</td></tr></table>

<table style="position:absolute;top:100px;left:0px;"><tr><td>linker bereich</td></tr></table>

<table style="position:absolute;top:100px;left:500px;"><tr><td>menu</td></tr></table>

was soll das denn bedeuten... mit tabellen layoutet man nicht... dumme antwort! ich habe das problem aber mitlerweile lösen können!

vielen dank an diejenigen die mich nicht davon abhalten wollten mit css zu arbeiten

Du könntest es ns allen noch mitteilen, wie denn die Lösung nun aussah. Vielleicht braucht's ja irgenwann nochmal jemand.

Aber trotzdem gut, dass es jetzt funktioniert

Gruss Bud

ich habs letzten endes ganz anders geregelt... ich hatte es mal mit float versucht, kannte allerdings "clear" nicht und hatte entsprechende probleme... mit clear hats dann prima funktioniert.

also war die lösung für mich beide teile (den content und die sidebar) mit float zu positionieren und dann den float einfach wieder schliessen... fertig!

Danke!

Das ja auch mal ne Idee. Ich persönlich positioniere lieber, dann hab ich auch die Kontrolle über meine Elemente. Ich bin aber halt auch so ein "Ich-gebe-die Schriftgrösse-fest-vor"-Typ

Kannst das fertige Ergebnis dann in den Sitecheck stellen...

Gruss Bud

ja, positionieren tue ich ja auch, nur halt aussen herum nen grossen "frame" mit float teilen und dann darin die elemente positionieren. du meinst das du lieber alles mit margin etc. regelst, oder?
bis zum fertigen ergebnis wird es wohl noch etwas dauern!

Hallöchen nochmal!

Ich werde warten!

Nein, ich nutze float nur für das Positionieren von Bildern bzw Text innerhalb eines Paragraphen. Ich verwende absolute Positionierung.

Z.B. "#div {position:absolute;top:0px;left:0px; width:955px; height:200px;}"

Das hat für mich den Vorteil, dass ich volle Kontrolle über das Design behalte, egal welcher Browser und welcher Anwender (mal ganz theoretisch gesehen ).

Dadurch ist für mich ein pixelgenaues arbeiten viel einfacher umzusetzen.

Aber ich glaube da führen viele Wege nach Rom! Ich kann Dir gerne mal eine von meinen css-Dateien mailen...

Gruss Bud

hm... das ist natürlich auch nicht schlecht! wenn ich mir das so überlege könnte ich damit sogar einige (neue) probleme umgehen die sich bei mir ergeben haben. ich hatte vorher (altes tabellenlayout) eine bilderübersicht die 2 spalten genutzt hat, das ganze habe ich jetzt durch css elemente ersetzt, du kannst dir vorstellen das ich mit float nicht (ohne dämliche umwege) mehr als 2 bilder nebeneinander bekomme. das könnte ich mit aboluter positionierung natürlich besser regeln. werde ich morgen mal ausprobieren und wenn es mir gefällt...

falls es dich interessiert, hier ist der css code aus dem sich mein layout ergibt (das grundgerüst)

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

#frame {     width: 700px;     margin: 0px auto;     border: 2px solid #656565;     background-color: #efefef;     background-image: url(../gfx/sidebar.jpg);     background-repeat:repeat-y;  }    #header {     height: 80px;     background-image: url(../gfx/sb.jpg);     background-repeat: no-repeat;     border-bottom: 2px solid #656565;  }    #content {     float: left;     width: 500px;  }    #sidebar {     float: right;     width: 200px;  }    #footer {     text-align:center;     border-top: 2px solid #656565;     background-color: #656565;  }