Layout nur mit Divs

Darkxor

Hallo,
ich habe zwar bisher so oft Divs genutzt wie es ging, jedoch wenn
Inhalte nebeneinander sollten, immer Tabellen genutzt.
Mir wird auch öfter gesagt ich soll auf die Tabellen Nutzung verzichten.

Ist es denn möglich und wenn ja wie so eine "Ausrichtung" mit
Divs zu erledigen?

HTML

<table border="0">
    <tr>
        <td width="610">123</td>
        <td width="610">456</td>
    </tr>
    <tr>
        <td width="610">789</td>
        <td width="610">10</td>
    </tr>
</table>

Danke

thilda

Also generell ist das schon möglich. Z.B. mit float.
Die Frage ist nur ob es Sinn macht.

Denn wenn der Inhalt wirklich tabelarisch ist, sollte er auch eine Tabelle bleiben.
Also Bsp. könnte da etwa eine Bestelliste mit Datum, Kunden, Stückzahl, Preisen, ... dienen. Das wäre dann eine Tabelle.

sejuma

Wenn es wirklich eine tabellarische Darstellung sein soll, dann bleib wie gesagt bei der Tabelle.
Ansonsten zum Anordnen bestimmter Bereiche geht das natürlich auch ohne Tabellen, z.B. so:

CSS

Code

.links {
float: left;
width: 610px;
}
.rechts {
margin-left: 610px;
width: 610px;
}


.clear {
clear: both;
}

Alles anzeigen

HTML

Code

<div class="links">123</div>
<div class="rechts">456</div>
<br class="clear">
<div class="links">789</div>
<div class="rechts">106</div>

Was das "nebeneinander anordnen" betrifft, befasse dich mit "Floaten und Clearen"

Darkxor

Also würde man die Divs um ein Div "umfließen" lassen?
Und für sowas sind dann Divs besser?
[Blockierte Grafik: http://www.abload.de/img/text9ebj.jpg]

Macrosdesign

sejuma

Warum benutzt du bei .rechts dieses margin-left:610px ???

verstehe das nicht so ganz...

ich hätte das so gemacht:

HTML

.links, .rechts {
  width:610px;
  float:left;
}
.clear_left {
  clear:left;
}






<div class="links"></div>
<div class="rechts></div>
<br class="clear_left" />

Alles anzeigen

sejuma

@Draxor:
Für die Seitendarstellung ist eine Aufteilung in Div-Bereiche besser. Hier kannst du einfacher Formatierungen für einen kompletten Bereich vornehmen.
Je nach Seitenaufbau wird der Quelltext dadurch auch übersichtlicher und weniger fehleranfällig.
Es erfordert zugegeben ein gewisses Umdenken. Aber wenn du das System einmal verstanden hast wirst du erkennen, dass es besser als Tabellen ist.

@Macrodesign:
"Es führen viele Wege nach Rom".
Wenn beide Boxen gefloatet sind wie bei dir, dürfte der margin-Wert nicht erforderlich sein (hab's aber noch nicht im FF getestet).
Bei mir ist die zweite Box nicht gefloatet und deshalb ist der Abstand erforderlich. Sonst "unterfließt" die rechte Box die linke, wenn rechts der Inhalt länger wird. Beim IE ist das nicht der Fall, jedoch bei FF, der die Float-angabe korrekt interpretiert, siehe http://www.ohne-css.gehts-gar.net/0051.php

Tags