typisches Problem mit mehreren Divs nebeneinander.

[Sketty]

Hallo CSS-Profis,

ich habe folgendes Problem,

3 Divs sollen konseqent nebeneinander sein. Bisher kein Problem, habe ich auch so geschaft. Auch das das gesamt Bild in der Mitte ist, habe ich hinbekommen. Mit "absolute", und mit margin-left und margin-top. Passt auch so alles.

Aber es soll aber so sein, das das Div in der Mitte, immer im Zentrum ist und immer die gleiche Größe hat, da sich dort noch viele andere Divs befinden. Die Divs Außen wiederrum sollen genau am Rand des Divs in der Mitte sein, allerdings sollen diese sich je nach Monitor bzw. Auflösung verbreitern, bis an den Monitorrändern. Bei mir liegen sie zwar genau an den Rand des Divs in der Mitte, allerdings bekomme ich sie nicht breiter bis an den Rand des Monitors. Bislang haben auch alle Divs eine feste Größe, das in der Mitte soll es ja sowie so haben. Aber bei den Divs außen soll es flexibel sein. Wenn ich bei Breite 100% oder auto schreibe erfüllt das nicht seinen Zweck.

Hier der Code ( habe nur die entscheidenden Abschnitte rauskopiert, da ich sehr viele Divs habe und es sonst zu viel wäre)

body {
color: #008000;
background-color: #CCCCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

div#alles {
width:1084px;
height:586px;
position:relative;
margin-top:100px;
margin-left:0px;
}


die linke Div

div#linkeseite {
}
div#links_streifen {
background-image:url('../pics/links_streifen2.jpg');
height:550px;
width:26px;
position:absolute;
float:left;
margin-top: 22px;
margin-left: 90px;
}


die Div in der Mitte

div#webfeld {
height:586px;
width:1008px;
margin-top:0px;
margin-left:90px;
position:absolute;
}

die Div rechts

div#rechts_streifen {
background-image:url('../pics/rechts_streifen3.jpg');
height:550px;
margin-top: 22px;
margin-left:1141px;
width:50px;
float:left;
position:absolute;
}


So ich hoffe, ihr könnt mir helfen, danke im Voraus.

[Laus]

Was genau sollen den die beiden Divs links und rechts enthalten, nur einen Hintergrund oder ist da auch Inhalt drin?
ein online beispiel wäre nicht schlecht.

[Sketty]

dort ist jewals nur ein Hintergrundbild, allerdings muss es milimetergenau an das in der Mitte, sonst stimmt das Gesamtbild nicht mehr.

[mysql]

Hallo,

wäre schon das Gesamtkunstwerk zu sehen. Evtl. kann man mehr dazu sagen.

Grüße

[Sketty]

http://www.muetra.de/html/

[Laus]

3 Divs sollen konseqent nebeneinander sein. Bisher kein Problem, habe ich auch so geschaft. Auch das das gesamt Bild in der Mitte ist, habe ich hinbekommen. Mit "absolute", und mit margin-left und margin-top. Passt auch so alles.

Hast du leider nicht, und schon gar nicht mit Position absolut! Deine Seite ist nur bei einer Auflösung von 1024x768px zentriert, bei 1280px oder höher klebt das alles links am Rand.
Das einfachste um deine Seite so wie sie ist zu zentrieren ist: Nimm aus deinem body das margin:0px, auto; und das position:relative; raus und Setze es in dein <div id="webfeld">. Da dies um die ganze Seite geht wird auch die ganze Seite immer zentriert angezeigt. Den body kannst du nicht zentrieren!
Auch solltest du deinen Code Validieren es befinden sich viele Fehler darin.
zB.:

Code: Alles auswählen

margin:0px;

   margin-left:82px;

   margin-top:54px;


entweder oder! also schreibweise

Code: Alles auswählen

margin:54px 0 0 82px:

oder margin:0px weglassen und nur die komplette Bezeichnung verwenden. usw. das mal fürs erste.

Gruß Xaver