XHTMLforum - webseite komplett mittig aufbauen, trotzdem flexibel bleiben

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - webseite komplett mittig aufbauen, trotzdem flexibel bleiben (http://xhtmlforum.de/showthread.php?t=67713)

webseite komplett mittig aufbauen, trotzdem flexibel bleiben

hallo zusammen

ich wende mich, nach aufwändiger suche in letzter not an euch.
ich versuche krampfhaft, ein kleines positionierungsproblem zu lösen und komme auf keinen grünen pfad;

die angehängte grafik soll das prinzip der webseite zeigen. dabei ist das grüne divelement immer mittig zentriert, die orangen sollen dabei jeweils mit dem gleichbleibenden abstand dazu drum rum gruppiert werden. in der skizze hat es einen kleinen fehler, die abstände von orange zum rand soll natürlich flexibel bleiben. nun habe ich ewigkeiten versucht, hab mit position und margin, z-index und ja, sogar mit tabellen :cry: experimentiert, scheitere aber immer wieder an den beziehungen zwischen den einzelnen elementen, welche sich gegenseitig immer zu verschieben scheinen. geht das überhaupt? und wie würde das in etwa aussehen?

auf jedenfall tausend dank jetzt schon!

Ha, nevermind, habs selber hinbekommen. soweit so skizzenhaft, jedoch richtig:

css:

Code:

div.all {

        width:792px;

        height:536px;

        position:absolute;

        top:50%;

        left:50%;

        margin: -268px 0 0 -396px;

        background-color:#CCC;

        z-index:4;

}



div.pic {

        position:absolute;

        width:724px;

        height:468px;

        top: 50%;

        left: 50%;

        margin: -234px 0 0 -362px;

        background-color:#093;

        z-index:5;



}



div.top {

        position:absolute;

        width: 230px;

        height: 14px;

        top:0px;

        left: 50%;

        margin: 0px 0 20px -115px;

        background-color:#09C;

        z-index:6;



}



div.bottom {

        position:absolute;

        width: 230px;

        height: 14px;

        bottom:0px;

        left: 50%;

        margin: 20px 0 0 -115px;

        background-color:#09C;

        z-index:6;



}



div.left {

        position:absolute;

        height: 230px;

        width: 14px;

        top:50%;

        left: 0px;

        margin: -115px 20px 0 0;

        background-color:#09C;

        z-index:6;



}



div.right {

position:absolute;        height: 230px;

        width: 14px;

        top:50%;

        right: 0px;

        margin: -115px 0 0 20px;

        background-color:#09C;

        z-index:6;



}

html dann logischerweise:

Code:

<div class="all">



        <div class="top"><p>top</p></div>

    

    <div class="right"><p>r</p></div>





        <div class="bottom"><p>bottom</p></div>





        <div class="left"><p>l</p></div>

    

    <div class="pic"><img src="test.jpg" /></div>

    

</div>

Hallo,

um eine alternative Lösung vorzuschlagen, habe ich schnell ein kleines Beispiel gebastelt, welches die Pseudo-Elemente ::before und ::after verwendet. Das Markup wird mit dieser Methode entsprechend schlank gehalten. Hier das Beispiel:

- Zentrierte Box mit Rahmen

Um das Prinzip zu demonstrieren, habe ich den Elementen einen zusätzlichen Rahmen (grau, gepunktet) verpasst und die Zuweisung der z-index Eigenschaft auskommentiert.

Gruß, lotti.

Super, genau das hab ich gesucht, Danke!