stareagle: Tabellenlayout in CSS nachbauen

Beitrag lesen

Hallo,

ohne es getestet zu haben:

<html>
<body>

für Body: style="width:99%; margin-left:auto; margin-right:auto; text-align:center"

Das text-align ist nur für den IE, der dass fälschlicherweise auf Blockelemente anwendet, margin-left=auto und margin-right=auto aber nicht kapiert.

<td colspan="2" id="Banner" style="background-color:#0000FF; color:#FFFFFF; font-size:24px; text-align:center; height:100px;">
Schriftzug
</td>
</tr>
<tr>

Hier stellt sich die Frage, ob du nur einen Schriftzug haben willst, dann wäre hier die Verwendung von <h1> angebracht, ansonsten mußt die Elemente per DIV gruppieren

<td width="200" id="Navigation" style="background-color:#0000FF; color:#FFFFFF; font-size:12px; text-align:left;">
<ul>
<li>Navigationspunkt 1</li>
<li>Navigationspunkt 2</li>
<li>Navigationspunkt 3</li>
</ul>
</td>

Die Liste kannst du dann direkt nehmen, du mußt sie nur noch formatieren. Dazu kommt noch float:left, damit der Inhalt links daneben steht.

<td width="*" id="Inhalt" style="background-color:#FFFFFF; color:#000000; font-size:12px; text-align:left;">
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.
</td>

Die Zelle wird dann ein div.

Das sollte funktionieren. Wie gesagt, ich habs nicht getestet. Ein vollkommen gleiches Verhalten wirst du allerdings nicht erreichen, z.B. wird der Inhaltsbereich unter die Navigation gesetzt, wenn der Platz nicht reicht.

Mir fehlt bei rein CSS-basierten Layouts etwas wie <td width="*">.

Dass fehlt mir manchmal auch...

0 50

Tabellenlayout in CSS nachbauen

Thomas
  • css
  1. 0
    AllesMeins
    1. 0
      Mathias Brodala
      1. 0
        AllesMeins
        1. 0
          Mathias Brodala
          1. 0
            AllesMeins
            1. 0
              Mathias Brodala
              1. 0
                AllesMeins
                1. 0
                  Thomas
                2. 0
                  wahsaga
                  1. 0
                    Thomas
                    1. 0
                      Struppi
            2. 1
              Blaubart
        2. 0
          Klawischnigg
          1. 0
            Struppi
            1. 0
              AllesMeins
              1. 0
                Struppi
          2. 0
            Blaubart
            1. 0
              wahsaga
              1. 0
                Blaubart
        3. 0
          Christoph Gärtner
          1. 0
            AllesMeins
            1. 0
              Christoph Gärtner
              1. 0
                Christoph Gärtner
                1. 0
                  AllesMeins
                  1. 0
                    Christoph Gärtner
                    1. 0
                      AllesMeins
                      1. 0
                        Christoph Gärtner
                        1. 0
                          AllesMeins
                          1. 0
                            Christoph Gärtner
                            1. 0
                              AllesMeins
                2. 0
                  AllesMeins
                  1. 0
                    Christoph Gärtner
                    1. 0
                      AllesMeins
                    2. 0
                      Blaubart
                  2. 1
                    Struppi
                3. 0
                  AllesMeins
                  1. 0
                    Christoph Gärtner
              2. 0
                AllesMeins
                1. 0
                  Christoph Gärtner
                  1. 0
                    AllesMeins
                  2. 0
                    AllesMeins
                    1. 0
                      Christoph Gärtner
              3. 0
                AllesMeins
    2. 0
      Struppi
  2. 1
    wahsaga
  3. 0
    stareagle
    1. 0
      Thomas
      1. 0
        wahsaga
      2. 0
        Struppi