Ich habe mal eine Seite im Tabellenlayout vorgestellt und da wurde mir gesagt ich solle es lieber mit div machen. Was ich dann auch gemacht habe.
Ja, hätte ich das gelesen, hätte ich gesagt, das ist genauso großer Quatsch. Es ist leider so, dass irgendein Halbahnungsloser mal verbreitet hat, man mache jetzt kein Layout mit Tabellen mehr, sondern mit <div>s. Tatsächlich ist beides genauso hirnlos und jemand, der sowas empfiehlt, hat HTML noch nicht verstanden. Wie man aber anständige Websites bauen will, ohne HTML zu verstehen, ist mir ein Rätsel.
wie teile ich meine Seite in mehrere Spalten um z.B. das Menü abzutrennen.
Zunächst einmal, in HTML, gar nicht. Um einen Inhalt mit HTML auszuzeichnen, sollte man mehr an den Inhalt denken, als an das Layout. Zumindest, wenn man es erst mal begreifen will, sollte man gar nicht an das Layout denken.
Tatsächlich bekommt man BLock-Elemente nebeneinander, indem man float verwendet. Das ist für die meisten Layout-Fragen geradezu ein Allheilmittel.
Aber für HTML und die Auszeichnung ist das erstmal nicht relevant.
Oder wie trenne ich einen Header ab um darin Text (Links) oben, unten oder seitlich anzuordnen. Das sind so Punkte bei denen ich noch nicht weiß wie ich das ohne table oder div hinbekomme.
Einfach keine Tabelle verwenden! Erstmal nur HTML auszeichnen, so dass das semantisch gesehen stimmt.
Dass Du kein <div> verwenden sollst, ist übrigens auch falsch. Das habe ich sicher nie gesagt. Jedes Tag hat eine Bedeutung. Auch <div>. Auch <table>. Diese Tags gar nicht zu verwenden ist auch falsch. Man darf sie eben nur da verwenden, wo sie hingehören. <div> gruppiert mehrere Elemente zwecks gemeinsamer Formatierung. Bei ausgefallenen Layoutwünschen kann ein <div> Wunder wirken. Dann ist es richtig eingesetzt. Aber nicht sowas wie
Code:
<div id="Ueberschrift">Willkommen!</div>
Das ist Unsinn. Es muss so heißen:
Eine id mit Namen "Ueberschrift" macht aus einem div noch keine Überschrift. Es bleibt ein allgemeines BLock-Element.
Werde erstmal versuchen mich auf je ein Div für Header, Content (Spalten) und Footer zu beschränken. Oder wäre das schon zuviel? Da ich den Contentbereich includiere, weiß ich nicht wie ich es anderst machen sollte.
Um erstmal zu verstehen, was ich meine, brauchst Du gar kein div. Und das includen geht ja per PHP und nicht per HTML und hat mit <div> rein gar nichts zu tun.
Ein einfaches Layout, zweispaltig mit Header kommt komplett ohne div aus. Auch mit include:
PHP:
<h1><img src="banner.jpg" alt="Willkommen bei mir" /></h1>
<ul id="Menu">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
<h2>Seitenüberschrift</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Und so weiter</p>
<p>Und so fort</p>
<?php include("zweiteskapitel.php"); ?>
Dem ul#Menu ein "float:left" mitgegeben hast Du auch zwei Spalten. Fertig. div? Nicht notwendig, weil nichts gruppiert werden soll.
Du willst nicht, dass der Content unter das Menü fließt? DANN brauchen wir ein div. Und zwar GRUPPIEREN wir dann die <h2>, <p> und alles, was included wird. Das <div> kommt vor das <h2>, und ganz ans Ende das schließende </div>.
Hier macht das div Sinn, hier wird es gemäß seiner Bedeutung eingesetzt: Zum Gruppieren.
Gibst Du dem jetzt ein margin-left in der Breite von ul#Menu hast Du den gewünschten Effekt und ein klassisches Layout.
Jetzt klarer? Oder soll ich irgendwas nochmal deutlicher ausleuchten? Geht Dir ein Licht auf? Wenn Du verstehst, dass es völlig irrelevant ist, wie etwas ohne CSS im Browser dargestellt wird, was Du in HTML auszeichnest, und die Bedeutung der Tags intus hast, dann hast Du HTML verstanden!
Wenn es Dich beruhigt: Es gibt so viele komplizierte Elemente einer Website: Serverseitige Scripts, htaccess, Datenbanken, Ajax, aber die meisten scheitern eigentlich schon an HTML - auch wenn sie es anfangs nicht wissen.
Gruß,
-Efchen