Hi Patrick,
rücken wir ert mal den Validator Fehlern zu Leibe.
Im Head Bereich lauern einige Tücken, der xhtml Doc-Type ist unvollständig, die Stylesheet Angabe an der falschen Stelle (muss innerhalb des head Bereiches sitzen) und die Meta Tags noch mit einem /> abschließen. Blau & durchgestrichen bitte entfernen, rot bitte ergänzen!
Hier die Korrektur:
Zitat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Orange Goblin´s Portfolio und mehr</title>
<meta name="description" content="Orange Goblin´s Seite mit Tutorials im bereich CGI, Bildergalerien und so weiter" />
<meta name="keywords" content="Cinem4D, C4D, Foto, Galerie, Tutorial" />
<meta name="author" content="Patrick" />
<meta name="editor" content="html-editor phase 5" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<link rel="stylesheet" href="style.css" type="text/css" />
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Alles anzeigen
Die Farbangaben im body Text hat dir wahrscheinlich Phase 5 reingesetzt. Das sind aber alte HTML 4 Angaben. Die Linkfarben kannst du später in der style.css definieren.
Zumal sich hier eine Tücke verbirgt. Zuerst lädt der Browser die style.css. Dort steht background: none, somit durchsichtig. Wahrscheinlich macht der Browser hier eh ein Fallback und nimmt den Standard weiß. Mit bgcolor="#FFFFFF" überschreibst du, das dann aber wieder mit weiß. Ich gehe davon aus, dass du orange haben möchtest. Schreibe dann doch in der style.css bei body gleich background: #f56200;
Nun zu den img Tags, wie erwähnt noch den Backslash /> ergänzen, denke aber an das Leerzeichen vor den Slash, gilt auch für die Meta Tags oben.
Zitat
<ul>
<li><a href="index.html"><img src="home.jpg" width="200" height="50" border="0" alt="Home" /></a></li>
<li><a href="galerie.html"><img src="galeire.jpg" width="200" height="50" border="0" alt="Galerie" /></a></li>
<li><a href="tutorials.html"><img src="tutorials.jpg" width="200" height="50" border="0" alt="Tutorials" /></a></li>
<li><a href="links.html"><img src="links.jpg" width="200" height="50" border="0" alt="Links" /></a></li>
<li><a href="impressum.html"><img src="impressum.jpg" width="200" height="50" border="0" alt="Impressum /"></a></li>
</ul>
Alles anzeigen
Die border="0" Anweisung könntest du auch raus schmeißen. Schreibe dazu in der style.css einfach folgendes
img {
border: none;
}
Oh, was ist dass?
Zitat
<p>Willkommen auf meiner kleinen Homepage. Hier findet ihr Galerien zu den Themen Fotografie und CGI.<br clear="all"/>
Außerdem gibt es Tutorials und einen News-Bereich. Des Weiteren wird es irgendwann Musik geben. Das dauert aber noch.</p>
Das clear="all" wird der Browser nicht beachten, weil er damit nichts anfangen kann.
Richtig wäre es so: <br style="clear: all" /> Wobei man das auch in die style.css auslagern kann.
Aber du hast hier kein Element gefloatet, so daß du es auch nicht clearen musst. Zeilenumbruch einfach mit <br />
Es ist grundsätzlich deine Seite, möchte aber ein paar designtechnische Aspekte anmerken.
Die Schriftart Comic Sans MS ist unter Designern verpönt. Man benutzt das wenn überhaupt nur für Kinderseiten.
Die Buttons wären mir auch etwas zu mächtig und der Text ist auch in die Grafik eingebunden. Da hast du immer einen Aufwand, wenn du die Menütext mal ändern willst.