Erstmal ein paar generelle Tipps:
- Du solltest immer HTML von CSS strikt trennen, d.h. ein externes Stylesheet anlegen und das per <link> im Header einbinden. Dann hast Du Inhalt und Layout in getrennten Dateien und das Stylesheet muss auch nur einmal geladen werden (danach wandert es in den Cache des Browsers). Auch bei Änderungen tust Du Dich leichter, wenn sie alle Deine Seiten betreffen.
- Du solltest Deinen Code immer validieren lassen. Denn Fehler im HTML-Code wirken sich oft auch auf die CSS-Darstellung aus, weil die Browser versuchen, Fehler selbst zu korrigieren. Da das, was falsch ist aber nunmal falsch ist, gibt es natürlich keine Vorschriften, wie Fehler zu korrigieren sind. Demnach macht das jeder Browser anders und Darstellungsunterschiede sind vorprogrammiert.
Ein paar Anmerkungen zu Deinem HTML:
- Das <img>-Tag im Header mit dem Favicon muss weg, das gehört da nicht hin. google nach "favicon", dann findest Du zahlreiche Anleitungen, wie man sowas einbindet.
- Mir gefällt, dass Du modernes, und sinnvolles, semantisches HTML schreibst und gar nicht auf die Idee kommst, die Fehler zu machen, die man vor 10 Jahren gemacht hat. Du solltest aber auch im Hinterkopf behalten, dass das Tag <div> dazu da ist, mehrere Elemente zu gruppieren. Zu viele divs werden schnell zur (ungenießbaren, weil unübersichtlichen) div-Suppe. Deinen div#footer z.B. brauchst Du gar nicht, weil darin nur ein einziges Element ist und das ist überdies noch auch ein (an dieser Stelle richtiges!) Block-Element, genauso wie div. Eigenschaften, die Du dem div zuweisen kannst, kannst Du auch dem <p> zuweisen. Es verhält sich genau gleich.
- Was die Semantik angeht, gibt es zwei Lager in bezug auf das <br>. Eigentlich ist das ein Layout-Tag und sollte somit nicht mehr verwendet werden. AUch in Deinem Fall würde ich darauf verzichten, und jeden Textabsatz mit <p> auszeichnen. Wenn Du keine Abstände willst, gibst Du den abstandslosen Absätzen eine eigene class und setzt die Abstände auf 0.
Sinnvoll finde ich <br> noch innerhalb eines <address>.
In Deinem Fall könnte man bei Deinem Text im #inhalt sogar eine Liste daraus machen, denn es ist ja eine Aufzählung, was gemacht werden soll.
- Gar nicht geht allerdings das <font>-Tag. Raus damit. Das macht man mit CSS.
So. Das sieht schon ganz gut aus und besser als manche Website, die bereits aus zig Seiten besteht und von Webmastern erstellt ist, die seit Jahren dabei sind. Guter Einstieg! Nur konsequent bleiben! :-)
Daher weiß ich gerade auch nicht, was genau Du noch wissen musst. In Designfragen kann ich Dir nicht helfen, da wäre das HTML-Forum auch der falsche Ort dafür.
Deinen Header hast Du ja schon, das ist das <h1>. Das <div> darum kann vermutlich weg, wird ja nichts gruppiert und <h1> verhält sich wie <div>, beides Block-Elemente.
Buttons in Form eine Parallelogramms kannst Du theoretisch mit ner Grafik machen. Bei Image Maps kann man auch die Form der Fläche definieren, die anklickbar ist. Nachteil eines grafischen Menüs ist natürlich, dass man den Text darin nicht skalieren kann (z.B. wenn man ihn nicht lesen kann). Das alt-Attribut bei Images ist ja eh Pflicht, weswegen es auch noch funktionieren sollte, wenn man Grafiken abschaltet oder einen Client hat, der keine Grafiken darstellt oder beachtet.
Wenn Du zwei Spalten machen willst, Deine Topics links und der Inhalt rechts, dann ist die CSS-Eigenschaft "float" Dein Freund. Ein Block-Element #topics mit float:left, z.B. eine Liste (wie für Menüs).
Für alles weitere bitte ich, Deine Wünsche nochmal auszuformulieren.
Viel Erfolg,
-Efchen
