Adriana Mikolaskova Nautsch: Element mit unbestimmter Breite horizontal zentrieren

Hallo,

kann mir bitte jemand schreiben, wie  ich ein Block-Element horizontal zentrieren kann, wenn ich seine Breite nicht festlegen will?

(margin-left:auto, margin-right:auto wird 0, wenn ich keine Breitenangabe mache)

Danke und Gruss

Adriana Mikolaskova Nautsch

falls meine Beschreibung unklar ist, hier der Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<style type="text/css">

#footer{
   border: 3px dotted #dedede;
   }

#test {
   border: 3px dotted #ff0000;
   margin-left:auto;
   margin-right:auto;
   }

</style>

<head>
  <title> </title>
 </head>
 <body>
 <div id="footer">

<div id="test">testtext wird später durch mehrzeilige Elemente ersetzt</div>
</div>
 </body>
</html>

  1. Hallo Adriana.

    kann mir bitte jemand schreiben, wie  ich ein Block-Element horizontal zentrieren kann, wenn ich seine Breite nicht festlegen will?

    (margin-left:auto, margin-right:auto wird 0, wenn ich keine Breitenangabe mache)

    Du musst eine Breitenangabe machen. Wozu soll auch ein Rand gebildet werden, wenn das Element über die volle Breite geht?

    Einen schönen Samstag noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
    Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    1. Hallo Ashura,

      danke!- vielleicht habe ich mein Problem zu sehr vereinfacht. Du hast natürlich Recht, dass ich eine Breitenangabe machen muss.  Vielleicht ist der Aufbau völlig absurd, aber ich würde gerne einen Footer in eine Seite setzen, der horizontal zentriert drei div-Elemente mit mehrzeiligem Inhalt enthält. Die Breite letzterer div-Elemente möchte ich nicht festlegen.

      Wie kann ich sie trotzdem zentrieren? (mit text-align:center hab ich es nicht geschafft...)

      Auch Dir schönen Samstag und Gruss

      Adriana Mikolaskova Nautsch

      Ich habe diese Frage schon mal im Forum gestellt, aber keine Antwort bekommen (vermutlich weil zu kompliziert?- deshalb habe ich jetzt auch das Beispiel vereinfacht) http://forum.de.selfhtml.org/archiv/2005/7/t112276/

      1. Hallo Adriana.

        Vielleicht ist der Aufbau völlig absurd, aber ich würde gerne einen Footer in eine Seite setzen, der horizontal zentriert drei div-Elemente mit mehrzeiligem Inhalt enthält. Die Breite letzterer div-Elemente möchte ich nicht festlegen.

        Hierfür würde ich drei per float formatierte Elemente in ein gruppierendes div-Elemente stecken, welches als eigentlicher Footer fungiert. Doch zentrieren ließen sich diese dadurch nicht.

        Also habe ich dich richtig verstanden, dass die drei (div-)Elemente untereinander sich gegenseitig zentrieren sollen?

        +---------------------------------------+
        |      +---+      +---+      +---+      |
        |<---->|   |<---->|   |<---->|   |<---->|
        |      +---+      +---+      +---+      |
        +---------------------------------------+

        Die mit <----> markierten Bereiche sollen also untereinander variabel sein?
        Ich bezweifle, dass dies möglich ist.

        Einen schönen Samstag noch.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
        30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
        Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
        [Deshalb frei! - Argumente pro freie Software]
        1. Hallo Ashura,

          Danke!

          Also habe ich dich richtig verstanden, dass die drei (div-)Elemente untereinander sich gegenseitig zentrieren sollen?

          +---------------------------------------+
          |      +---+      +---+      +---+      |
          |<---->|   |<---->|   |<---->|   |<---->|
          |      +---+      +---+      +---+      |
          +---------------------------------------+

          Die mit <----> markierten Bereiche sollen also untereinander variabel sein?

          nicht ganz: der Aufbau sieht in etwas so aus, wie von Dir skizziert, aber die drei div-Elemente sollen in der Mitte des gruppierenden Elementes sein.

          Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.

          +----------------------------------+
          |         +---++---++---+          |
          |<------->|   ||   ||   |<-------->|
          |         +---++---++---+          |   +----------------------------------+
          Es soll im Endeffekt gleich aussehen, wie wenn ich eine dreispaltige, mehrzeilige Tabelle auf der Seite zentriere. Da es sich aber um keine tabellarischen Daten handelt, wollte ich es mit divs umsetzen, habe aber eben das Problem, dass ich dann die Breite fest angeben müsste...
          unten nochmals der Code (meines ersten Postings)

          bald schönen Sonntag und Gruss

          Adriana

          1. Hallo Adriana.

            Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.

            +----------------------------------+
            |         +---++---++---+          |
            |<------->|   ||   ||   |<-------->|
            |         +---++---++---+          |
            +----------------------------------+

            Und was soll passieren, wenn der Inhalt der Blöcke Breiter als 1/3 ist?

            Einen schönen Samstag noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
            Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
            1. Hallo Ashura,

              Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.

              +----------------------------------+
              |         +---++---++---+          |
              |<------->|   ||   ||   |<-------->|
              |         +---++---++---+          |
              +----------------------------------+

              Und was soll passieren, wenn der Inhalt der Blöcke Breiter als 1/3 ist?

              ...vielleicht hab ich mich unklar ausgedrückt: es ist nicht wichtig, wie breit der Abstand von den drei div-Elementen zum Rand des gruppierenden Elements ist: die drei div-Elemente sollen im Zentrum sein, d.h. linker Abstand gleich wie rechter.
              Deinen Vorschlag (mit 33%)habe ich auch schon ausprobiert und als Behelfs-Variante in Reserve, aber ich würde es lieber anders lösen, wenn möglich....

              Gruss

              Adriana

              1. Hallo Adriana.

                Und was soll passieren, wenn der Inhalt der Blöcke Breiter als 1/3 ist?
                ...vielleicht hab ich mich unklar ausgedrückt: es ist nicht wichtig, wie breit der Abstand von den drei div-Elementen zum Rand des gruppierenden Elements ist: die drei div-Elemente sollen im Zentrum sein, d.h. linker Abstand gleich wie rechter.

                Das ist mir schon klar.
                Aber egal wie du es anstellst, die Blöcke brechen um, wenn der Inhalt die maximale Breite von 1/3 überschreitet.

                Darum fragte ich auch nach dem von dir gewünschten Verhalten in diesem Falle.

                Deinen Vorschlag (mit 33%)habe ich auch schon ausprobiert und als Behelfs-Variante in Reserve, aber ich würde es lieber anders lösen, wenn möglich....

                Ich weiß, schön ist sie nicht, aber momentan fällt auch mir nichts Besseres ein.

                Einen schönen Sonntag noch.

                Gruß, Ashura

                --
                Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                [Deshalb frei! - Argumente pro freie Software]
          2. nicht ganz: der Aufbau sieht in etwas so aus, wie von Dir skizziert, aber die drei div-Elemente sollen in der Mitte des gruppierenden Elementes sein.

            Sie sollen unmittelbar nebeneinander sein, aber in der Mitte des gruppierenden Elementes.

            +----------------------------------+
            |         +---++---++---+          |
            |<------->|   ||   ||   |<-------->|
            |         +---++---++---+          |
            +----------------------------------+

            Warum nicht so?

            <div style="text-align:center">
            <span> 1. Element </span>
            <span style="margin:2px;"> 2. Element </span>
            <span style="margin:2px;"> 3. Element </span>
            </div>

            Struppi.

            1. Warum nicht so?

              Weil es vorhin noch Block-Elemente mit unbekannter Breite waren.

              1. Warum nicht so?

                Weil es vorhin noch Block-Elemente mit unbekannter Breite waren.

                Naja, da läßt sich ja was gegen machen:

                <div style="text-align:center">
                <div style="display:inline;"> 1. Element </div>
                <div style="display:inline;margin:2px;"> 2. Element </div>
                <div style="display:inline;"> 3. Element </div>
                </div>

                Struppi.

                1. Hallo Struppi.

                  Warum nicht so?

                  Weil es vorhin noch Block-Elemente mit unbekannter Breite waren.

                  Naja, da läßt sich ja was gegen machen:

                  <div style="[code lang=css]text-align:center">
                  <div style="display:inline;"> 1. Element </div>
                  <div style="display:inline;margin:2px;"> 2. Element </div>
                  <div style="display:inline;"> 3. Element </div>
                  </div>[/code]

                  Bestünde aber noch immer die Frage, was passieren soll, wenn der Text breiter als 1/3 ist... (Hier wandern die folgenden Elemente natürlich auf die nächste Zeile.)

                  Einen schönen Montag noch.

                  Gruß, Ashura

                  --
                  Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                  30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                  Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                  [Deshalb frei! - Argumente pro freie Software]
                  1. Naja, da läßt sich ja was gegen machen:

                    <div style="[code lang=css]text-align:center">
                    <div style="display:inline;"> 1. Element </div>
                    <div style="display:inline;margin:2px;"> 2. Element </div>
                    <div style="display:inline;"> 3. Element </div>
                    </div>[/code]

                    Bestünde aber noch immer die Frage, was passieren soll, wenn der Text breiter als 1/3 ist... (Hier wandern die folgenden Elemente natürlich auf die nächste Zeile.)

                    Soweit ich den Thread überschaut habe war bis jetzt nicht davon die Rede, das alle Breiche gleich breit sein sollen, oder?
                    Wenn ja dann ist float:left und width:33% doch eine gute Lösung.

                    Struppi.

                    1. Hallo Struppi.

                      Soweit ich den Thread überschaut habe war bis jetzt nicht davon die Rede, das alle Breiche gleich breit sein sollen, oder?
                      Wenn ja dann ist float:left und width:33% doch eine gute Lösung.

                      Sie möchte aber keine Breite angeben. Also wird der Inhalt wohl zwangsläufig immer umbrechen.

                      Einen schönen Montag noch.

                      Gruß, Ashura

                      --
                      Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                      30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                      Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                      [Deshalb frei! - Argumente pro freie Software]
                      1. Also ich finde die 33% (od eine andere Verteilung der Drittel) eine gute Lösung und verstehe nicht, warum sie unbedingt darauf verzichten möchte.

                        Was für einen Vorteil bringt das? Meiner Meinung nach eher Nachteile, weil früher oder später dadurch das Layout zerschossen wird. So ein Layout funktioniert eben nur mit Tabellen einwandfrei oder in Browsern (z.B. neuere Mozilla), die auch andere Elemente table-like darstellen können.

                        In diesem Falle würde ich einfach eine Tabelle verwenden Prozentwerte angeben oder zusätzlich etwas DOM-Javascript einsetzen...

                        • Danny
                        1. Hallo Danny,

                          Also ich finde die 33% (od eine andere Verteilung der Drittel) eine gute Lösung und verstehe nicht, warum sie unbedingt darauf verzichten möchte.

                          Ich will nicht unbedingt drauf verzichten, aber mich hat's interessiert, ob es eine exakte Lösung gibt. Aber die Lösung mit den 33% ist schon gut brauchbar.

                          Was für einen Vorteil bringt das? Meiner Meinung nach eher Nachteile, weil früher oder später dadurch das Layout zerschossen wird. So ein Layout funktioniert eben nur mit Tabellen einwandfrei oder in Browsern (z.B. neuere Mozilla), die auch andere Elemente table-like darstellen können.

                          In diesem Falle würde ich einfach eine Tabelle verwenden Prozentwerte angeben oder zusätzlich etwas DOM-Javascript einsetzen...

                          Das Problem ist bei einer Website aufgetreten, die mit einem Tabellen-Layout aufgebaut ist und die ich auf möglichst konsequentes CSS-Layout umstellen möchte. An dieser Stelle war ich unsicher, ob ich das als Tabelle belassen, oder auch mit divs und css aufbauen soll. Mein vorläufiges Fazit ist, dass ich doch Breitenangaben mache, weil mir inzwischen auch die Nachteile meiner Vorstellung klar geworden sind...

                          Danke und Gruss

                          Adriana

                2. Hi,

                  das funktioniert aber nur so lange, bis Du einen Zeilenumbruch drin hast... Dann kannst Du <span> od. <div style="display:inline"> vergessen, jedenfalls ohne zusätzliche Hacks.

                  MfG

                  • Danny
      2. Hallo Adriana.

        Ich habe noch einmal etwas experimentiert und habe zwar eine Möglichkeit gefunden, doch zufriedenstellend ist sie noch nicht:

          
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
        <html>  
          <head>  
            <title>Zentrierte Footer-Elemente</title>  
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
            <style type="text/css">  
          
            [code lang=css]html, body{margin:0;padding:0;height:100%;}  
            div#footer p{float:left;width:33%;border:1px dotted;text-align:center;}  
            div#footer p span{text-align:left;}
        

        </style>
          </head>
          <body>
            <div id="footer">
              <p><span>Eine Menge Text zum Lesen, eine Menge Text zum Lesen</span></p>
              <p><span>Eine Menge Text zum Lesen, eine Menge Text zum Lesen, eine Menge Text zum Lesen, eine Menge Text zum Lesen</span></p>
              <p><span>Eine Menge Text zum Lesen, eine Menge Text zum Lesen</span></p>
            </div>
          </body>
        </html>
        [/code]

        Ich wäre froh, wenn jemand eine bessere Lösung weiß.

        Einen schönen Samstag noch.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
        30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
        Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
        [Deshalb frei! - Argumente pro freie Software]
  2. Hallo Adriana,

    mir ist leider auch keine einfache CSS-Lösung bekannt.

    Etwas ähnliches hatte ich mal mit Javascript umgesetzt. Dabei liest man einfach die Maße der Bereiche aus und kann dann entsprechend flexibel zentrieren. Wäre das eine akzeptable Variante?

    freundlichen Gruß
    Danny

    --
    Selfcode: fo:) br:& n4:& ie:% mo:) va:| de:] zu:) fl:| ss:) ls:& ls:& js:|
    Motto:    OpenSource - Das Wissen der Menschheit gehört der Welt!