Tschüss table, hallo div?

**Meillo** · 24.09.2006, 20:52

weil Tabellen für tabellarische Daten und nicht zum Layouten da sind!

aber such doch einfach mal per Google - du wirst haufenweise Abhandlungen darüber finden.

... jedoch sei dir schonmal gesagt, dass das Verwenden von DIVs noch lange keinen guten Code macht

**cag-live** · 24.09.2006, 20:55

Inwiefern?

**TobiaZ** · 24.09.2006, 21:31

http://seybold.jan-andresen.de/everything.php

aber das haben wir hier im forum auch schon 100 mal erwähnt...

**Meillo** · 25.09.2006, 09:46

Original geschrieben von cag-live
Inwiefern?

aus solchen Gründen zum Beispiel

PHP-Code:


<DIV id="eink" style="position:absolute; top:45px; left:10px;">

  <DIV style="position: absolute; top: 5px; left: 0px; font-size:12px;">Einkäufer</DIV>

  <DIV style="position: absolute; top: 5px; left: 170px; font-size:12px;">von</DIV>

  <DIV style="position: absolute; top: 0px; left: 200px; width:150px; font-size:12px;">

    <INPUT id="evon" onchange="xchange();" type="text" name="evon" maxlength="6" value="100">

  </DIV>

  <DIV style="position: absolute; top: 5px; left: 370px; font-size:12px;">bis</DIV>

  <DIV style="position: absolute; top: 0px; width:150px; left: 400px; font-size:12px;">

    <INPUT id="ebis" onchange="xchange();" type="text" name="ebis" maxlength="6" value="200" />

  </DIV>

  <DIV style="position: absolute; top: 5px; width:50px; left: 550px;">

    <INPUT id="eSuche" type="submit" style="font-size:10px; width: 46px; height: 18px; 

        font-family: arial;" name="sucheEinkaeufer" value="Suche" />

  </DIV>

</DIV>

... da kann ich auch gleich 'ne Tabelle nehmen

EDIT:
umbrüche

**pekka** · 25.09.2006, 10:56

@Meillo: ACK. Es gibt leider viele Fälle, in denen die CSS-Implementierung der aktuellen Browser (bzw. des üblicherweise schwächsten Gliedes in der Kette, des IE) vernünftiges tabellenloses Design sehr schwer oder gar unmöglich macht... Oder eben nur mithilfe von Hacks. Sehr unschön.

**Meillo** · 25.09.2006, 11:42

stimmt

... aber DIV-Design als "position: absolute;"-Design anzusehen ist IMHO einfach danaben
CSS bietet ja gerade die Möglichkeit schön fließend zu positionieren ... auch wenn es, wie du schon sagst, nicht immer einfach ist

**cag-live** · 25.09.2006, 19:28

So liebe Leute,

ich hab mal euren Befehlen gehorcht und komplett mit DIV's geschrieben...

www.mati.cx

von ca. 21 KB auf 13 KB kleinbekommen. Und es läuft sowohl im IE als auch Opera, Firefox etc.

Fehler gefunden? Oder siehts guad aus?

**TobiaZ** · 25.09.2006, 19:31

Fehler gefunden?

Massig! IDs müssen eindeutig sein. Das können sie nicht, wenn du jedes zweite div mit der gleichen ID definierst.

Was du brauchst, sind classes.

Mein FF zeig die zwei kreise, oder war es "unendlich" neben dem ausgewählten (hover) menue nicht mehr an. Sieht jetzt irgendwie leer aus. Wenn du es absichtlich rausgenommen hast, würd ich den Linktext was weiter nach links rutschen.

**cag-live** · 25.09.2006, 19:36

Hä? Hab keine doppelten ID's gefunden.

Was meinste z.B.?

Jeps, habsch rausgenommen. *hrmpf* sowas fällt wieder auf^^

IE hat mir da nen Strich durch die Rechnung gemacht.

**wahsaga** · 25.09.2006, 19:41

Original geschrieben von cag-live
ich hab mal euren Befehlen gehorcht und komplett mit DIV's geschrieben...

Du gehorchst den falschen Leuten - oder hörst ihnen nicht richtig zu.

http://de.wikipedia.org/wiki/Divitis

Alles in Divs zu klatschen, ist ebenfalls großer Blödsinn.

Schon mal gehört, dass man Abstände über CSS regeln kann - margin/padding, klingelt da was?

Dafür leere Elemente zu nehmen und mit entsprechenden Maßen zu formatieren, ist die sinnentleerte Übertragung des Blindgifs in CSS.

Und eine Navigation möchte auch keine wüste Div/A-Verschachtelung sein, sondern das, was sie auch in Wirklichkeit ist - eine Liste von Links.

Und Fliesstext klatscht man auch nicht ständig in Divs, sondern nutzt dafür Absätze, P.

Und wenn man dann schon für Überschriften korrekterweise ein Hx nutzt - dann aber bitte den Link in die Überschrift und nicht andersherum, was nämlich auch invalide ist.

Dass du "schon seit 4 Jahren" Webseiten entwickelst, merkt man am vorliegenden Beispiel jedenfalls kaum.

**TobiaZ** · 25.09.2006, 19:44

Hä? Hab keine doppelten ID's gefunden.

Der Validator anscheinend schon. Hab mir deinen Quelltext aber nicht angesehen.

EDIT:
Aber jetzt wo ich wahsagas quelltext-zitat sehe, dürfte wohl klar sein, dass du z.B. unmengen an divs mit der id "leer" hast. Das ist ja fast so wie ein blind.gif

**cag-live** · 25.09.2006, 19:49

Hm naja ich beschäftige mich seit 4 Jahren mit HTML inkl. PHP eher in Richtung Technik.

Layouting bzw. die Frage ob div, und wieviel sei richtig oder falsch, hab ich selten gemacht.

Und eine Navigation möchte auch keine wüste Div/A-Verschachtelung sein, sondern das, was sie auch in Wirklichkeit ist - eine Liste von Links.

Sag das mal dem lieben IE, der wurschtelt nach / vor jedem li-Element nen Zeilenumbruch. Sonst hätt ich's ja auch damit gemacht.

Und Fliesstext klatscht man auch nicht ständig in Divs, sondern nutzt dafür Absätze, P.

Ich hab die DIV's mit dessen ID als eine Art Klasse gesehen und sie so auch genutzt. Deswegen hab ich sie auch doppelt und x-fach genutzt *grrrrr*. Werds fixen.

Und wenn man dann schon für Überschriften korrekterweise ein Hx nutzt - dann aber bitte den Link in die Überschrift und nicht andersherum, was nämlich auch invalide ist.

Mist, du merkst zuviel

. Das ist mir auch klar, das warn die letztn 2 Stunden, wo ich irgendwann zuviel DIV's im Kopf hatte. Und ich wollte, dass man, egal wohin man klickt, die News öffnen kann.

**cag-live** · 25.09.2006, 19:53

Aber jetzt wo ich wahsagas quelltext-zitat sehe, dürfte wohl klar sein, dass du z.B. unmengen an divs mit der id "leer" hast. Das ist ja fast so wie ein blind.gif

*grml* nun verstehsch die ID's erstmal richtig... Dachte, wie grad geschrieben, dass sind eine Art Klassen, die man, so oft man möchte, schreiben kann und somit gewissen vordefinierte Eigenschaften, die in der CSS-Datei stehen, zuweisen kann.

**wahsaga** · 25.09.2006, 19:53

Original geschrieben von cag-live
Sag das mal dem lieben IE, der wurschtelt nach / vor jedem li-Element nen Zeilenumbruch. Sonst hätt ich's ja auch damit gemacht.

Ja, bekannter Bug.
Da hilft oftmals nur, die Elemente Tag-an-Tag zu notieren, also ohne jeglichen Whitespace dazwischen.

Zahlreiche Beispiele zur Formatierung von Navigationslisten liefert http://css.maxdesign.com.au/listamatic/

Und ich wollte, dass man, egal wohin man klickt, die News öffnen kann.

A mit display:block formatieren, macht die gesamte Linkfläche statt nur des Textes klickbar.
Der IE braucht allerdings noch zusätzlich eine width-Angabe dazu - da muss man dann ggf. aufpassen, wenn padding/borders verwendet werden, dass es nicht mit dem Box Model kollidiert.

Tschüss table, hallo div?