Ebenen mit CSS positionieren

[Timo]

Hallo,

Wie kann ich es erreichen, dass bei drei vorhandenen Ebenen der mittleren Ebene eine relative Breite von 100 % zugewiesen wird, aber dennoch einen absoluten Abstand zum rechten und linken Rand gegeben ist?

Ich habe es bisher mit dem folgenden CSS-Code versucht. Leider liefert er nicht das gewünscht Ergebnis:

#left
{
position:absolute;
top:2px;
left:10px;
width:150px;
height:145px;
background-color : White;
}

#middle
{
position: relative;
top:2px;
left:165px;
right:135px;
width:100%;
height:145px;
background-color : White;
}

#right
{
position:absolute;
top:2px;
right:10px;
width:120px;
height:145px;
background-color : White;
}

Für Hilfe wäre ich sehr dankbar, denn ich komme leider nicht weiter.

MfG

Timo

[AndréZ]

Hallo,

Wie kann ich es erreichen, dass bei drei vorhandenen Ebenen der mittleren Ebene eine relative Breite von 100 % zugewiesen wird, aber dennoch einen absoluten Abstand zum rechten und linken Rand gegeben ist?

Du solltest den Abstand zum umgebenden Element mit

margin-left:??px
margin-right:??px
margin-top:??px

gestalten

André

[Timo]

Hallo André,

danke für Deine Antwort. Leider liefert das auch mit margin-Abständen nicht das gewünschte Ergebnis. Ich habe es jetzt mal so getestet:

#topmiddleframe
{
 position:absolute;
 height:145px;
 background-color : White;
 margin-left:250px;
 margin-right:250px;
 margin-top:2px;
}

Diese Ebene wird jetzt gar nicht mehr angezeigt!!!

Hast Du sonst noch Ideen?

MfG

Timo

[AndréZ]

#topmiddleframe
{
 position:absolute;
 height:145px;
 background-color : White;
 margin-left:250px;
 margin-right:250px;
 margin-top:2px;
}

Diese Ebene wird jetzt gar nicht mehr angezeigt!!!

#topmiddleframe
{
position:absolute;
height:145px;
background-color : White;
margin-left:auto;
margin-right:auto;
margin-top:2px;
}

Margin-auto orientiert sich am Box-Modell und berechnet sich aus der gesamten Breite des angezeigten Bereiches abzgl. <div>-Breite.

LG

[Thomas J.]

Tag auch

#middle
{
position: relative;

...
 }

Nimm position:relative raus und verwende dafür margin.
Einige Beispiele findest Du hier: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html.

Thomas J.

[Timo]

Hallo Thomas,

vielen Dank für Deine Antwort und den Link!!!

Da ist genau da bei, was ich gesucht habe. Werde ich mir heute abend mal ansehen.

Danke!

Timo

[Jan]

Hallo,

Du willst drei bereiche nebeneinander anordnen, da würde ich nicht mit
psition arbeiten sondern mit float:left; den linken und rechten bereich
gibst du eine feste breite, die abstände zwischen den bereichen und zum
fensterrand werden nur mit margin festgelegt, dem mittleren bereich
brauchst du keine breite geben, du darfst ihm keine breite geben er
nimmt immer den zur verfügung stehenden platz ein, in der breite.

diese konstruktion funktioniert auch im nn4.x

Gruss, Jan aus Dresden