daniel84: DIVs werden in Opera/Mozilla nicht zentriert

Hallo,

schaut euch bitte mal folgende Seite an: http://6fonline.phidji.com/wginsg/guestbook.asp. Mein Problem diesbezüglich ist, dass die beiden Haupt-Divs (also direkte Tochterelemente von Body) im Internet Explorer (6) zwar (wie gewünscht) zentriert positioniert werden, im Mozilla (Firebird) und im Opera (6) jedoch linksbündig.

Mir ist unklar, warum die CSS-Angabe "text-align:center;" für das Body-Tag nicht reicht, um diese beiden Layer zu zentrieren. Zusätzlich die gleiche Angabe in den beiden DIV-Tags hat auch nichts genützt.

Was mache ich falsch?

Gruss & danke
Daniel

  1. Hallo.

    Was mache ich falsch?

    Du setzt vermutlich kein "margin:auto;".
    MfG, at

    1. Hallo,

      Was mache ich falsch?

      Du setzt vermutlich kein "margin:auto;".

      Habe ich tatsächlich nirgends. Allerdings besteht das Problem auch, wenn ich für den Body und/oder die beiden Layer margin:auto setze.

      Oder soll ich das sonstwo setzen?

      Gruss,
      Daniel

      1. Hallo.

        Habe ich tatsächlich nirgends. Allerdings besteht das Problem auch, wenn ich für den Body und/oder die beiden Layer margin:auto setze.

        Wenn du "position:absolute;" bebehältst, ist das auch kein Wunder. Verwende stattdessen wiederum "margin" und "padding" für die Ausrichtung.

        Oder soll ich das sonstwo setzen?

        Ja, "sonstwo" ist immer gut ;-)
        MfG, at

  2. hi,

    Mir ist unklar, warum die CSS-Angabe "text-align:center;" für das Body-Tag nicht reicht, um diese beiden Layer zu zentrieren.

    weil text-align sich nicht auf block level elemente wie divs auswirkt. der IE interpretiert dies falsch.

    margin-left und -right für die divs auf auto zu setzen, wäre die "richtige" lösung.

    gruss,
    wahsaga

    1. Hallo & danke für die Antwort!

      margin-left und -right für die divs auf auto zu setzen, wäre die "richtige" lösung.

      Irgendwie klappt das bei mir nicht... :-( Ich versuchs nochmals mit einer etwas detaillierteren Beschreibung des Ist-Zustandes:

      Habe unter http://6fonline.phidji.com/wginsg/test.asp eine vereinfachte Version der Seite hochgeladen. Wäre froh, wenn du dir das nochmals anschauen könntest!

      Der grundlegende Aufbau dieser vereinfachten Datei ist folgender:

      <body>
        <div>
          Navigationsgrafik
        </div>
        <div>
          <div>
            Hauptnavigation
          </div>
          <div>
            Unternavigation
          </div>
          <div>
            Text
          </div>
        </div>
      </body>

      Allen DIVs wird mittels Style-Definitionen im Header position:absolute zugewiesen; des weiteren werden sie mit Pixel-Angaben positioniert. Alle weiteren CSS-Angaben seht ihr direkt im Quellcode der Seite, ich glaube, es hat wenig Sinn, diese hier zu posten.

      Mein Problem ist nun, dass das ganze linksbündig dargestellt wird, ich es aber gerne zentriert haben möchte (wie http://6fonline.phidji.com/wginsg/guestbook.asp im Internet Explorer). Die Tipps, die ihr mir schon gegeben hattet, habe ich meiner Meinung nach umgesetzt (margin:auto für die beiden DIVs gesetzt), dennoch geht es leider noch nicht.

      Danke für jede Hilfe!
      Daniel

      PS: Noch ein kleines zusätzliches Problem: wie bringe ich dem zweiten Layer (siehe oben) bei, dass er mindestens 80% Höhe des Fensters einnehmen soll, aber grösser werden soll, wenn z.B. der Layer für die Hauptnavigation höher ist. Das Problem tritt bei mir auf, wenn ich das Browserfenster auf ca. 600 Pixel Höhe reduziere.

      1. hi,

        Allen DIVs wird mittels Style-Definitionen im Header position:absolute zugewiesen; des weiteren werden sie mit Pixel-Angaben positioniert.

        du hast doch hier [pref:t=72538&m=417824] von at schon gesagt bekommen, dass zentrierung über margin:auto und absolute positionierung einen widerspruch darstellen!

        ausserdem sehe ich nicht, wo man zur umsetzung des layouts von http://6fonline.phidji.com/wginsg/test.asp auch nur an einer einzigen stelle absolute positionierung brauchen würde.

        du hältst offenbar absolute positionierung für den heiligen gral des CSS-designens (typischer anfänger-"fehler") - das ist sie aber nicht.

        beschäftige dich (v.a.) mit float, dann kriegst du dieses layout auch ohne absolute positionierung hin; und über einen alles umfassenden zusätzlichen container kannst du dann ohne probleme alles mit margin:auto zentrieren.

        gruss,
        wahsaga

        1. Hallo

          hi,

          du hast doch hier [pref:t=72538&m=417824] von at schon gesagt bekommen, dass zentrierung über margin:auto und absolute positionierung einen widerspruch darstellen!

          Das muss ich wohl überlesen haben *schäm*. Habe jetzt bei den meisten DIVs relative Positionierung gewählt - et voilà, es geht! :-) Danke schonmal!

          du hältst offenbar absolute positionierung für den heiligen gral des CSS-designens (typischer anfänger-"fehler") - das ist sie aber nicht.

          Nein, halte ich nicht; ich habe schlicht keine Ahnung, wann ich welche Positionierungsart einsetzen soll/muss ;-( Vielleicht hast du mir einen empfehlenswerten Link, wo ich etwas ausführlicher als in SelfHTML (das habe ich gelesen) über "position" informiert werde?!

          beschäftige dich (v.a.) mit float, dann kriegst du dieses layout auch ohne absolute positionierung hin; und über einen alles umfassenden zusätzlichen container kannst du dann ohne probleme alles mit margin:auto zentrieren.

          Das war auch noch ein wesentlicher Punkt: alle bestehenden DIVs in einen neuen "Hauptlayer" legen!

          gruss,
          wahsaga

          Gruss,
          Daniel

          1. hi,

            Vielleicht hast du mir einen empfehlenswerten Link, wo ich etwas ausführlicher als in SelfHTML (das habe ich gelesen) über "position" informiert werde?!

            hm, jein.

            am besten für's verständnis sind m.E. immer noch beispiele, wie man sie z.b. unter http://glish.com/css/, http://www.bluerobot.com/web/layouts/ oder http://www.meyerweb.com/eric/css/edge/ findet.

            gruss,
            wahsaga