steffen: Kleiner CSS Problem (text mittig)

Hi,

da ich bisher nicht verstand wieso gunnar meinte: nutzt du eine Tabellen zum Stylen deiner HP hab ich mich auf die Socken gemacht und paar Seiten angeschaut.

War erstaunt was sich da alles verändert hat. Nun hab ich natürlich den ehrgeiz das auch zu schaffen und bam häng ich mal wieder bzw habe auch eine frage ;)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="./style.css">
</head>
<body>
<div id="width">
<div id="content">

test

</div>
</div>
</body>
</html>

CSS:

#width{
    text-align:left;
    margin-right: auto;
    margin-left: auto;
}

#content {
  width:485px;
}

Leider wird das nicht mittig weiß echt nicht wieso :(

Noch eine Frage: Wenn ich

#width{
    text-align:left;
    width: 750px;
}

mache schiebt er den text von rechts nach links, wieso nicht von links nach rechts?

Hoffe könnt mir bei beiden Sachen weiterhelfen.

mfg steffen

  1. Hallo steffen.

    War erstaunt was sich da alles verändert hat. Nun hab ich natürlich den ehrgeiz das auch zu schaffen und bam häng ich mal wieder bzw habe auch eine frage ;)

    Sehr gut, weiter so! :-)

    Leider wird das nicht mittig weiß echt nicht wieso :(

    Du willst den Text zentrieren?

    #width{
        text-align:left; /* <-- */
        margin-right: auto;
        margin-left: auto;
    }

    Noch eine Frage: Wenn ich

    #width{
        text-align:left;
        width: 750px;
    }

    mache schiebt er den text von rechts nach links, wieso nicht von links nach rechts?

    Was bedeutet „schiebt“ in diesem Zusammenhang?

    Einen schönen Mittwoch 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]
    1. Hi Ashura,

      Du willst den Text zentrieren?

      Weiß nicht genau was er da zentriert! (möchte einfach die komplette "tabelle" mittig haben") Siehe http://gloop.fireburn.de/page/index.php

      mache schiebt er den text von rechts nach links, wieso nicht von links nach rechts?

      Das heisst, dass die die

      Was bedeutet „schiebt“ in diesem Zusammenhang?

      Siehe hierzu:

      http://gloop.fireburn.de/page/width/index.php

      dort habe ich width: 10px; eingefügt.

      mfg

      1. Hallo steffen.

        Weiß nicht genau was er da zentriert! (möchte einfach die komplette "tabelle" mittig haben") Siehe http://gloop.fireburn.de/page/index.php

        Ich sehe dort weder tabellarische Daten noch Tabellen.

        dort habe ich width: 10px; eingefügt.

        Wo?

        Einen schönen Mittwoch 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]
        1. Ja ich will das auch mit CSS machen!

          Den Text einfach mittig zu bekommen muss doch irgendwie möglichsein???

          Bzw nich den Text sondern das #content bzw den bg der dort hinterlegt ist!

          mfg

          1. Hallo steffen.

            Ja ich will das auch mit CSS machen!

            Das freut mich.

            Den Text einfach mittig zu bekommen muss doch irgendwie möglichsein???

            Innerhalb eines Blockelementes genügt text-align:center;

            Bzw nich den Text sondern das #content bzw den bg der dort hinterlegt ist!

            Ja was denn nun?

            Wie du den Text zentrieren kannst, habe ich dir ja nun schon genannt.

            Das Blockelement selbst zentriert man mittels margin:auto, aber das dürftest du ja wissen. (Ggf. noch einen Workaround für alle IE < 6.0 im Standards-Compliance-Modus).

            Willst du jedoch nur den Hintergrund zentrieren (was du wahrscheinlich mit „bg“ meintest) benötigst du lediglich background-position.

            Mein Tipp: verpasse allen relevanten Elementen mittels border-Eigenschaft einen Rahmen. So kannst du die jeweiligen Dimensionen weitaus besser abschätzen.

            Einen schönen Mittwoch 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]
            1. Hi,

              also auf http://gloop.fireburn.de/page/width/index.php habe ich mit CSS ein Rahmen um den Text gemacht!

              Dieser Rahmen will ich MIT dem Text mittig haben!

              Die CSS Datei sieht wiefolgt aus:

              http://gloop.fireburn.de/page/width/style.css

              Wer kann mir helfen? Bisher funktionierte keines der oben genannten Lösungen.

              mfg

              1. Hallo steffen.

                Hi,

                also auf http://gloop.fireburn.de/page/width/index.php habe ich mit CSS ein Rahmen um den Text gemacht!

                Dieser Rahmen will ich MIT dem Text mittig haben!

                Die CSS Datei sieht wiefolgt aus:

                http://gloop.fireburn.de/page/width/style.css

                Wer kann mir helfen? Bisher funktionierte keines der oben genannten Lösungen.

                Naja. Woran soll sich auch der Außenrahmen orientieren, wenn nicht an width? ;-)

                #width{  
                    margin:0 auto;  
                    width:50%; /* Beispielsweise */  
                    text-align:center;  
                }
                

                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]
                1. Hello again,

                  da ich nich gerade viel Ahnung mit stylen von CSS habe dürft ihr mir nich bös sein ;)

                  hab nun die width 50%; reingemacht, aber mittig schaut das ganze nicht wirklich aus :P

                  keine ahnung wieso :(

                  http://gloop.fireburn.de/page/width/index.php

                  mfg

                  1. Hallo steffen.

                    hab nun die width 50%; reingemacht, aber mittig schaut das ganze nicht wirklich aus :P

                    In allen meinen Browsern wird es horizontal zentriert.

                    http://gloop.fireburn.de/page/width/index.php

                    -> </faq/#Q-19>

                    Einen schönen Freitag 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. da ich bisher nicht verstand wieso gunnar meinte: nutzt du eine Tabellen zum Stylen deiner HP hab ich mich auf die Socken gemacht und paar Seiten angeschaut.

    Hast Du auch die hier gelesen? http://seybold.jan-andresen.de/

    Leider wird das nicht mittig weiß echt nicht wieso :(

    #width ist einwandfrei mittig.
    Da sich #width ohne Angabe einer Breite aber - wie für Block-Elemente üblich - über die gesamte Breite erstreckt, sieht man diese Zentrierung natürlich nicht :-)