Don P: Ganze Tabelle Zentrieren

Hallo Leute,

Bin noch CSS-Anfänger und will mir jetzt mal ein optimales stylesheet zusammenbauen, zweispaltig mit allem Schnickschnack. Die ersten Versuche sehen ganz vielversprechend aus, aber hier komme ich einfach nicht weiter:

In einem <div> steht eine Tabelle, die immer hartnäckig am linken Rand des <div> klebt. Sie soll aber horizontal zentriert im <div> erscheinen.

Habe schon alles mögliche mit text-align versucht, aber will es einfach nicht gelingen. Man kann vermutlich gleiche margins rechts und links für's <div> setzen, aber gibt es denn keine direktere Möglichkeit?

Workarounds wie mit margins tricksen, die ja eigentlich nicht für sowas zuständig sind (meine ich jedenfalls), will ich wo es geht vermeiden, weil alles möglichst optimal werden soll.

Danke und Gruß, Don P

  1. [latex]Mae  govannen![/latex]

    Workarounds wie mit margins tricksen, die ja eigentlich nicht für sowas zuständig sind (meine ich jedenfalls), will ich wo es geht vermeiden, weil alles möglichst optimal werden soll.

    Margin ist aber genau das, was du suchst.
    http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_right letzter Satz.
    Was soll an margin eigentlich so falsch sein? Wenn ich etwas zentrieren will, habe ich links und rechts einen gleiche großen Rand (-> margin)

    Cü,

    Kai

    --
    Some things in life are bad, they can really make you mad
    Other things just make you swear and curse.
    When you're chewing on life's gristle, don't grumble, give a whistle
    And this'll help things turn out for the best...
    ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
    1. Hallo,

      Margin ist aber genau das, was du suchst.
      http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_right letzter Satz.

      Das ist es tatsächlich, danke! Also einfach

      table {

      margin-left:auto;
        margin-right:auto;

      }

      ...und schon ist das Ding zentriert, bin begeistert.

      Was soll an margin eigentlich so falsch sein? Wenn ich etwas zentrieren will, habe ich links und rechts einen gleiche großen Rand (-> margin)

      Ja schon, aber es war mir entgangen, dass es einen Wert "auto" gibt (bin Fußgänger ;-). Sonst hätte ich behelfsweise irgendwelche zu großen Ränder nehmen müssen, und das wäre für mich schon ein unerwünschtes Tricksen.

      Gruß, Don P

  2. Hallo!

    Bin noch CSS-Anfänger und will mir jetzt mal ein optimales stylesheet zusammenbauen,

    Was immer man als "optimal" ansieht ...

    zweispaltig mit allem Schnickschnack.

    Was verstehst du denn unter "Schnickschnack"?

    Die ersten Versuche sehen ganz vielversprechend aus,

    Da du sie uns nicht präsentierst, können wir das auch nicht beurteilen.

    aber hier komme ich einfach nicht weiter:

    In einem <div> steht eine Tabelle, die immer hartnäckig am linken Rand des <div> klebt. Sie soll aber horizontal zentriert im <div> erscheinen.

    Habe schon alles mögliche mit text-align versucht, aber will es einfach nicht gelingen.

    Hast du mal bei SELFHTML unter text-align nachgelesen?
    Falls ja, dann ist dir der Unterschied zwischen Block- und Inline-Elementen nicht klar. Dieser ist aber von elementarer Bedeutung - siehe u.a.:
    http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9�
    http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente
    http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente

    Man kann vermutlich gleiche margins rechts und links für's <div> setzen, aber gibt es denn keine direktere Möglichkeit?

    Ja, genauso wie für <table>. Direkter als direkt für das jeweilige Element geht ja nicht.

    Workarounds wie mit margins tricksen, die ja eigentlich nicht für sowas zuständig sind (meine ich jedenfalls),

    Meinen ist die eine, und Nachlesen (wo solltest du jetzt eigentlich auch selbst rausfinden) die bessere Variante.

    ..., weil alles möglichst optimal werden soll.

    Das ist ungefähr so, als wenn du nicht Autofahren kannst und dem Fahrlehrer bei der ersten Fahrstunde erklärst:"Also ich will gleich mal eine Fahrzeugbeherrschung wie M. Schuhmacher haben.". Vielleicht solltest du dich erstmal mit den Grundlagen von CSS (und HTML) vertraut machen, bevor du so hohe Ziele anpeilst.

    Gruß Gunther

    PS: Die Frage, ob es überhaupt für eine Webseite "das optimale" Stylesheet gibt, dürfte vermutlich alleine schon zu endlosen (und ergebnislosen) Diskussionen führen (auf die ich keine Lust habe).

    1. Hallo,

      Bin noch CSS-Anfänger und will mir jetzt mal ein optimales stylesheet zusammenbauen,
      Was immer man als "optimal" ansieht ...

      Damit meine ich alles möglichst direkt und so wie es vom CSS-Schöpfer vorgesehen ist, also nicht von hinten durch die Brust in Auge schießen, sondern eben direkt ins Auge ;-)

      zweispaltig mit allem Schnickschnack.
      Was verstehst du denn unter "Schnickschnack"?

      Das ist nur so dahingesagt. So Sachen wie hover, float, position vielleicht, was weiß ich. Bin eben noch CSS-Anfänger und disher reichten mir ein paar direkt in den HTML-tags notierte Style-Eigenschaften. Aber das war gestern...

      Die ersten Versuche sehen ganz vielversprechend aus,
      Da du sie uns nicht präsentierst, können wir das auch nicht beurteilen.

      Da gibt's nicht viel zu sehen bis jetzt, du würdest wahrscheinlich nur müde lächeln.

      Hast du mal bei SELFHTML unter text-align nachgelesen?

      Klar, aber anscheinend nicht genau genug. Die Infos sind in SELFHTML immer so verstreut, dass ich mich frage, ob da überhaupt irgend eine sinnvolle Gleiderung dahintersteckt, und wenn ja, warum man sie eigentlich vor dem Benutzer verbirgt. SELFHTML hat leider etwas von einem Labyrinth für mich.

      Falls ja, dann ist dir der Unterschied zwischen Block- und Inline-Elementen nicht klar. Dieser ist aber von elementarer Bedeutung - siehe u.a.:
      http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9�
      http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente
      http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente

      Danke für die Links. Werde ich mir mal ausgiebig zu Gemüte führen. An inline habe ich auch schon gedacht. Mein Versuch z.B., die Tabelle mit table {display: inline} und einem text-align: center; im umgebenden div zu zentrieren, sieht nicht schön aus. Es scheint zwar zu klappen, gibt aber seltsame, unerklärliche Rahmen in der letzten Tabellenzeile.
      mit
      table {margin-left:auto; margin-right:auto;}
      sieht es jetzt aber gut aus. Noch lieber wäre mir etwas wie
      table {halign:center;}
      gewesen, aber das gibt's ja anscheinend nicht.

      Workarounds wie mit margins tricksen, die ja eigentlich nicht für sowas zuständig sind (meine ich jedenfalls),
      Meinen ist die eine, und Nachlesen (wo solltest du jetzt eigentlich auch selbst rausfinden) die bessere Variante.

      Ja, Masa.

      Vielleicht solltest du dich erstmal mit den Grundlagen von CSS (und HTML) vertraut machen, bevor du so hohe Ziele anpeilst.

      Du meist Vererbung und so? Das Gebiet ist zwar noch ein bisschen neblig, aber ich ich seh' da schon einiges. Nur um die Ecke sehen im genannten Labyrinth ist halt schwierig.
      HTML habe ich ja quasi erfunden ;-). Das sollte wirklich nicht das Problem sein.

      Gruß, Don P

      1. Hallo,

        An inline habe ich auch schon gedacht. Mein Versuch z.B., die Tabelle mit table {display: inline} und einem text-align: center; im umgebenden div zu zentrieren, sieht nicht schön aus. Es scheint zwar zu klappen, gibt aber seltsame, unerklärliche Rahmen in der letzten Tabellenzeile.

        du sollst nicht denken ...! ;-)
        Du sollst das "Konzept" von CSS und dessen Anwendung auf HTML verstehen.
        Wenn du ein Block-Element zentrieren willst, ist es wenig hilfreich, diesem per display inline-Eigenschaften zu verpassen.

        mit
        table {margin-left:auto; margin-right:auto;}
        sieht es jetzt aber gut aus.

        Das ist ja auch der "richtige Weg".
        Ein Tipp: Es gibt auch sog. Kurzformen/ -schreibweisen.
        Bsp.: margin: 0 auto;
        ist identisch zu
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;

        Noch lieber wäre mir etwas wie
        table {halign:center;}
        gewesen, aber das gibt's ja anscheinend nicht.

        Es ist ein _Unterschied_, ob du ein Element selber ausrichten willst, oder dessen Kindelemente (Inhalte).

        Imho muss man sich erst eine ganze Weile mit CSS und dessen Anwendung beschäftigen, sich zahlreiche (gute) Anwendungsbeispiele im Netz angucken, um einen möglichst vollständigen Überblick zu bekommen, der Grundvoraussetzung für ein Gesamtverständnis ist. Ohne das, läuft man immer wieder Gefahr, "unpraktikable" Ansätze zu wählen, bzw. "unerklärliche" Anzeigen seiner Seite vorzufinden. Erschwerend hinzukommen leider noch die unterschiedlichen "Unzulänglichkeiten" der verschiedenen Browser. Auch hier braucht es in erster Linie viel Erfahrung. Und die bekommt man halt meist nur durch Üben, Üben, Üben und Lernen!

        Gruß Gunther