CSS Frage - Container zentrieren

[brandy]

Hallo!

Ich hab auf einer Seite von mir den äusserten Div-Container mit folgenden Stylesheets belegt:

Code: Select all

#container{
background-color: #ffffff;
position: absolute;
width: 845px;
min-height:300px;
height:auto !important;
/*margin:0 auto;*/
margin-left: 200px;
border: 1px solid #dddddd;
}

Der Aufbau ist so gewählt, dass er mir alle Spalten immer gleich lang macht, damit ich immer den gleichen Hintergrund habe. Nun will ich aber den ganzen Container zentrieren, was mir dem auskommentierten "margin: 0 auto;" und "position: relative;" super funktionieren würde, doch leider muss ich es absolute stellen, damit alle Spalten gleich lang sind - wie kann ich nun beides kombinieren?

Vielen Dank für eine Antwort!

Um alles live zu sehen und eventuell mit Web-Developer auszuprobieren: http://www.ff-untergrossau.at!

[NaN]

Hä?
Wozu brauchst Du position: relaitve?
Du benutzt nicht eine einzige Positionierung (also sowas wie left, top etc.).

Bei Dir sind alle Spalten (links, mitte, rechts) mit float:left angegeben. Und sonst nix.
Und hier liegt das Problem.
"Float-Elemente" müssen konkrete absolute Maße haben.
Denn display: block (was bei DIVs normalerweise die Standardanzeige wäre) gilt nämlich für sie nicht mehr. (weil sie ja jetzt keine ganze Zeile mehr einnehmen können, da sie ja eben nunmal "floaten" sollen)

Das ist jetzt schwer zu erklären. Hauptsächlich, weil es sich bei mir hier größtenteils nur um Erfahrungswerte und daraus abgeleitetem gefährlichem Halbwissen handelt.

Ist keine konkrete absolute Höhe bei Elementen mit FLoat-Eigenschaft angegeben, "kollabieren" sie auf ... irgendeine winzige Höhe.
Was sich aber nicht auf deren Inhalt auswirkt, sondern auf das übergeordnete Element. D.h. für die Anzeige von Elementen mit Float-Eigenschaft hat es keine Auswirkung, wohl aber für die browserinterne Berechnung für den Platz, den diese Elemente tatsächlich einnehmen.
Was wiederum bedeutet, dass der DIV mit der id "container" sich logischerweise in seiner Höhe nicht mehr dem Inhalt anpassen kann. Weil er nicht weiß, wie hoch die Elemente sind. (Und der Inhalt der untergeordneten Elemente interessiert in diesem Falle nicht)

Du musst im Prinzip den Browser "zwingen" den #container in voller Höhe darzustellen.
Dafür gibt es einen kleinen Trick.
Einfach unten bevor der #container geschlossen wird ein DIV mit der Eigenschaft clear:both einfügen. (Im standard Stylesheet gab es dafür die Klasse .clearb)
Damit erzwingst Du eine neue "Zeile".
Jetzt weiß der Browser auch, wie hoch der #container gerendert werden muss, weil ja da unter diesen Float-Dingern noch ein Block-Element steht (was aber nichts beinhaltet und daher auch nicht sichtbar ist).

D.h. Du kannst ruhig mit margin:auto arbeiten.
Aber lass dieses position Zeug weg.

[lollipop27]

du kannst das so lösen:

position: absolute;
left: 50%;
margin-left: 428;    /* hier muss die Hälfte der Breite stehen, was bei dir nicht geht... */

[NaN]

du kannst das so lösen:

position: absolute;
left: 50%;
margin-left: 428;    /* hier muss die Hälfte der Breite stehen, was bei dir nicht geht... */

Das ist Blödsinn. Es funktioniert zwar (wenn man anstalle von margin-left: 428  margin-left:-428px angibt ), ist aber kein gutes Webdesign.
left: 50% bedeutet bei position: absolute   links einen Abstand von 50% in Relation zur Breite des Browserfensters.
Der Container würde also erst in der Mitte anfangen, aber nicht in der Mitte zentriert stehen.

margin: auto ist bereits die Lösung, aber dafür auf das position Zeug verzichten und 'nen div mit clear:both einfügen.
Das war's dann schon

[lollipop27]

Huch, ja genau das meinte ich.

NaN: Weiss auch, dass das Unsinn ist, bei einem Layout, dass nach unten flexibel ist. Aber dachte halt, ich fang nicht an, alles von vorne aufzudröseln. Aber das hast ja dann du gemacht.

[owr_bgld]

Ich würd mal grundsätzlich überdenken, einige classes als id anzulegen - und mal das css auch zu ordnen (oder eventuell auch aufzuteilen?) der Überblick ist nicht mehr wirklich gegeben.

Beispiel für Content, wie du ihn haben willst:

Code: Select all

<div id="bodytag"> <hr />
 <div id="pagewrapper">

   <!-- Start Header -->
   <div id="header"></div>
   <!-- End Header -->

   <!-- Start Content (Navigation and Content columns) -->
   <div id="content">

      <!-- Start Sidebar -->
      <div id="sidebar"></div>
      <!-- End Sidebar -->

      <!-- Start Sidebar right -->
      <div id="sidebar_r"></div>
      <!-- End Sidebar right -->

      <!-- Start Content Area -->
      <div id="main"></div>
      <!-- End Content Area -->

   </div>
   <!-- End Content -->

   <!-- Start Footer -->

   <div id="footer"></div>   
   <!-- End Footer  -->


</div> <!-- End Papewrapper -->

</div> <!-- End bodytag -->

[owr_bgld]

zweiter Beitrag, damits übersichtlicher ist - das ist das css für diese Teile:

Code: Select all

/* set font size for all divs, this overrides some body rules */
div {
   font-size: 1em;
/*   border: 1px solid black; */
}

/* if img is inside "a" it would have borders, we don't want that */
img {
   border: 0;
}

#bodytag {
   margin: 10px 0 10px 0;
   background-color: #cccccc;
   width: 100%;
   display: table;
   clear: both;
}
#bodytag hr {  /* Hab ich nur damit IE und FF oberes Menü gleich weit oben beginnen */
   height:0px;
}

/* center page, min max width */
div#pagewrapper {
   border: 1px solid #df1115;
   margin: 0px auto 2px auto;     /* this centers wrapper */
   background-color: #fff;
   color: black;
   width: 950px;
   clear:both;
}


div#header {
   margin: 0;
   padding: 0;
   height: 200px; 
   background-image: url(uploads/images/cms/header_bg.jpg);
   background-repeat: no-repeat;
}

div#content {
   clear:both;
   z-index: 1;
   margin: 20px 0 0 0; /* some air above and under menu and content */
}

div#main {
   margin-left: 205px;
   z-index: 5;
   width: 570px;  
   min-height: 300px;
}


div#sidebar {
clear: left;
float: left;
   top: 0px;
   margin-left: 5px;
   z-index: 3;
   width: 180px;  
}

div#sidebar_r {
float: right;
   width: 150px;
   margin-top: 0px;
   margin-right: 5px;
   padding: 5px;
}

div#footer {
   position: relative; 
   clear:both;    /*    keep footer below content and menu */
   color: #fff;
   background-color: #df1115 ; 
   margin: 0;
   padding: 3px;
}