Ho,
Zitat
Was spricht dagegen das Layout mit den Tabellen zu behalten?
Tabellen sind langsamer und nicht dafür geschaffen Layouts zu erstellen (klar es geht, aber man hämmert doch auch nicht mit 'ner rohrzange nur weils geht oder?) sondern Daten tabellarisch darzustellen
Von daher ist es löblich, wenn ein "Tabellen-Mensch" auf div's umsteigen will.
mit dem span-tag kann man inline formate (üblicherweise text oder innerhalb von p-Tags, etc.) per css formatieren. Wenn du ein <span> in ein p-Tag oder über Text legst und span nicht per css formatierst, passiert erstmal gar nichts. Der span-tag erzeugt keinen Textumbruch.
div-container werden dazu verwendet um layouts zu erstellen. Der div-Tag erzeugt einen Container um die eingeschlossenen Inhalte & Formate (listen, absätze, etc.) und einen Zeilenumbruch.
Wenn du ein layout wie bei dem Bild oben erstellen möchtest, brauchst du 3 div's:
linke spalte - im quelltext das erste div bekommt "float:left;" zugewisen und sagen wir mal "width:150px;".
rechte spalte - im quelltext das zweite div - bekommt "float:right;" und "width:150px;".
inhalt (mittlere spalte) - im quelltext das LETZTE div - bekommt kein float, nur ein "width:600px".
Um die drei divs könntest du noch ein viertes legen (wäre im quelltext dann das allererste, vor dem div für die linke spalte) und dem ding dann so formatieren:
margin: 40px auto 10px auto; width:900px;
dann wär die seite schön mittig. Das ergebnis ist dann ein dreispaltiges layout mit einer fixen breite von 900px (angaben sind richtwerte, für 1280x1024 und 1024&768 aber nahezu perfekt).
Du hast übrigens Glück, ich hab hier noch eine kleine Vorlage von mir gefunden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Layout</title>
<style type="text/css">
*{margin:0;padding:0;}
</style>
</head>
<body>
<div style="margin: 40px auto 10px auto; width:900px;">
<div style="background-color:#33FF00;">
header
</div>
<div style="float:left; width:150px; background-color:#D2D2D2;">
<ul>
[*]Home
[*]...
[/list]
</div>
<div style="float:right; width:150px; background-color:#D2D2D2;">
infomenü
...
</div>
<div style="background-color:#EEEEEE; width:600px; margin:0px 150px 0px 150px;">
inhalt...
leerzeile...
leerzeile...
leerzeile...
leerzeile...
leerzeile...
leerzeile...
</div>
<div style="background-color:#33FF00; width:600px; margin:0px 150px 0px 150px;">
evtl. Footer für Impressum, interne Verlinkung etc.
</div>
</div>
</body>
</html>
Alles anzeigen
Vielleicht blickst du mit diesem konkreten (einfachen) Beispiel besser durch (es lässt sich sehr leicht so umbauen, dass du nur mehr die drei spalten hast - einfach header- und footer-div entfernen). Wenn du deine Seite mit CSS gestalltest, solltest du den CSS Quelltext allerdings in eine seperate *.css datei auslagern (schneller und einfacher handhabbar).
Ich hoffe ich konnte damit ein bisschen helfen
mfg
Stefan