Alle Container bei anderen Auflösungen mittig

[m3alde]

Hallo,

ich habe gegoogled und auch hier im Forum gesucht. Ich habe auch das hier gefunden.

Allerdings ist das Problem ein wenig anders und ich kome deshalb durcheinander.

Also ich habe mehrere Container die bei verschiedenen Auflösungen immer mittig sein sollen.

Hier mein CSS code:

body            {
                background:#B3B3B3;
                background-image:url(background_steine.png);
                }

#container_head {
                position:absolute; 
                width:995px; 
                height:150px; 
                background-image:url(banner1.1.png); 
                border: 0px;
                margin-top:15px;

                }

#container_main {
                position:absolute; 
                width:995px; 
                height:600px; 
                background-color:black; 
                border: 0px;
                margin-top:30px;
                }

#container_navi {
                position:absolute; 
                width:995px; 
                height:90px; 
                border: 0px;
                margin-top:180px;

             
                background-image:url(background.jpg);


                 }

#navi {
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:0px auto;              /* Außenabstand links  */
   margin-right:0px auto;             /* Außenabstand rechts */
 }
 
 #navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }
 
 #navi li {
   float:left;                                             /* Anordnung links   */
   margin-left:15px;                                      /* Außenabstand oben */
   width:150px;                                          /* Breite des Links  */
   hight:90px;
 
   background-image:url(Unbenannt-1.png);        /* Hintergrundfarbe  */
   border-top:1px black solid;                         /* Rahmenfarbe Auflistungpunkt oben */
   margin-top:10px;                                   /* Außenabstand oben  */
   padding-top:8px;                                  /* Innenabstand oben  */
   padding-bottom:8px;                              /* Innenabstand unten */
   padding-left:8px;                               /* Innenabstand unten */
   padding-right:8px;                             /* Innenabstand unten */
 } 
a:visited{color:white;}

Dieser CSS-code ist in meiner main.php.

Also kann mir jemand helfen die container in die mitte zu bekommen? Wäre sehr nice :)

mfg m3al.de#

 

[prm]

Schmeiß mal überall das "position: absolute;" raus. Das ist absolut überflüssig und ich frage mich immer wieder, weshalb das so unüberlegt verwendet wird.

Danach wirst du für die Zentrierung hier fündig:
Horizontale Zentrierung mit CSS

 

[m3alde]

Ohje....danke :)

Klappt alles super. Habe kein Problem mehr mir ist geholfen

Vielen danke

m3al.de#

 

[Efchen]

Also ich habe mehrere Container die bei verschiedenen Auflösungen immer mittig sein sollen.

Das ist mit CSS unmöglich.
CSS bezieht sich immer nur auf den Viewport des Browserfensters. Die einzige Möglichkeit, auf die Auflösung Bezug zu nehmen, ist über JavaScript. Allerdings macht es auch keinen Sinn, Elemente anhand der Auflösung zu zentrieren. Je nach Browserfenstergröße wären die Elemente dann ja nicht oder nicht ganz im Browser sichtbar.

Schmeiß mal überall das "position: absolute;" raus. Das ist absolut überflüssig und ich frage mich immer wieder, weshalb das so unüberlegt verwendet wird.

Ich muss gestehen, dass ich bei meinen ersten CSS-Versuchen auch über das position:absolute gestoßen bin und zuerst dachte, das wäre endlich die Erlösung, die ultimative Möglichkeit, Elemente im Fenster anzuordnen, indem man ihnen sagt, wo genau sie sitzen sollen. Ich denke, das ist einfach ein ganz großer Anfängerfehler, weil das völlig falsch interpretiert wird und die Anfänger zu dem Zeitpunkt noch gar nichts vom Textfluss wissen und sich keine Gedanken über flexible Layouts machen.

Gruß,
-Efchen

 

[ingoS]

@Efchen: Bist du eigentlich auch von Tabellen oder Frames her umgestiegen oder bist du noch nicht so lange "im Geschäft", dass du notgedrungen welche benutzen musstest?
Ich muss nämlich zugeben, dass ich überhaupt kein bisschen nachvollziehen kann, wie man von diesen beiden Techniken ausgehend ausgerechnet auf die absolute Positionierung von Elementen im Fenster kommen kann -- es sei denn, man hat, ganz böse, zuvor auch noch mit Spacer-GIFs gearbeitet. ;)
Nicht, dass ich mal wieder missverstanden werde: Das ist absolut nicht als Vorwurf oder sonstwie abwertend oder so gemeint, ich bin nur unheimlich neugierig. :mrgreen:

 

[Efchen]

@Efchen: Bist du eigentlich auch von Tabellen oder Frames her umgestiegen oder bist du noch nicht so lange "im Geschäft", dass du notgedrungen welche benutzen musstest?

Ich hab meine ersten Gehversuche in HTML etwa 1994/1995 gemacht. Damals hat mich das aber nicht wirklich fasziniert.
Dann kam ich so 1999/2000 wieder damit in Kontakt und hab ein Intranet aufgebaut. Mit Frames, Tabellenlayout und allem Sch* der dazugehört. Und ich war auch noch stolz drauf :-)
Dann CGI-Scripts mit Unix-sh, später Perl.
Dann hatte ich ne Firmenwebsite gemacht. Mit Frames. Aber Deeplink-/Bookmark-fähig und ohne all die Nachteile von Frames. Natürlich mit JavaScript zum Nachladen des Framesets, anders gehts ja nicht.
Aber seit 2002 arbeite ich ausschließlich mit semantischem HTML und CSS.

Ich muss nämlich zugeben, dass ich überhaupt kein bisschen nachvollziehen kann, wie man von diesen beiden Techniken ausgehend ausgerechnet auf die absolute Positionierung von Elementen im Fenster kommen kann -- es sei denn, man hat, ganz böse, zuvor auch noch mit Spacer-GIFs gearbeitet.

Hmmm...nee, Spacer Gifs hatte ich nicht. Ich wüsste jetzt auch keinen besonderen Grund, warum, aber der Gedanke mit der absoluten Positionierung drängte sich mir einfach auf...aber ich hab das ja auch ziemlich schnell wieder verworfen.

Nicht, dass ich mal wieder missverstanden werde

Keine Sorge :-)

 

[ingoS]

So, wie du das beschreibst, klingt es wie dunkle Erinnerungen aus einem früheren Leben. :mrgreen:

Die Frage zur absoluten Positionierung hatte ich deswegen gestellt, weil einer der wenigen Vorteile von Frames und Tabellen -- wenn sie nicht allzu ungeschickt eingesetzt werden -- doch immerhin ihre Flexibilität ist, die ja bei absoluter Positionierung zu großen Teilen verloren geht.

 

[Efchen]

Wer sagt denn, dass ich Frames und Tabellen geschickt eingesetzt hätte? :-)

Nein, im Ernst, ich weiß nicht mehr, was ich mir damals dabei gedacht habe, aber ich konnte den Gedankengang jetzt irgendwie nachvollziehen. Aber damals....da hab ich auch noch gedacht, die Erde wäre ein Würfel (man muss nur aufpassen, wenn man um die Kanten segelt) und die Auflösung würde beim Schreiben von Webseiten eine Rolle spielen :-)

 

[m3alde]

Ok sry Efchen dann habe ich mich wohl falsch ausgedrückt. Allerdings wusste prm anscheinend genau was ich meine und mein Problem ist gelöst.

mfg m3al.de#

 

[Efchen]

Ok sry Efchen dann habe ich mich wohl falsch ausgedrückt. Allerdings wusste prm anscheinend genau was ich meine und mein Problem ist gelöst.

Klar hast Du Dich falsch ausgedrückt. Und ich hab Dich auch von Anfang an verstanden. Aber wenn es so einfach wäre, dann würde es keine Auflösungsweichen geben, die Besucher je nach ihrer Auflösung (und hier wird in der Tat das JavaScript-Objekt "screen" abgefragt) auf eine andere Seite weiterleiten. Das bringt Dir halt rein gar nichts, wenn Du mit einer Auflösung von 1280x1024 und einem Browserfenster von 640x480px Größe auf die große Variante weitergeleitet wirst.

Deswegen habe ich den Klugscheißer raushängen lassen :-) und Dich berichtigt. Weil es tatsächlich Leute gibt, die nicht wissen, dass man ein Fenster auch nicht maximiert haben kann.

Wenn das für Dich nicht zutrifft, dann ist ja alles paletti. Ansonsten hast Du dabei vielleicht noch was gelernt. Wenn nicht Du, dann aber vielleicht andere, die hier mitlesen.

Grüße,
-Efchen