Kamil Garbacz: Mehrere DIV's zentrieren?

Ich habe bereits den ganzen gestrigen Tag herumexperimentiert, aber auf eine Lösung habe ich bisher noch nicht. Ich möchte zwei nebeneinander stehende DIV-Container auf der Seite zentrieren. Ist nur ein DIV vorhanden, so klappt dies mit "margin: auto;" wunderbar. Nun möchte ich aber, dass ein zweiter (später auch dritter, vierter) DIV Container hinzukommt. das ganze soll eine Navigationsleiste werden it jeweils unterschiedlichem BG-Color usw. Sobald ich aber ein weiteren DIV einfüge, sind beide linksbündig. Hier zunächst der Code:

<html>
<head>
<style type="text/css">

#box1 { position:absolute; width:150px; height:50px; }
#box2 { position:absolute; top:0px; left:150px; width:150px; height:50px; }

</style>
</head>
<body style="text-align: center;">

<div style="margin: auto;">
 <div id="box1" style="background:yellow;">Menü 1
         <div id="box2" style="background:blue;">Menü 2</div>
 </div>
</div>

</body>
</html>

Auf "float:left" habe ich dabei verzichtet, weil ich mich 1. damit nicht auskenne und 2. nur so einen automatischen Umbruch beim verkleinern des Fensters verhindern will, auch wenn dies gegen CSS spricht. Habe mich also für eine absolute Positionierung entschieden.

Wie kann ich nun die beiden Boxen zentrieren? Sie liegen doch schon innerhalb eines DIV's, das zentriert ist oder?

Eine Suche ergab hier keinen Erfolg, darum dieser Post! Ich bin völlig neu in der Materie CSS und habe bislang meine Designs mit Tabellen entwickelt. :)

Danke im vorraus für Eure Hilfe!

  1. Das es hiermit irgednwie gehen würde ist mir klar:

    #zentriert {
      position:absolute;
      top:50%;
      left:50%;
      width:30em;
      height:20em;
      margin-left:-15em;
      margin-top:-10em;
    }

    Aber sobald ich mehrere DIV Elemente nebeneinander lege, so muss ich jedesmal ihre Gesamtbreite berechnen und um den entsprechenden halbierten Wert verschieben. Ich kann aber noch nicht sagen wieviele Elemente ich letztendlich zentrieren möchte und ob nicht eins davon keine feste Breite sondern eine relative (zum Beipsiel: 20%) hat.

    Gibt es da keine einfachere Möglichkeit... sowas wie "div.. align=center"... ? :)

  2. Liebe(r) Kamil,

    <div style="margin: auto;">
    <div id="box1" style="background:yellow;">Menü 1
             <div id="box2" style="background:blue;">Menü 2</div>
    </div>
    </div>

    wieder am DIV-Suppe köcheln? [<http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Menüs auf SELFHTML-Art>]

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. wieder am DIV-Suppe köcheln? [<http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Menüs auf SELFHTML-Art>]

      Also muss man mit Listen arbeiten? Eine Möglichkeit das ganze nur mit DIV zu lösen gibt es nicht?

      Gruß Kamil

      1. Hello out there!

        Also muss man mit Listen arbeiten? Eine Möglichkeit das ganze nur mit DIV zu lösen gibt es nicht?

        Divitis

        See ya up the road,
        Gunnar

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
        1. Divitis

          Verstehe, danke.