XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   css layout problem mit 3 zentrierten div´s (http://xhtmlforum.de/showthread.php?t=36564)

horst 18.08.2005 15:23

css layout problem mit 3 zentrierten div´s
 
ich hab in meiner seite 3 divs verwendet.
- das äußerste zum zentrieren des contents in der mitte (dunkler rand) (760px)
- da drin nen weisses div (740px)
- da wiederrum drin der eigentliche content (720px)

Code:

<div id="middleGrau">
<div id="middleWeiss">
<div id="content">
  <table>
        [MEIN CONTENT]
  </table>
</div>
</div>
</div>

das css:
Code:

// zentriert mittig, dunkel grauer rahmen
#middleGrau {
        position: absolute;
        visibility: visible;
        width: 760px;
        left: 50%;
        margin-left: -380px;
        background-image:url(/templates/images/bg_schatten.gif);
        height: 100%;
        min-height: 750px;
        z-index:10;
        border:1px solid #ff0000;
}

// zentrierte weisse fläche auf dem dunkel grauen div
#middleWeiss {
        position: absolute;
        visibility: visible;
        left: 10px;
        width: 740px;
        background-color:#ffffff;
        height: 100%;
        min-height: 750px;
        z-index:20;
}

// eig. content, auch zentriert auf den beiden anderen divs
#content {
        position: absolute;
        visibility: visible;
        left: 10px;
        width: 720px;
        height: 100%;
        z-index:30;
}

Sieht so aus:
http://img354.imageshack.us/img354/7821/19uo1.gif

Mein Problem ist, dass wenn ich einige sehr lange Seiten habe, dann werden die beiden äußeren Container nicht der Länge des Content-Containers angepasst, also der Content läuft über die beiden "Rahmen-Container" hinaus.

Siehe hier:
http://img354.imageshack.us/img354/5125/21yt.gif

Ich raffe gerad nicht so ganz warum das so ist.
Ich hätte eben gern, das alle 3 Container gleich lang sind in der Höhe.
Mit dem height:100%; maximiere ich den Container auf Bildschirmgröße, aber eben leider nicht auf Seitenlänge...

Kann mir jemand von euch auf die Sprünge helfen?

Swoop 18.08.2005 15:26

die Lösung deines Problems findest du wenn du mal float in die suchfunktion eingibst..

\infty 18.08.2005 15:44

Ein absolut positioniertes Element streckt seinen Elterncontainer nicht!

Verwende statt dessen:
Code:

position: relative;

horst 18.08.2005 16:47

Zitat:

Zitat von \infty
Ein absolut positioniertes Element streckt seinen Elterncontainer nicht!

Verwende statt dessen:
Code:

position: relative;

Und ich dachte immer das absolute und relative Angaben nicht gemischt verwendet werden dürfen... Ich war bisher davon ausgegangen das entweder nur absolute oder nur relative Angaben benutzt werden dürfen...
*Etwas verwirrt*. :?

fricca 18.08.2005 20:40

Zitat:

Zitat von horst
Und ich dachte immer das absolute und relative Angaben nicht gemischt verwendet werden dürfen... Ich war bisher davon ausgegangen das entweder nur absolute oder nur relative Angaben benutzt werden dürfen...

Du darfst alles einsetzen, was nötig ist.
IMHO brauchst du für dein Layout weder absolute noch relative Positionierung.
Horizontales Zentrieren macht man besser mit margin:0 auto - denn dann verschwinden die Inhalte nicht unerreichbar nach links, wenn das Browserfenster sehr schmal ist.

Ich verstehe auch nicht, weshalb du drei verschachtelte Container brauchst. Die Eigenschaften margin, border und padding sind dir bekannt?
Und warum steckst du deinen Inhalt in eine Tabelle?

Grüße
fricca

horst 19.08.2005 10:34

Zitat:

Zitat von fricca
Ich verstehe auch nicht, weshalb du drei verschachtelte Container brauchst. Die Eigenschaften margin, border und padding sind dir bekannt?

Hmm, ich denke ich werde den Aufbau wohl auch nochmal überarbeiten.
3 Container sind wohl wirklich etwas überdimensioniert, da ist was dran, aber ich fand den Aufbau so bisher (für mich) recht übersichtlich! :?

Naja, mal sehen.
:lol:

Danke für die Tipps und Anregungen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:42 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022