Dominik: DIV Layout statt Ebenen

Hallo!

Ich möchte wohl ganz gerne auf DIV Ebenen statt Tabellen zurückzugreifen, da ich die Erfahrung gemacht habe, das die Formatierung mit DIV Ebenen und CSS besser als mit Tabellen. Nur leider habe ich ein paar Probleme bei der Realisierung. Im folgenden werde ich mal den code einer Tabelle veröffentlichen, wie ich die DIV ebenen anordnen möchte, aber es leider nciht schaffe.

<table border='1'>
 <tr>
  <td colspan='2'>logo</td>
 </tr>

<tr>
  <td>navi</td>
  <td rowspan='2'>content</td>
 </tr>

<tr>
  <td>news</td>
 </tr>

<tr>
  <td colspan='2'>copyright</td>
 </tr>
</table>

Kann mir einer helfen? Ich habe es schon unzähliche male versucht, wie z.B. die Verschachtelung von DIV ebenen, um das Problem zu lösen. Aber leider entstehen dabei nur weitere Probleme, die ich nicht lösen kann!

MFG
Dominik

  1. Hallo,
    so sieht's aus:

    <div id="logo">logo</div>
    <div id="container">
    <div id="navi">Links...</div>
    <div id="content">Content</div>
    <div>
    <div id="copyright">Copyright</div>

    Bei den News stimmt was nicht.

    CSS:

    #navi {
        float: left;
        width: 150px;
    }
    #content {
        margin-left: 150px;
    }
    #copyright {
        clear: left;
    }

    mfg Bernd

  2. Hallo Dominik,

    <table border='1'>
    <tr>
      <td colspan='2'>logo</td>
    </tr>

    Unproblematisch, <div> mit der Weite 100% und einer Höhe

    <tr>
      <td>navi</td>
      <td rowspan='2'>content</td>
    </tr>

    linkes div mit float:left und einer Breite; rechtes div mit einem padding größer als die Breite des linken divs.

    <tr>
      <td>news</td>
    </tr>

    Könnte einfach weg.

    <tr>
      <td colspan='2'>copyright</td>
    </tr>

    ein div mit Weite 100%, einer Höhe und clear:left

    Dies könnten die groben ersten Züge sein. Weitere Hinweise werden wohl gleich folgen. Zu beachten ist, dass pixelgenaues arbeiten jetzt aber je nach Layout etwas umständlicher wird.

    Mit freundlichen Grüßen

    André

    1. Hi,

      <table border='1'>
      <tr>
        <td colspan='2'>logo</td>
      </tr>

      Unproblematisch, <div> mit der Weite 100% und einer Höhe

      nö. Ein DIV hat ohnehin 100%, daher überflüssig. Die Tabelle jedoch nicht.

      linkes div mit float:left und einer Breite; rechtes div mit einem padding größer als die Breite des linken divs.

      Besser wäre margin.

      <tr>
        <td>news</td>
      </tr>

      Könnte einfach weg.

      Wieso? wenn er es haben will? Ebenfalls mit float:left unter das Menü setzen.

      <tr>
        <td colspan='2'>copyright</td>
      </tr>

      ein div mit Weite 100%, einer Höhe und clear:left

      zu 100% s.o., wieso Höhe?

      Weitere Hinweise werden wohl gleich folgen.

      Der wichtigste wäre, daß floatende Elemente vor den nichtfloatenden im Quelltext stehen müssen.

      freundliche Grüße
      Ingo

      1. Hallo Ingo,

        wie immer schön von dir zu lernen. Schönen Sonntag noch. ;-)

        Mit freundlichen Grüßen

        André

    2. ja genau das mit den news..... hey stimmt warum mach ich das überhaupt so kompliziert, könnte doch einfach direkt die news unter die links setzen...

      weiß nicht warum ich 2 divs daraus machen wollte, aber jetzt fällts mir ein!

      danke für eure hilfe!!

      MFG

      dominik

      1. Hallo,

        danke für eure hilfe!!

        Gern geschehen.

        Mit freundlichen Grüßen

        André