Gast: Bereich mit variabler Breite zentrieren

Hallo,

ich habe einen Start-Bildschirm, der den Leser in seiner Browser-Sprache (de, en, fr, nl, pl) begrüßt. Natürlich ist der Text unterschiedlich lang, je nach Sprache.

Es will mir nicht gelingen, diesen variabel breiten div horizontal zu zentrieren.

div#diemitte {  
  position: absolute;  
  display: table-cell;  
  margin-left: auto;  
  margin-right: auto;  
  top: 50%;  
  margin-top: -2em;  
  border: 1px dotted #00f;  
}  

deutsch
english
français
nederlands
polski

Gast

  1. Om nah hoo pez nyeetz, Gast!

    guckst du: http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dom und Dominostein.

    1. Om nah hoo pez nyeetz, Gast!

      Oh nooo, nicht du schon wieder, Matthias,

      guckst du: http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css

      Dieses Beispiel geht aus von einer festen Breite:

      width: 32em;

      also nicht mein Beispiel.

      Gast

      1. @@Gast:

        nuqneH

        Oh nooo, nicht du schon wieder, Matthias,

        guckst du: …

        Dieses Beispiel geht aus von einer festen Breite: …
        also nicht mein Beispiel.

        Dann guckst du: https://forum.selfhtml.org/?t=215084&m=1472448 (zentrierter Container variabler Breite mit linksbündigen Inhalten)

        Oh, der schon wieder, Matthias!

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Om nah hoo pez nyeetz, Gast!

        width: 32em;
        also nicht mein Beispiel.

        Links und rechts zu zentrieren ist überhaupt kein Problem. Das geht auch bei variabler Breite.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dach und Dachs.

  2. @@Gast:

    nuqneH

    ich habe einen Start-Bildschirm, der den Leser in seiner Browser-Sprache (de, en, fr, nl, pl) begrüßt.

    Unter „Browser-Sprache“ würde ich die Sprache des Browser-UI verstehen. Du meinst die im Browser eingestellten bevorzugten Sprachen (Plural), was nicht dasselbe ist.

    deutsch

    Oje, Flaggen.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @Gunnar,
      ich mag die Beiträge, die uns der Lösung des Problems nicht näher bringen.

      1. @@Auch Gast:

        nuqneH

        ich mag die Beiträge, die uns der Lösung des Problems nicht näher bringen.

        Ich auch.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@Auch Gast:

        nuqneH

        ich mag die Beiträge, die uns der Lösung des Problems nicht näher bringen.

        Im Übrigen: siehe Signatur.

        Qapla'

        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

    2. Hallo Gunnar,

      Oje, Flaggen.

      Kennst du ansprechende Grafiken für Sprachen? Ich kenne nur Buchstaben für Sprachen, aber ob die zum allgemeinen Wissen gehören, möchte ich bezweifeln.

      Beim Übermausen werden die Sprachen als Text gezeigt.

      Ja, ich weiss, Handies können nicht übermausen, ist jetzt aber nicht wirklich mein aktuelles Problem.

      Gast

      1. @@Gast:

        nuqneH

        Oje, Flaggen.

        Kennst du ansprechende Grafiken für Sprachen?

        Eine Grafik. Ist im Artikel genannt. S.a. diesen Kommentar.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo Gunnar,

          Eine Grafik. Ist im Artikel genannt. S.a. diesen Kommentar.

          Es ist ja nicht so, als ob ich nicht könnte:
          wähle Sprache

          aber für einen Begrüßungsschirm sieht's Schei** aus.

          Gast

          1. Meine Herren,

            aber für einen Begrüßungsschirm sieht's Schei** aus.

            Design sollte an einen Zweck gebunden sein.

            Im Übrigen finde ich einen bunten Haufen an Flaggen auch weniger ästhetisch als aufgeräumte Text-Links, aber das ist Geschmackssache - Zugänglichkeit ist allerdings keine Geschmackssache.

            Insofern geb ich Gunnar vollkommen recht, muss mir aber gleichzeitig eingestehen, dass ich selber schon Flaggen-Sprachwechsel verbrochen habe.

            1. Hallo,

              Im Übrigen finde ich einen bunten Haufen an Flaggen auch weniger ästhetisch als aufgeräumte Text-Links

              finde ich auch.

              aber das ist Geschmackssache - Zugänglichkeit ist allerdings keine Geschmackssache.

              ACK.

              Insofern geb ich Gunnar vollkommen recht, muss mir aber gleichzeitig eingestehen, dass ich selber schon Flaggen-Sprachwechsel verbrochen habe.

              Und ich, dass mir zumindest die gebräuchlichen ISO-Sprachkürzel wie de, ru, it, en oder de-CH so vertraut sind, dass ich sie manchmal auch anderen Leuten ganz selbstverständlich vorsetze, ohne daran zu denken, dass die vielleicht nicht jedem so bekannt sind.

              So long,
               Martin

              --
              Ist die Katze gesund,
              freut sich der Hund.
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. Hallo Martin

                Und ich, dass mir zumindest die gebräuchlichen ISO-Sprachkürzel wie de, ru, it, en oder de-CH so vertraut sind, dass ich sie manchmal auch anderen Leuten ganz selbstverständlich vorsetze, ohne daran zu denken, dass die vielleicht nicht jedem so bekannt sind.

                Dumm nur, dass de-CH nicht für Schweizerdeutsch steht.

                Ich halte mich ja lieber an die Ergebnisse aus dem Testlabor. Die Nutzer haben oft so ihre eigenen Vorstellungen und Meinungen.

                Beste Grüsse Richard

                1. Meine Herren

                  Ich halte mich ja lieber an die Ergebnisse aus dem Testlabor. Die Nutzer haben oft so ihre eigenen Vorstellungen und Meinungen.

                  Kannst du Fallstudien empfehlen?

                2. Hallo,

                  Und ich, dass mir zumindest die gebräuchlichen ISO-Sprachkürzel wie de, ru, it, en oder de-CH so vertraut sind, [...]
                  Dumm nur, dass de-CH nicht für Schweizerdeutsch steht.

                  nein, sondern für "die in der Schweiz gesprochene Variante von Deutsch", während das Schwyzerdütsch ja schon fast(?) als eigenständige Sprache gelten kann.

                  Ciao,
                   Martin

                  --
                  Butterkeksverteiler zu werden ist vermutlich eine der wenigen beruflichen Perspektiven, die sich noch bieten, wenn man einen an der Waffel hat.
                    (wahsaga)
                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                  1. @@Der Martin:

                    nuqneH

                    nein, sondern für "die in der Schweiz gesprochene Variante von Deutsch", während das Schwyzerdütsch ja schon fast(?) als eigenständige Sprache gelten kann.

                    ^W^W gilt und deshalb ein eigenes Sprachkürzel 'gsw' hat.

                    s.a. http://forum.de.selfhtml.org/archiv/2012/8/t210824/#m1438069

                    Qapla'

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  2. Hallo Martin

                    nein, sondern für "die in der Schweiz gesprochene Variante von Deutsch", während das Schwyzerdütsch ja schon fast(?) als eigenständige Sprache gelten kann.

                    Der entscheidende Punkt ist nicht die gesprochene Sprache, sondern das Beherrschen unterschiedlicher Darstellungsformen etwa dieser Art:

                    100.000,00 EUR = 123,035.07 CHF   81.438,07 EUR = 100,000.00 CHF

                    bei de.DE 81.438,07 EUR  123.035,07 CHF

                    bei de.CH 81,438.07 EUR  123,035.07 CHF

                    Beste Grüsse Richard

        2. Hallo,

          Kennst du ansprechende Grafiken für Sprachen?

          Eine Grafik. Ist im Artikel genannt. S.a. diesen Kommentar.

          Ich zitiere:
          "There had been an attempt to introduce such icon [http://www.globalbydesign.com/2009/04/23/is-this-the-next-language-icon/] but they failed, and right so. The best icon we have so far is a globe or map. It doesn’t clearly say ‘language menu’, rather vaguely ‘some kind of localization‘, but the user would figure out its meaning."

          Wieviele Leute wohl einen Globus als Synonym für WWW sehen und wieviele eine Landkarte für den Einstieg in eine Navigation/Routenplanung? Wirklich klarer wird es dadurch in meinen Augen nicht.

          Viele Grüße
          Siri

          1. Meine Herren,

            Hallo,

            Kennst du ansprechende Grafiken für Sprachen?

            Eine Grafik. Ist im Artikel genannt. S.a. diesen Kommentar.

            Ich zitiere:
            "There had been an attempt to introduce such icon [http://www.globalbydesign.com/2009/04/23/is-this-the-next-language-icon/] but they failed

            Inzwischen hat die besagte Initiative ein neues Icon erstellt. Wenn man's weiß erkennt man's...

            --
            Hey Girl,
            i wish you were asynchronous, so you'd give me a callback.
            1. Hallo,

              Inzwischen hat die besagte Initiative ein neues Icon erstellt. Wenn man's weiß erkennt man's...

              Da weiß ich jetzt spontan nicht, ob ich Lachen oder Heulen soll?!

              Rotierender Wegweiser zum Sushi?
              Wegweiser zum rotierenden Sushi?
              Hier können sie Windrädchen für Kinder bestellen?
              ;-)

              Viele Grüße
              Siri

            2. @@1UnitedPower:

              nuqneH

              Inzwischen hat die besagte Initiative ein neues Icon erstellt. Wenn man's weiß erkennt man's...

              Besser als das vorige. Aber gut? Ich weiß ja nicht.

              Die Idee mit Zeichen aus verschiedenen Schriften ist nicht neu. Aber so, wie sie hier umgesetzt ist, lässt sich das Icon nicht auf vermutlich oft gewünschte Größe verkleinern; die Details würden verlorengehen und nichts mehr erkennbar sein.

              Ich glaub nicht, dass dieses Icon der Weisheit letzter Schluss ist.

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          2. Hi,

            Wieviele Leute wohl einen Globus als Synonym für WWW sehen ...

            keine Ahnung, mir wäre diese Assoziation jedenfalls nicht in den Sinn gekommen. Ich hätte den Globus eher als Symbol für weltweit verteilte Niederlassungen oder Filialen eines Unternehmens gesehen.

            Ciao,
             Martin

            --
            Ungeschehene Ereignisse können einen katastrophalen Mangel an Folgen nach sich ziehen.
              (Unbekannter Politiker)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Hallo,

              Wieviele Leute wohl einen Globus als Synonym für WWW sehen ...

              keine Ahnung, mir wäre diese Assoziation jedenfalls nicht in den Sinn gekommen. Ich hätte den Globus eher als Symbol für weltweit verteilte Niederlassungen oder Filialen eines Unternehmens gesehen.

              Mhmm... Du bist doch auch so eine Art "Urgestein" der Webentwicklung und des Forums?! Oder hab ich das so falsch in Erinnerung, dass bei Netscape (== Internet anno 19..) immer ein Globus im Spiel war? Ich hab zumindest in der Adressleiste des FF immer noch vorne dran einen Globus.

              Viele Grüße
              Siri

              1. Moin,

                Wieviele Leute wohl einen Globus als Synonym für WWW sehen ...
                keine Ahnung, mir wäre diese Assoziation jedenfalls nicht in den Sinn gekommen. Ich hätte den Globus eher als Symbol für weltweit verteilte Niederlassungen oder Filialen eines Unternehmens gesehen.
                Mhmm... Du bist doch auch so eine Art "Urgestein" der Webentwicklung und des Forums?! Oder hab ich das so falsch in Erinnerung, dass bei Netscape (== Internet anno 19..) immer ein Globus im Spiel war?

                keine Ahnung, um Netscape habe ich schon immer einen großen Bogen gemacht.

                Ich hab zumindest in der Adressleiste des FF immer noch vorne dran einen Globus.

                Ah ... Tatsächlich, mit etwas Mühe könnte man in diesem Icon einen Globus erkennen. Ich habe in diesem Pixelmatsch bisher nicht mehr erkannt als einen grauen Klecks.

                Aber warum einen Globus? Was hat das Web mit Reisen, Raumfahrt oder Umweltschutz zu tun? - Das wären alles Themen, die mir zum Symbol "Globus" eher einfallen würden.

                Ciao,
                 Martin

                --
                Küssen ist die schönste Methode, eine Frau zum Schweigen zu bringen.
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                1. Hallo,

                  keine Ahnung, um Netscape habe ich schon immer einen großen Bogen gemacht.

                  Das hätte ich mir eigentlich denken können! Lynx? ;-)

                  Aber warum einen Globus? Was hat das Web mit Reisen, Raumfahrt oder Umweltschutz zu tun? - Das wären alles Themen, die mir zum Symbol "Globus" eher einfallen würden.

                  WORLD Wide Web?

                  Viele Grüße
                  Siri

                  1. Hi,

                    keine Ahnung, um Netscape habe ich schon immer einen großen Bogen gemacht.
                    Das hätte ich mir eigentlich denken können! Lynx? ;-)

                    nein, mein erster bewusster Kontakt mit dem Internet war 1998 mit Internet Explorer 4. Und einem Modem mit immerhin schon 14400bps. ;-)

                    Aber warum einen Globus? Was hat das Web mit Reisen, Raumfahrt oder Umweltschutz zu tun? - Das wären alles Themen, die mir zum Symbol "Globus" eher einfallen würden.
                    WORLD Wide Web?

                    Schon, aber dann wäre ein Symbol mit vernetzten Computern noch naheliegender, finde ich.

                    Ciao,
                     Martin

                    --
                    Paradox ist, wenn der Innenminister sich äußert und der Außenminister sich erinnert.
                    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                    1. @@Der Martin:

                      nuqneH

                      WORLD Wide Web?

                      Schon, aber dann wäre ein Symbol mit vernetzten Computern noch naheliegender, finde ich.

                      Schon der Mosaic verwendete einen Globus als Symbol fürs WWW.

                      Qapla'

                      --
                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hallo,

    Absolute Positionierung und Tabellen lassen sich schwer mischen, aber es geht ja mit einer Tabelle:

    html, body, #outer { margin: 0; padding: 0; width: 100%; height: 100%; }  
    #outer {  
      display: table;  
    }  
    #inner {  
      display: table-cell;  
      text-align: center;  
      vertical-align: middle;  
    }
    
    <div id="outer">  
      <div id="inner"></div>  
    </div>
    

    Mathias

  4. Hi,

    ich habe einen Start-Bildschirm, der den Leser in seiner Browser-Sprache (de, en, fr, nl, pl) begrüßt. Natürlich ist der Text unterschiedlich lang, je nach Sprache.

    wenn du das nicht haben willst, warum nimmst du dann ein Blockelement als Container?

    Es will mir nicht gelingen, diesen variabel breiten div horizontal zu zentrieren.

    Du möchtest also ein Element, das nur so breit ist wie sein Textinhalt? Dann schlage ich ein span-Element vor, das ist automatisch nur so breit wie sein Inhalt (wenn man will, kann man es mit padding-left und padding-right ein bissl "aufblasen"). Das würde ich dann als display:inline-block; formatieren und dem Elternelement (vermutlich body) text-align:center; spendieren.

    Ciao,
     Martin

    --
    Es existiert kein Weg, "für" etwas zu optimieren, sondern nur gegen alles andere.
      (Cheatah)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  5. @@Gast:

    nuqneH

    polski

    Bist du es, Emso? ;-)

    „kalendarz“ ist männlich, da muss es „brzmiący“ mit y heißen.

    Ich bin mir aber nicht sicher, ob „brzmiący“ im Polnischen wirklich das ausdrückt, was du mit „klingend“ meinst. Mein polnisch-muttersprachlicher Kollege ist schon nach Hause …

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)