Shihan: Text mittig ausrichten

Hallo,

Ich habe ein merkwürdiges Problem. Ich habe einen Layer kreiert und in diesem soll der Text mittig ausgerichtet werden, vertikal und horizontal. Das Text-Align: center wird korrekt umgesetzt aber dass vertical-align: middle wird ignoriert (IE und Firefox), ich habe keine Ahnung wieso.

Hier der Code:

<div id='layer_top_menu' style='position: absolute; left: 30px; top: 100px; width: 600px; height: 30px; background-color: #CECECE; text-align: center; vertical-align: middle;'>
<a href='?page=main'>Main</a> | <a href='?page=projects'>Projekte</a>
</div>

--

Ich komme einfach nicht auf den Fehler, falsch geschrieben ist ja auch nichts, oder?

Gruss, Patric

  1. hi,

    Ich habe ein merkwürdiges Problem. Ich habe einen Layer kreiert und in diesem soll der Text mittig ausgerichtet werden, vertikal und horizontal. Das Text-Align: center wird korrekt umgesetzt aber dass vertical-align: middle wird ignoriert (IE und Firefox), ich habe keine Ahnung wieso.

    deswegen:
    http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align:
    "Applies to:   inline-level and 'table-cell' elements"

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. moin Shihan:)

      http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align:

      "Applies to:   inline-level and 'table-cell' elements"

      und weil das so ist, versuch es doch mal mit <span> statt <div>
      dazu gibt es eine nette Vertical-Align-Studie
      liebe Grüße aus Berlin
      lina-

      --
      Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
      1. Mal ganz abgesehen davon, dass es sich bei seinem Code um ein horizontales Menü handelt, er dazu besser kein <div>, sondern eine <ul> verwendet, wo er ohnehin die <li> mit display:inline; belegen sollte, und das Problem damit behoben ist und die Semantik auch zufrieden gestellt ist.

        1. moin Efchen :)

          Mal ganz abgesehen davon, dass es sich bei seinem Code um ein horizontales Menü handelt...

          hehe - da hat bei mir die Faulheit zugeschlagen..so genau hab ich mir das gar nich angeschaut ;)

          liebe Grüße aus Berlin
          lina-

          --
          Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
          1. moin Efchen :)

            Mal ganz abgesehen davon, dass es sich bei seinem Code um ein horizontales Menü handelt...
            hehe - da hat bei mir die Faulheit zugeschlagen..so genau hab ich mir das gar nich angeschaut ;)

            liebe Grüße aus Berlin
            lina-

            hmmm also... ein bisschen weiter bin ich, aber der Text innerhalb der Box ist immernoch nicht mittig, und ich blicke einfach nicht durch. Ich habe CSS4you gelesen und auch hier selfhtml... ich meine sonst habe ich ja keine Probleme ich blicke normalerweise auch bei HTML und PHP durch, aber dieses Ding schnall ich einfach nicht...

            Hier mal die Seite:
            http://www.shihan-online.ch/projects/tempusfugit/

            der Text in der Box, also das Menü, soll Horizontal und Vertikal ausgerichtet werden. Mittlerweilen geht es nichtmal mehr mit text-align center, habe deshalb margin auto genommen zum testen, aber auch 0-Erfolg. Ebenso beim Vertical align.

            1. Hi,

              Hier mal die Seite:
              http://www.shihan-online.ch/projects/tempusfugit/

              der Text in der Box, also das Menü, soll Horizontal und Vertikal ausgerichtet werden. Mittlerweilen geht es nichtmal mehr mit text-align center, habe deshalb margin auto genommen zum testen, aber auch 0-Erfolg. Ebenso beim Vertical align.

              Du solltest Dich wirklich ntensiver mit CSS befassen und insbesondere damit, welche Eigenschaften für welche Elemente definiert werden können.
              Der Inhalt Deines spans ist exakt mittig, was Du mit span {background:red;} selbst sehen kannst.
              Auszurichten gibt es hier auch nicht viel, da span ein inline-Element ist.

              Vielleicht schaust Du Dir mal http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal an?

              freundliche Grüße
              Ingo

              1. gibt es sonst noch ein gutes Tutorial (à la schattenbaum oder so) wo man css design ohne tabellen lernen kann??

                1. Hallo baumeister.

                  gibt es sonst noch ein gutes Tutorial (à la schattenbaum oder so) wo man css design ohne tabellen lernen kann??

                  http://de.selfhtml.org/css/layouts/

                  Einen schönen Donnerstag 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.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                  [Deshalb frei! - Argumente pro freie Software]
                2. gibt es sonst noch ein gutes Tutorial (à la schattenbaum oder so) wo man css design ohne tabellen lernen kann??

                  Nicht unbedingt ein Tutorial, aber eine durchaus gute Hilfe. Für mich hats gereicht, zu erkennen, was CSS wirklich ist. Und dass ohne solides HTML-Basiswissen, das Wissen um die Semantik und ohne Trennung von Inhalt und Layout das CSS-Layout nur zweitklassig werden kann.

                  http://seybold.jan-andresen.de/

            2. hmmm also... ein bisschen weiter bin ich, aber der Text innerhalb der Box ist immernoch nicht mittig

              Du hast auch noch kein Inline-Element draus gemacht. Keine Liste aus Deinem Menü gemacht, also <ul> statt <div> verwendet. Für ein horizontales Menü musst Du dann ohnehin li { display:inline; } machen, und dann hast Du die Voraussetzungen, die Du brauchst, dass vertical-align funktioniert.

  2. Ich habe einen Layer kreiert

    Nein. Denn Layer ist der Name für ein von Netscape erfundenes Tag <layer>, das ausschließlich im Netscape 4 funktioniert.

    Das nur so am Rande.