Neues design
Dieses Schwarz-auf-Weiß wird irgendwann ja echt langweilig! Es ist Zeit für ein neues Layout, mit all den schönen Tags die bisher vorgekommen sind. Dann kommen auch neue CSS regeln und Bilder und so, ach das wird super *freu*!
Design
Bevor wir wechseln, lass und das ding eben designen. eigentlich ist es wirklich simpel: Inhalt in die Mitte und oben eine sog. Header drüber (Titel-block mit einem Bild, Titel und Untertitel). Und natürlich ist keine seite fertig ohne die Navbar oben drüber auch wenn sie manchmal keiner wirklich braucht.
Zeit die Idee umzusetzen!
Code time!
Zunächst das HTML gerüst aufstellen, danach macht es erst wirklich Sinn mit Farben und anderen Regeln zu klecksen.
<html>
<head>
</head>
<body>
<nav>
<a href="/"><b>PageNinja</b></a>
</nav>
<header>
<div>
<h1>PageNinja</h1>
<h3>Learn Webdev the fun way</h3>
<a href="/whatever">Go!</a>
</div>
</header>
<main>
Inhalt!
</main>
</body>
</html>
Sieht nach viel aus, ist aber eigentlich wirklich einfach denn
<nav>,<header> und <main> sind auch nur umbenannte <div>-Tags.
Den Header hatten wir ja eben schon und der rest ist auch nicht viel schlimmer.
Die Navbar beinhaltet ein element das den Titel wiedergibt, ein link zur Homepage.
CSS
Jetzt muss das “nur” noch schön werden… also los, style= rauskramen und losbasteln:
<html>
<head>
</head>
<body>
<nav style="background:#121214;padding:10px">
<a href="/" style="color:#ffffff;text-decoration:none"><b>Titel</b></a>
</nav>
<header style="background:#d5d5d5;padding:10px">
<div>
<h1>PageNinja</h1>
<h3>Learn Webdev the fun way</h3>
<a href="/whatever">Go!</a>
</div>
</header>
<main style="max-width:900px;margin 0 auto">
Inhalt!
</main>
</body>
</html>
Auch hier nichts wirklich neues außer die Einstellung “margin: 0 auto”
Interessant ist vielleicht noch das Farbformat, angegeben in 3 Blöcken von 2 Hexendezimalzahlen (0-F).