Wie Layoutet Ihr? Tabellen / Div-Tags?

[Sven Rautenberg]

Moin!

1)Zum Traffic:
was ist das für ein unterschied: 1000 Zeilen in der Html datei mit 50 Zeilen im CSS File oder 50 Zeilen in der HTML-Datei mit 1000 Zeilen im CSS File? KEINEN! Denn mit CSS kann man auch "zu viel" definieren!

Wenn du nur eine einzige HTML-Seite mit einer einzigen CSS-Datei betrachtest, hast du natürlich Recht.

Aber Websites tendieren dazu, nicht nur aus einer einzigen HTML-Seite zu bestehen. Wenn du zwei HTML-Seiten nimmst, sieht deine Rechnung nämlich schon so aus:

(HTML 1 + HTML 2 + CSS)

1000 + 1000 + 50 = 2050 Zeilen gegen 50 + 50 + 1000 = 1100 Zeilen

2)immernoch Taffic:
    <p>Etwas Text</p>
// WIESO DAS? Wenn der td richtig definiert ist (Schrift, farbe usw (in verbindung mit .table, .body) braucht es den P-Tag nicht, finde ich eh einen sch**** Tag, da er viel arbeit mit sich bringt aber kaum was nützt! Um H1 kommst aber so oder so nicht herum (suchmaschinenfreundlichkeit!)

Textabsätze gehören in <p>, das ist nun mal so. Wie willst du sonst die Absätze voneinander trennen und dort Abstand unterbringen? Mit <br> etwa? Schwierig, wenn etwas anderes als exakt eine Zeile oder zwei Zeilen Abstand gefordert sind. Eineinhalb Zeilen Abstand beispielsweise gehen mit <br> nicht - mit <p> geht das hingegen pixelgenau, wenn nötig.

3. Hast du ein konkretes Bsp. für ein Layout nur via css, würde mich sehr interessieren wie ihr bilder, navigation usw ausrichtet ohne 1000 Zeilen CSS schreiben zu müssen! Thx

Entweder man schreibt 1000 Zeilen CSS, oder man schreibt 1000 Zeilen HTML. Der Aufwand ist aber nicht derselbe. Denn wenn ich nur das notwendigste an HTML-Code schreibe, und den Rest über CSS regele, dann kann ich später als CSS-Laie, aber HTML-Kundiger problemlos im HTML Inhalte ändern und beispielsweise neue Navigationspunkte einfügen, indem ich einfach nur die vorhandenen Punkte kopiere. Ich muß mir keine Gedanken machen, ob ich mit der Änderung irgendein Tabellenkonstrukt zerstöre, und die zu kopierende Codeeinheit ist in der Regel auch wesentlich kleiner und übersichtlicher.

Idealerweise kopiert man für einen neuen Menüpunkt nämlich nur so eine Zeile:
<li><a href="linkziel">Menüpunkt</a></li>

Und nicht ein ganzes Tabellenkonstrukt.

4. Grundsatz des semantisches Markup stimme ich absolut zu, nur beinhalten gewisse Element viele Nachteile (meist nur durch Überdimensionierte CSS-Scripts zu lösen), und solange jeder sofort weiss um was es geht, no Problem, siehe dazu auch bsp. ganz unten.

Welche Elemente haben Nachteile?

5)"wenn Du den HTML-Code mit Dreamweaver o.ä. begucken kannst"
// Sorry, aber eine Ahnung von HTML und co. muss man so der so haben, benutze den Dreamweaver, aber nicht für Vorschau usw. sondern nur wegen den Tag-Erleichterungen. Schlussendlich muss jeder Code gut strukturiert sein, ob tabellen oder nicht.

Richtig, aber mit Tabellen wird die Struktur des Textes verdeckt. Bei deinem Quellcodebeispiel ganz unten wird eben gerade NICHT deutlich, wo die Navigation, der Content und die Überschrift sitzt.

6. "sondern generierst (mittels PHP, JSP, PERL oder was auch immer) wirst du mit Tabellen komplett wahnsinnig."
   // Arbeite sehr viel mit Smarty und PHP (darum auch HTMl-Layout), hatte noch NIE Probleme deswegen, musst nur sauber und strukturiert arbeiten / programmieren (-; (was auch schnell geht)

Man wird mit Tabellen wahnsinnig - insbesondere, wenn sich irgendwo eine Größe ändert, und die ganze Tabelle pixelgenau zusammengesetzt war. Deshalb wird nur sehr selten mit einzelnen Tabellenelementen (tr, td, th) gearbeitet, sondern viel lieber mit kompletten Tabellen - die dann passend verschachtelt werden auf Kosten der Dateigröße und des Traffics.

7)"Wenn du "sauber" im Sinne von "sieht im Browser gut aus" verstehst, stimme ich Dir zu. Im Sinne von "lesbarer Code" sind Tabellen aber i.d.Regel nicht wirklich sauber."
// Sauber= W3c und CSS konform, und gut lesbar (siehe 6)

Wenn dein Beispielcode unten ein Paradebeispiel sein soll - eines für "leicht lesbar" ist er nicht.

9)"Wenn Du z.B. Deine Menüspalte links nach rechts setzen wolltest, ist mit CSS nichts zu machen. Du müßtest das HTML umständlich umschreiben"
// Betreue (leider) auch Webseiten die so wie du sagst gemacht sind, nur für mich ist das ein spiel mit der Zeit, da ich zuerste alle Positionierungen usw klar finden muss (via CSS und Tags), um danach etwas klar zu definieren. Ist aber sicher auch eine gewohnheitsfrage (-;

Es gibt im Firefox den Tag Inspector. Der sagt dir zu jedem HTML-Element, welche CSS-Formatierung aus welcher CSS-Datei wirksam wird.

Wenn man sich zurechtfinden will, benötigt man nur die richtigen Hilfsmittel.

11)Thema Jeena:
Danke. Das ist das erste Bsp. das ich bekomme, wo ich zustimmen muss.
Ich mache jedoch bei dem folgendes:
a) die Tabellen-Breite usw oder TD-Breite ist je nach Auflösung anders, somit sind sie immer neben einander. (Schriftgrösse usw passt sich ja auch an, siehe 10)

Das Problem ist: Handhelds haben beispielsweise nur 320 Pixel breite Displays. Glaubst du, dass eine Tabelle, die man auf dem Computer mit mindestens 800 Pixeln Breite betrachtet, auf so einem schmalen Display noch gut aussieht?

Hier noch kurz ein bsp. für ein übersichtliches und sauberes layout:

Hier mein Gegenentwurf - mangels eines verlinkten Stylesheets erstmal nur auf das Minimum an HTML zurechtgestutzt, welches inhaltlich notwendig ist.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DEIN TITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/_style/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<ul id="navigation">
  <li><a href="/en/index.shtml">Home</a></li>
  <li><a href="/en/company/index.shtml">Company</a></li>
  <li><a href="/php/mhsCms/index.php?app=news&amp;action=showListNews_byNGR&amp;newsgroupid=3&amp;show=list&amp;archive=0">News</a></li>
  <li><a href="/en/service/index.shtml">Service</a></li>
  <li><a href="/en/team/index.shtml">Team</a></li>
  <li><a href="/en/contact/index.shtml">Contact</a></li>
  <li><a href="/en/kidscorner/index.shtml">Kidscorner</a></li>
  <li><a href="javascript:printme();"><img src="/_images/button_print.gif" width="22" height="15" border="0" alt="Seite drucken"></a></li>
  <li><a href="openMailWindow();"><img src="/_images/button_empfehlen.gif" width="23" height="15" border="0" alt="Seite weiterempfehlen"></a></li>
  <li><a href="/index.shtml"><img src="/_images/button_home.gif" width="15" height="15" border="0" alt="zur Startseite"></a></li>
</ul>

<div id="content">
  <h1>Company</h1>

<p>DEIN TEXT</p>
  <address>DEINE ADRESSE</address>
  <p><img src="/_images/left_company.jpg" width="285" height="501" alt="Bild"></p>
</div>

</body>
</html>

- Sven Rautenberg