Guten Morgen,

nach nun vielen Stunden denken, suchen, versuchen, suchen, lesen... scheitern... versuche ich es auf diesem Weg.

Mein Problem besteht darin dass ich in einem bereits zentrierten DIV (1023px breit) versuche weitere drei DIVs zu zentrieren. Diese sollen aber dann auch noch fixiert sein.

Diese drei DIVs sollen eine Art Brücke bilden. In der mitte unterhalb der drei DIVs findet dann der Inhalt statt der scrollbar ist. Das geht auch schon.

Einziges Problem: Die drei DIVs kleben am linken Rand obwohl sie untergeordnet in einem DIV sind der schon zentriert verläuft. Siehe Screenshoot.


Und dass ist der Code aus PHP und CSS:

PHP

<div class="canvas">

<div class="set4_links"></div>

<div class="menue"></div>


<div class="content">
<p>
Sorry I can´t find what I´m looking for! </p>
</div>

<div class="set4_rechts"></div>


</div>


CSS

*
{
padding: 0 0;
margin: 0 0;
font-family: Arial, Helvetica, sans-serif;
}
body
{
background: #000;
}

.canvas
{
width: 1023px;
margin: 0 auto;
background: #FF0;
}


.set4_links
{
top: 0px;
left: 0px;
z-index: 7;
position: fixed;
background: url(gloria_set4_links.jpg);
width: 249px;
height: 917px;
}
.set4_rechts
{
top: 0px;
left: 753px;
z-index: 6;
position: fixed;
background: url(gloria_set4_rechts.jpg);
width: 270px;
height: 917px;
}
.menue
{
top: 0px;
left: 249px;
z-index: 5;
position: fixed;
width: 504px;
height: 159px;
background: url(gloria_menue.jpg);
}
.content
{
top: 159px;
left: 249px;
z-index: 2;
position: relative;
width: 504px;
height: auto;
background: #FFF;
}


Vielleicht hat jemand eine Idee? Ist es überhaupt möglich? Es würde mich wundern wenn nicht.

Im Voraus vielen Dank für eure Tipps und Lösungsvorschläge. Bin um jeden dankbar.

Grüße
Aleks

Angehängte Grafiken

divs_zentriert_und_fixiert.jpg (259,3 KB, 10x aufgerufen)

Knackpunkt ist das Element, worauf sich die Koordinaten (top,left) beziehen, wenn die Positionierung "fixed" ist. Das ist body und nicht div.canvas. Siehe auch:
Fixierte Positionierung

Solche Pseudoframe-Layouts sind nicht ganz unproblematisch, vor allem, wenn sie noch Zentriert werden sollen. Es möglicher weiterer Ansatz wäre, dass der Contentbereich eine feste Höhe bekommt und overflow:scroll.

Z.B. hier: CSS-Frame Lösung, nur Content mit Scrollbalken

__________________
github | http://dnaber.de

scroll ist für sowas immer ungünstig, denn dann erscheint der Scrollbalken immer. Bei auto hingegen nur, wenn er auch benötigt wird. (Auch auf Deinem Link wird auto verwandt.)

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)