Thommy: Tabelle ohne <table>

Hallo,

ich wollte zur Übung / zum Lernen mal ein einfaches zweispaltiges Layout ohne die Verwendung von table machen. Das geht ja irgendwie mit div-Tags oder?

Ich hab schon in den Sourcecode von zahlreichen Internet-Seiten geschaut aber das war dann immer so komplex dass ich nicht mehr durchgeblickt habe.

Im Prinzip will ich so einen Aufbau (hier mal mit table/tr/td dargestellt):

<table>
   <tr>
      <td colspan=2>Header, Komplette Breite, Überschrift der Seite was auch immer</td>
   </tr>
   <tr>
    <td>Hier die Navigation</td>
    <td>Hier der Content</td>
   </tr>
   <tr>
    <td colspan=2>Hier der Footer mit Ersteller,... auch wieder über ganze Breite</td>
   </tr>
</table>

Den Header und den Footer kann ich ja problemlos mit div und css machen aber wie bekomme ich mit div die Navigation und den Content nebeneinander?

Hoffe jemand kann mir einen kleinen Anstoß geben.

Danke!
Thommy

  1. Den Header und den Footer kann ich ja problemlos mit div und css machen aber wie bekomme ich mit div die Navigation und den Content nebeneinander?

    Die CSS-Eigenschaft float ist hier Dein Freund und Helfer! Schau Dir auch mal das Tutorial http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html an.

    1. Hallo Sven,

      das ist ja eine super Seite! Ich "wurschtel" mich mal durch.

      Danke!

      Ciao
      Thommy

  2. Hi,

    Den Header und den Footer kann ich ja problemlos mit div und css machen aber wie bekomme ich mit div die Navigation und den Content nebeneinander?

    Schau' doch bitte in die Selfhtml-Doku. Genau diese Fragen werden im neuen Kapitel http://de.selfhtml.org/css/layouts/ beantwortet.

    freundliche Grüße
    Ingo

    1. Hallo,

      hab grade auch selbst festgestellt dass es bei den Layoutbeispielen im neuen 8.1er ja ein neues Layout (Nr. 10) gibt und das macht das auch so.

      Dabei wollte ich doch echt vorbildlich sein und hab gestern selfhtml 8.0 durchgewälzt und bin nicht fündig geworden.

      Während dem Posten hab ich dann die 8.1er downgeloaded. Hoffe das zählt als Ausrede :-)

      Ciao
      Thomas

      1. Hi,

        hab grade auch selbst festgestellt dass es bei den Layoutbeispielen im neuen 8.1er ja ein neues Layout (Nr. 10) gibt und das macht das auch so.

        das meinte ich nicht. Das neue Kapitel CSS-basierte Layouts stellt nicht einfach nur fertige Layouts vor, sondern versucht von Grund auf (die Kenntnis der hierzu erforderlichen CSS-Eigenschaften vorausgesetzt) zu erläutern, wie so etwas zu bewerkstelligen ist. Natürlich gibt es auch hier Anwendungsbeispiele; diese unterscheiden sich jedoch von den fertigen Layouts dadurch, daß sie auf das zum Verständnis Erforderliche reduziert sind und nur als Hilfestellung und Grundlage für eigene Entwicklungen diesen sollen - "Self" halt.

        freundliche Grüße
        Ingo

        1. Hallo Ingo,

          ist schon klar. Das Kapitel werde ich auch lesen aber ich bin ein Beispiel-Mensch.

          Wenn ich ein laufendes Beispiel für irgendwas habe dann fange ich an das umzubauen und wenn ich was nicht versteh les ich dann nach.

          So lerne ich am Einfachsten!

          Ciao
          Thommy

          1. Hi,

            Wenn ich ein laufendes Beispiel für irgendwas habe dann fange ich an das umzubauen und wenn ich was nicht versteh les ich dann nach.

            Dann nehme Dir doch einfach mal http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm vor und entferne hier das div#Info und das rechte margin von div#inhalt.

            freundliche Grüße
            Ingo