basti_p: Zentriert trotz float: left

Hallo,

ich bin gerade dabei, meine HP neu zu gestalten (siehe oben). Die div-Container sollen floaten - das tun sie auch - aber trotzdem im body zentriert ausgerichtet sein (also wenn z.B. 2 nebeneinander passen, sollen diese beiden horizontal mittig angeordnet sein).

Das "text-align: center" für den body greift nicht wegen des "display: block" der Container. Wenn ich die Container "display: inline" setze, gibts Probleme mit der "min-height" und "width" der Container.

Gibts da eine einfache Lösung die ich übersehen habe - zusätzliche HTML-Elemente möchte ich nicht einfügen.

Danke und Grüße Basti

  1. Hi!

    Das "text-align: center" für den body greift nicht wegen des "display: block" der Container.

    Nein: es 'greift nicht', weil es für die Ausrichtung von Text gedacht ist - daher der Name.

    Eventuell hilft das

    off:PP

    --
    "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
    1. Hallo,

      Eventuell hilft [link:http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm@title=das

      Danke für den Tipp; in meinem Fall hilft das leider nicht da bei meinem Layout ja 2 und mehr Elemente nebeneinander stehen können.

      Grüße Basti

      1. Hallo,

        Eventuell hilft [link:http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm@title=das

        Danke für den Tipp; in meinem Fall hilft das leider nicht da bei meinem Layout ja 2 und mehr Elemente nebeneinander stehen können.

        Deshalb hat man ja auch einen Container drum, der die Breite vorgibt und zentriert ist. Dieser Conatiner darf auch ruhig <body> sein.

        Ich fuerchte aber, ich weiss, was Du meinst. 1 - n Elemente sollen immer mittig stehen. Da weiss ich ehrlich keine Loesung ausser der Manipulation des CSS z.b. durch eine Serverseitige Sprache abhaengig von der Anzahl der Elemente.

        --
        Trau Dich!
         
        1. Hallo,

          Ich fuerchte aber, ich weiss, was Du meinst. 1 - n Elemente sollen immer mittig stehen. Da weiss ich ehrlich keine Loesung ausser der Manipulation des CSS z.b. durch eine Serverseitige Sprache abhaengig von der Anzahl der Elemente.

          hm, der Server weiß aber nicht von der Größe des Viewports - und ich möchte es vermeiden, diese festzulegen.

          Ich habe jetzt was mit Javascript gebastelt, wen es interressiert:

          http://www.pfund.info/projekte/msp/

          Grüße Basti

    2. @@Peter Pan:

      Nein: es ['text-align'] 'greift nicht', weil es für die Ausrichtung von Text gedacht ist - daher der Name.

      Ähm nein, der Name gerade dieser Eigenschaft ist irreführend. 'text-align' ist für die Ausrichtung von Inline-Inhalt: nicht nur Text, auch Bilder etc.). Es hätte besser (und in Analogie zu 'vertical-align') 'horizontal-align' heißen sollen.

      Live long and prosper,
      Gunnar

      --
      Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
      1. Hi!

        Nein: es ['text-align'] 'greift nicht', weil es für die Ausrichtung von Text gedacht ist - daher der Name.

        Ähm nein, der Name gerade dieser Eigenschaft ist irreführend. 'text-align' ist für die Ausrichtung von Inline-Inhalt: nicht nur Text, auch Bilder etc.). Es hätte besser (und in Analogie zu 'vertical-align') 'horizontal-align' heißen sollen.

        Damit hast Du natürlich recht!
        Meine Antwort war _so_ nicht korrekt!

        off:PP

        --
        "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
  2. Moin,

    Das "text-align: center" für den body greift nicht wegen des "display: block" der Container. Wenn ich die Container "display: inline" setze, gibts Probleme mit der "min-height" und "width" der Container.

    margin-left:auto und margin-right:auto für das body-Element. Oder die Divs, die in der Mitte sein sollen mit einem weiteren Div gruppieren und diesem margin-left:auto und margin-right auto geben.

    Gruß

    Stareagle

  3. Hallo basti_p

    Das "text-align: center" für den body greift nicht wegen des "display: block" der Container. Wenn ich die Container "display: inline" setze, gibts Probleme mit der "min-height" und "width" der Container.

    Dafür gäbe es display:inline-block. Das Element verhält sich dann nach außen wie ein Inlineelement bzw. replaced element (z.B. img), für seinen Inhalt aber wie ein Blockelement und kann auch Größenangaben haben. Leider wird dies nicht von allen Browsern (richtig) unterstützt.

    Gibts da eine einfache Lösung die ich übersehen habe - zusätzliche HTML-Elemente möchte ich nicht einfügen.

    Ich habe mich nicht näher damit beschäftigt, vielleicht könnte dir CSS tests and experiments helfen.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!