Responsive Webdesign – Kaffee am Meer – Teil 2: Der Grundaufbau in HTML und CSS

In diesem Tutorial zeige ich die einfache Grundumsetzung der Beispielseite mittels HTML und CSS. Es werden einige Grundlagen erklärt und die eigentliche Seite komplett umgesetzt, sodass an dieser Stelle ein komplettes Beispiel für eine einfache HTML- und CSS-Seite existiert.

Hinweis: Die dem zugehörigen Video-Training beigefügten Arbeitsdateien sind bei allen vier Teilen dieselben und enthalten die komplette fertige Webseite mit Responsive-Design-Anpassung.

Hinweis: Dieses Tutorial ist die im Rahmen unseres Vertextlichungsaufrufs entstandene Textversion des zugehörigen Video-Trainings von Pascal Bajorat. Die Texte können daher durchaus auch einen umgangssprachlichen Stil aufweisen.

Wir empfehlen:
Dreamweaver-Video-Training
Nachdem wir sämtliche Bilder richtig abgespeichert haben, beginnen wir mit dem eigentlichen HTML- und CSS-Code.

Schritt 1

Als Erstes legen wir zwischen den beiden body-Tags ein div an. Dieses div bekommt die Klasse wrapper.

<div class="wrapper"></div>

Schritt 2

Darin enthalten haben wir eine weitere Klasse, und diese nennen wir "Navigation".

<div class=“navigation“></div>

Schritt 3

Hier gibt es jetzt eine Besonderheit. Das hat in dem Fall mit HTML5 zu tun und da möchte ich ganz kurz drauf eingehen:

Hier haben wir für Fälle, wie zum Beispiel header oder auch die entsprechende Navigation eigene Tags. Das heißt, hier verwenden wir jetzt den nav-Tag.

<nav></nav>

Schritt 4

Wir legen uns ein ul an …

<ul></ul>

… und können uns dann in Photoshop ganz einfach die Navigationselemente kopieren.

Schritt 5

Die Navigationselemente selbst liegen wiederum in einem li-Tag. Ul steht übrigens für unordered list, also eine ungeordnete Liste mit einem Standard-Listenzeichen. Dabei handelt es sich um einen Punkt.

<ul>
     <li><a href=“#“>Startseite</a></li>
</ul>

Schritt 6

In der Struktur legen wir jetzt alle Menüpunkte an.

<nav>
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Galerie</a></li>
        <li><a href="#">Anfahrt</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

Schritt 7

Nach der Navigation folgt der header.

<header></header>

Schritt 8

Im header haben wir eigentlich nur das Bild. Das können wir uns einfach per Drag&Drop reinziehen, geben einen Alternativtext an ("Kaffee am Meer") und bestätigen mit OK.

<img src="images/header.jpg" alt="Kaffee am Meer">

Das sieht dann so aus:

Schritt 9

Nach dem header kommt der eigentliche Inhalt. Hier beginnen wir mit einem div und geben ihm die Klasse mainContent.

<div class="mainContent"></div>

Schritt 10

Wir öffnen einen h2-Tag und kopieren aus Photoshop die Hauptüberschrift.

<h2>Besuchen Sie uns in Musterstadt</h2>

Im Quellcode sieht es dann so aus:

Schritt 11

Danach folgt der eigentliche Text …

<p></p>

… und diesen legen wir in p-Tags.

Schritt 12

Die Darstellung lässt sich in Dreamweaver umstellen, und zwar funktioniert das über Ansicht>Codeansichtsoptionen>Umbruch.

Dort einfach ein Häkchen machen …

… und dann sieht das so aus:

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

Schritt 13

Dann begeben wir uns in den Bereich nach dem div-Container und legen einen weiteren an. Dieser bekommt die Klasse sidebar und enthält die Spezialitäten.

<div class="sidebar">
   <h3>Unsere Spezialitäten</h3>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>

Schritt 14

Dann die Liste mit den Spezialitäten. Auch hier werden wir wieder eine Liste verwenden und entfernen den Strich davor. Diesen werden wir später über CSS lösen. Damit haben wir auch die Sidebar fertig.

Der Code dazu:

<li>Lorem ipsum dolor sit amet, consectetuer</li>
<li>Aenean commodo ligula eget dolor</li>
<li>Aenean massa dis parturient montes</li>
<li>Cum sociis natoque penatibus et magnis</li>

Schritt 15

Auch bei der Sidebar gibt es eine kleine Besonderheit, und zwar können wir hier dadurch, dass wir nur ein einziges Element haben, entweder ein aside-Tag generell drumlegen oder gegebenenfalls – wenn wir das Ganze später erweitern möchten – dem einzelnen Element ein aside-Tag geben.

<div class=„sidebar">
  <aside>
    <h3>Unsere Spezialitäten</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
          <ul>
              <li>Lorem ipsum dolor sit amet, consectetuer</li>
              <li>Aenean commodo ligula eget dolor</li>
            <li>Aenean massa dis parturient montes</li>
              <li>Cum sociis natoque penatibus et magnis</li>
         </ul>
    </aside>
</div>

Dann sieht das so aus:

Schritt 16

Wir haben jetzt den HTML-Aufbau fast fertig. Wir müssen nun noch einmal in den oberen Bereich und über dem nav-Tag noch das Logo anlegen. Hierfür benutzen wir einen h1-Tag, können uns Kaffe am Meer kopieren und speichern das Ganze.

<h1>Kaffee am Meer</h1>

Schritt 17

Jetzt geben wir dem Titel ebenfalls noch den Titel "Kaffee am Meer" mit und haben damit den HTML-Aufbau soweit fertig.

<title>Kaffee am Meer</title>

Schritt 18

Ich wechsle jetzt einmal in die Entwurfsansicht und wie wir sehen haben wir hier alle unsere Elemente, die wir angelegt haben. Allerdings noch ohne jegliche Stile. Das heißt, das alles läuft einfach in den Standard-Browser-Definitionen von oben nach unten runter.

Schritt 19

Als Nächstes benötigen wir also CSS.

CSS lässt sich über mehrere Arten und Weisen bzw. über verschiedene Möglichkeiten einbinden. Es gibt zum Einen die Möglichkeit, das Ganze mit style-Tags direkt einzufügen. Zum Beispiel nehmen wir für den body background die Farbe Rot.

<style>
  body{background: #F00;}
</style>

Das sieht dann so aus:

Schritt 20

Eine andere Möglichkeit wäre, das CSS auszulagern. Dann würden wir das Ganze über Link einbinden und dann zum Beispiel einfach die Datei benennen.

<link rel="stylesheet" href="style.css">

Schritt 21

Wir machen es uns an der Stelle leicht und werden jetzt erst einmal mit den Inline-Styles arbeiten.

Generell sollte man natürlich die CSS-Bereiche auslagern und das Ganze dann über Link einbinden. Das werden wir später auch machen, aber um jetzt nicht immer zwischen Dateien hin- und herswitchen zu müssen, können wir in der Erstellungsphase mit den einfachen Inline-Styles arbeiten.

Wir beginnen also mit dem Body. Hier legen wir als background die Farbe Weiß fest. Weiß ist zwar die Standardfarbe jedes HTML-Dokumentes, aber diese Standard-Definitionen lassen sich natürlich anpassen. Deswegen legen wir es hier noch mal gesondert fest, auch wenn es sich wie bereits erwähnt um einen Standard handelt.

<style>
  body{background: #FFF;}
</style>

Schritt 22

Als Nächstes definieren wir die Schrift. Wir haben hier eine 12-Pixel-Schrift und als Schriftfamilie haben wir die Trebuchet MS.

body{background:#fff;font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;}

Schritt 23

Dann können wir uns die Schriftfarbe aus der PSD-Datei ziehen und müssen die Schriftgröße noch einen hochsetzen, denn es sind doch 13 und nicht 12 Pixel. Hinten stellen wir dann color und den entsprechenden Farbcode an.

body { background:#fff; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#381d11; }

Der Quellcode dazu:

Schritt 24

Wir speichern das Ganze und sehen uns die Seite einmal an. Wir sehen sofort, dass die Angaben übernommen wurden. Wir haben jetzt bereits die Schrift richtig eingefärbt und der Hintergrund ist natürlich nach der Rot-Aktion wieder weiß.

Schritt 25

Als Nächstes legen wir den wrapper an. Dazu verwenden wir die Klasse wrapper, weil wir es in dem div so angegeben haben.

Wir stellen einen Punkt voran und geben eine Weite an. Die Weite ziehen wir uns aus der PSD-Datei. Dazu blende ich mir die Hilfslinien ein. Wir haben einen Wert von 944 Pixeln.

Wir schreiben also: .wrapper {width:944px;}

Schritt 26

Wir geben noch ein padding von oben und unten 0 und links und rechts 20 Pixel an. Dieses padding sorgt immer für einen Rand, auch wenn wir auf kleineren Auflösungen sind. Der Text klebt jetzt auf kleineren Monitoren nicht direkt am Rand.

.wrapper { width:944px; padding:0 20px; }

Schritt 27

Wir klicken jetzt auf die Entwurfsansicht und sehen, dass der Rahmen den wrapper markiert. Der Abstand sind die 20 Pixel, die wir angegeben haben.

Schritt 28

Nun soll das Ganze mittig, also zentriert sitzen. Da arbeiten wir mit margin auto.

.wrapper { width:944px; padding:0 20px; margin:auto; }

Schritt 29

Dadurch sitzt der Container jetzt immer mittig.

Schritt 30

Nun benötigen wir oben und unten die Linien. Diese werden wir auch über den wrapper realisieren, und zwar wählen wir background->url->images->linien.gif aus …

.wrapper { width:944px; padding:0 20px; margin:auto; background:url(images/linie.gif) top center; }

… und dann die Positionierung top und center.

Schritt 31

Wir gehen in die Entwurfansicht zurück und sehen die Linie, die sich aktuell noch automatisch repeated.

Schritt 32

Die soll natürlich nur oben sitzen. So folgt noch ein no-repeat …

.wrapper { width:944px; padding:0 20px; margin:auto; background:url(images/linie.gif) top center no-repeat; }

… und jetzt sitzt sie nur oben.

Schritt 33

Was allerdings im Moment immer noch auffällt, ist, dass wir hier noch einen Abstand haben.

Schritt 34

Der Abstand kommt vom body. Dort setzen wir das Ganze noch auf padding 0.

Dann fügen wir noch ein margin 0 hinzu …
body { background:#fff; font:0.8em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#381d11; padding:0; margin:0; }

… und dann sitzt das Ganze oben direkt an der Kante.

Schritt 35

Wir haben allerdings die Linie nicht nur oben, sondern auch unten.

Wir können beim background ein Komma setzen, wählen wieder Linie.gif und geben als Positionierung bottom und center an. Ebenfalls no-repeat.

.wrapper { max-width:944px; padding:50px 20px; margin:auto; background:url(images/linie.gif) top center no-repeat, url(images/linie.gif) bottom center no-repeat; }

Schritt 36

Wir wechseln einmal in den Browser und sehen jetzt die Linie unten …

… und oben.

Schritt 37

Wenn du in Safari genau darauf geachtet hast, dann ist dir sicher aufgefallen, dass, obwohl wir in der Entwurfsansicht die Linien oben haben, …

… in Safari noch ein Abstand ist.

Schritt 38

Das liegt daran, dass die Entwurfsansicht von Dreamweaver nicht genau die reale Webansicht widerspiegelt. Wir können dem HTML-Tag noch ein padding und margin 0 mitgeben, dann wäre das Ganze in dem Moment wieder in Ordnung.

Wir können aber auch einen etwas anderen Weg gehen, und zwar wählen wir Sternchen (*).

Das Sternchen steht für jeden beliebige HTML-Tag. Wir setzen das Ganze auf padding 0 und margin 0. Damit werden von allen Tags die padding und margin Angaben entfernt.

* { padding:0;margin:0; }

Dadurch sieht alles ein bisschen chaotisch aus, was aber nichts macht, denn wir werden im weiteren Verlauf individuelle Einstellungen vergeben.

Schritt 39

Was wir auf jeden Fall noch machen müssen: Der wrapper braucht aktuell ein padding. Anfangs haben wir das padding oben und unten auf 0 gesetzt.

Jetzt mit den Linien brauchen wir den entsprechenden Abstand. Wir können gute 50 Pixel mitgeben …

.wrapper { max-width:944px; padding:50px 20px; margin:auto; background:url(images/linie.gif) top center no-repeat, url(images/linie.gif) bottom center no-repeat; }

… und haben das Ganze damit quasi soweit integriert.

Schritt 40

Als Nächstes bauen wir das Logo ein. Wir gehen über h1->background und wählen logo.png.

Das Ganze setzen wir auf no-repeat und die Positionierung ist center top.

h1 { background:url(images/logo.png) center top no-repeat; }

Schritt 41

Dann müssen wir natürlich noch die Schrift anpassen. Bei der Schrift kommen wir zu den Google Web Fonts.

Dazu gehe ich einfach auf www.google.de und suche hier zum Beispiel nach webfonts.

Hier der erste Eintrag www.google.com/webfonts

Schritt 42

In der Suche gebe ich "Alex Brush" ein. Hier haben wir die Schrift.

Schritt 43

Ich klicke auf Quick-use.

Schritt 44

Ich hatte vorhin erwähnt, dass es noch andere Möglichkeiten gibt, CSS-Dateien einzubinden. Eine habe ich dabei noch ausgelassen, die wir jetzt hier verwenden:

Das @import.

Schritt 45

Diesen @import-Bereich können wir direkt in den style-Tag mit hineinschreiben und dann wird die entsprechende CSS-Datei importiert.

@import url(http://fonts.googleapis.com/css?family=Alex+Brush);

Schritt 46

Um diese Schrift nun zu nutzen, brauchen wir einfach nur die ganz normale bekannte font-family.

Und das sieht so aus:

h1 { background:url(images/logo.png) center top no-repeat;font-family:’Alex Brush', cursive; }

Schritt 47

Das kopieren wir mit in das h1-Tag rein, prüfen, welche Größe es in der PSD-Datei hat.

Wir haben hier 48 Pixel und machen es wie im body auch: Wir machen aus font-family nur font und schreiben die 48 Pixel mit vor.

Dann noch die Schriftfarbe und einmal Speichern.

h1 { background:url(images/logo.png) center top no-repeat;font:48px 'Alex Brush’, cursive; color:#381d11; }

Schritt 48

Zurück zur "Kaffee am Meer"-Seite. Somit haben wir die Schrift ohne Bilder oder sonstige Tricks wie zum Beispiel Cufon eingebunden.

Schritt 49

Jetzt soll die Schrift natürlich mittig sitzen. Wir verwenden also text-align center.

h1 { background:url(images/logo.png) center top no-repeat;font:48px 'Alex Brush’, cursive; color:#381d11; text-align:center; }

Schritt 50

Wir haben jetzt allerdings das Problem, dass "Kaffee am Meer" direkt über dem Logo sitzt.

Schritt 51

Dafür verwenden wir padding-top, geben 50 Pixel ein, laden einmal neu und haben dadurch einen Abstand nach oben.

h1{ background:url(images/logo.png) center top no-repeat; font:48px 'Alex Brush', cursive; color:#381d11; text-align:center; padding-top:50px; }

Die Hintergrundgrafik haben wir top positioniert. Die bleibt also an der oberen Kante und die Schrift rutscht nach unten.

Schritt 52

Als Nächstes folgt die Navigation. Hier können wir den nav-Tag ansprechen und dann über den ul-Tag gehen.

Als Erstes entfernen wir die Listenpunkte.

Dazu müssen wir einfach den list-style auf none setzen.

nav ul { list-style:none; }

Schritt 53

Dann möchten wir alle Listenpunkte nebeneinander haben. Dafür gehen wir über den li-Tag und sagen display inline.

nav ul li { display: inline; }

Wir laden einmal neu und jetzt sitzen alle hintereinander weg.

Schritt 54

Als Nächstes muss der eigentliche Link angepasst werden. Da kommt die Farbe mit rein, den Unterstrich entfernen wir mit text-decoration none.

nav ul li a { color:#381d11; text-decoration:none; }

Schritt 55

Jetzt passen wir noch allgemein für die gesamte Navigation bzw. für alle Elemente, die darin enthalten sind, die font-size an, und zwar setzen wir diese auf 14 Pixel. In Photoshop haben wir nur Versalien. Passen wir das Ganze an mit text-transform und uppercase.

nav ul { list-style:none; font-size:14px; text-transform:uppercase; }

Dann sieht das so aus:

Schritt 56

Jetzt braucht das Ganze noch entsprechende Abstände.

Dafür verwenden wir wieder ein padding im a-Tag. Oben und unten 0 und nach links und rechts messen wir aus. Da haben wir insgesamt 22 Pixel. Nach links und rechts brauchen wir quasi die Hälfte, also 11 Pixel …
nav ul li a { color:#381d11; text-decoration:none; padding:0 11px; }

… und laden einmal neu.

Schritt 57

Jetzt bekommt der nav-Tag noch einen Abstand nach unten, damit er nicht direkt über dem header hängt. Auch den können wir kurz ausmessen: Das sind gute 30 Pixel.

nav { margin:30px 0; }

Schritt 58

Jetzt muss das Ganze natürlich noch mittig positioniert werden.

Dazu geben wir dem ul-Tag eine feste Weite und tasten uns so langsam heran. Wir verwenden als Erstes 600 Pixel und setzen das Ganze dann margin auto.

nav ul { list-style:none; font-size:14px; text-transform:uppercase; width:600px; margin:auto; }

Schritt 59

Hier können wir das Ganze mit den Entwickler-Werkzeugen anschauen, ob wir es mit den 600 Pixeln richtig getroffen haben. Wir gehen in Safari in den Bereich Entwickler>Webinformation einblenden.

Schritt 60

Darauf öffnet sich die entsprechende Konsole, die es übrigens in der Form auch in Google Chrome gibt. Firefox verfügt mittlerweile auch über eine eigene Entwickler-Konsole.

Schritt 61

Mit der Lupe können wir das Element untersuchen …

… und sehen im hellblauen Rahmen, wenn ich da mal mit der Maus drüberfahre, wie weit unsere 600 Pixel sind.

Schritt 62

Das Dunkelblaue ist das margin nach rechts und links, mit dem wir diesen Bereich mittig positionieren.

Anhand des blauen Bereiches ist hier ganz gut zu erkennen, dass 600 Pixel etwas zu viel sind und das Ganze so natürlich noch nicht mittig sitzt.

Schritt 63

Wir gehen also auf 550 Pixel und laden noch einmal neu.

nav ul { list-style:none; font-size:14px; text-transform:uppercase; width:550px; margin:auto; }

Schritt 64

Wir haben immer noch etwas Luft und mit 520 Pixel haben wir das Ganze perfekt zentriert.

nav ul { list-style:none; font-size:14px; text-transform:uppercase; width:520px; margin:auto; }

Schritt 65

Jetzt muss noch etwas Abstand nach oben zum Logo eingebunden werden.

Wir entfernen im nav das bottom und setzen hier eine 0 dahinter.

nav { margin:30px 0; }

Dadurch haben wir jetzt quasi einen Abstand nach oben und unten.

Schritt 66

Jetzt habe ich euch mit dem Switchen zwischen Safari und Dreamweaver allerdings noch eine kleine Funktion vorenthalten. Und zwar ist es möglich, auch eine Live-Ansicht im Dreamweaver CS6 zu realisieren.

Du siehst oben den Button Live-Ansicht. Wir gehen einmal in den Entwurfsmodus und können hier auf die Live-Ansicht klicken.

Schritt 67

Dadurch wird das viel realistischer quasi gerendert mit Safari. Dadurch bekommen wir auch die Google Fonts mit rein und haben eine realistische Darstellung.

Was dieser Bereich natürlich so nicht bietet, ist die angenehme Webentwickler-Konsole, die wir im Safari haben, und das ersetzt natürlich noch immer keinen richtigen Browser-Test.

Schritt 68

Nachdem die Navigation so in der Form fertig ist, widmen wir uns dem Content-Bereich. Hier sorgen wir als Erstes dafür, dass der Haupt-Content-Bereich links sitzt und die Sidebar rechts daneben.

Dazu wechseln wir in Photoshop und messen die Bereiche kurz aus. Wir haben hier 664 Pixel für den Haupt-Content-Bereich – also hier mainContent – und setzen das Ganze auf float left.

.mainContent { max-width:664px; float:left; }

Schritt 69

Danach folgt die Sidebar. Auch hier können wir die Weite ausmessen. Wir haben jetzt hier 280 Pixel. Die Sidebar bekommt float right.

.sidebar { width:280px; float:right; }

Im Code sieht es so aus:

Schritt 70

Wir rufen den Browser wieder auf, laden einmal neu und sehen, dass das Ganze jetzt nebeneinandersitzt.

Schritt 71

Jetzt haben wir allerdings das Problem, dass die Linie sich nach oben verschoben hat. Außerdem fehlt uns noch der Abstand zwischen mainContent und Sidebar.

Schritt 72

Das Ganze müssen wir mit einem clear unterbinden. Das heißt, wir setzen ganz einfach bei dem wrapper noch ein clear both mit ein, um an der Stelle das Floaten wieder zu beenden.

.wrapper { max-width:944px; padding:50px 20px; margin:auto; background:url(images/linie.gif) top center no-repeat, url(images/linie.gif) bottom center no-repeat; clear:both; }

Schritt 73

Das funktioniert an der Stelle so allerdings noch nicht. Das liegt daran, dass wir ein clearfix brauchen. Ich persönlich verwende am liebsten das clearfix von HTML5 Boilerplate, das auch generell bei der Entwicklung von Webseiten verwendet werden kann.

www.html5boilerplate.com

Schritt 74

Wenn du mehr über das HTML5 Boilerplate erfahren möchtest, dann schau dir doch auch den Praxis-Workshop zu diesem Video-Training an, wo ich das Webdesign-Podcast umsetze. Dort wird das HTML5 Boilerplate verwendet.

In diesem Fall werden wir uns nur eine kleine Version herausziehen.

Schritt 75

Wir können das clearfix mit CMD+F suchen.

Schritt 76

Hier ist die entsprechende clearfix-Funktion bzw. "Funktion" ist an dieser Stelle das falsche Wort, denn es handelt sich natürlich um Klassen.

.clearfix:before, .clearfix:after {content: "020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Der Quellcode dazu:

Schritt 77

Wir geben jetzt einfach dem wrapper die Klasse clearfix mit.

<div class="wrapper clearfix“>

Schritt 78

Wenn wir das Ganze neu laden, passt es wieder.

Schritt 79

Das Problem mit dem Abstand zwischen mainContent und der Sidebar bleibt weiterhin bestehen. Hier können wir es uns relativ leicht machen. Wir ziehen eine weitere Hilfslinie – bis hierhin geht ungefähr der Content-Bereich.

Schritt 80

Das sind hier gute 610 Pixel und um diesen Wert verkleinern wir jetzt den mainContent.

.mainContent { max-width:610px; float:left; }

Und dadurch, dass der mainContent links gefloatet wird, also quasi immer am linken Seitenrand sitzt und der Sidebar-Bereich am rechten Seitenrand und wir mit den beiden Weiten den Bereich nicht mehr ganz ausfüllen, entsteht hier von ganz alleine der entsprechende Abstand.

Schritt 81

Als Nächstes müssen wir noch vom Header einen Abstand nach unten erstellen und verwenden dafür margin-bottom 30 Pixel.

header { margin-bottom:30px; }

Das sieht dann so aus:

Schritt 82

Jetzt kümmern wir uns um die Überschrift im mainContent-Bereich. Da brauchen wir wieder die Alex Brush.

Wir haben hier ebenfalls 48 Pixel als Schriftgröße und dieselbe Farbe wie im Logo.

.mainContent h2 { font:4em 'Alex Brush', cursive;color:#381d11; font-weight:normal; }

Schritt 83

Danach müssen wir uns um den eigentlichen Schriftblock kümmern und verwenden dafür mainContent p.

Wir geben als Erstes ein margin-bottom, damit die einzelnen Absätze nicht so untereinander kleben, und danach müssen wir die Zeilenhöhe erhöhen.

Das können wir generell für alle Elemente machen und legen das Ganze hier im body fest.

body { background:#fff; font:0.8em "Trebuchet MS", Arial, Helvetica, sans-serif; color:#381d11; line-height:1.4 }

Damit haben wir dann auch die Texte entsprechend angepasst.

Schritt 84

Dann kommen wir zum letzten Bereich, und zwar zur Sidebar.

Für die Sidebar benötigen wir das Icon, das wir in Photoshop freigestellt bzw. ausgeschnitten haben.

Wir können das Ganze noch ein bisschen aufräumen, damit die Struktur der CSS-Datei bzw. unseres CSS-Codes auch zum Aufbau des HTML-Dokumentes passt.

Schritt 85

Wir gehen jetzt über die Überschrift h3, haben hier 18 Pixel und auch die Trebuchet MS.

Font-weight setzen wir auf normal, entfernen das standardmäßige bold der Überschriften und setzen das Icon daneben. No-repeat und es soll natürlich links sitzen.

.sidebar h3 { font-size:1.4em; color:#381d11; font-weight:normal; background:url(images/icon.png) no-repeat left; }

Schritt 86

Jetzt ist das Icon ein wenig höher als die Überschrift, deswegen muss dieser h3-Container immer eine Höhe von 50 Pixel haben.

Das sieht dann so aus:

Schritt 87

Jetzt müssen wir die Schrift noch etwas einrücken. Das können wir über entsprechende padding-Werte machen.

Als Erstes muss die Schrift noch weiter nach unten. Dafür verwenden wir padding-top von 20 Pixel. Rechts und unten brauchen wir keinen Wert und links verwenden wir 55 Pixel.

.sidebar h3 { font-size:1.4em; color:#381d11; font-weight:normal; background:url(images/icon.png) no-repeat left; height:50px; padding:20px 0 0 55px; }

Sieht so schon mal besser aus …

Schritt 88

… allerdings muss das Ganze noch ein Stück weiter nach unten. Wir vergleichen das noch mal mit der PSD-Datei:

Der Abstand zwischen dem Logo und der Schrift muss noch ein bisschen größer sein und es könnte noch ein bisschen weiter nach unten rutschen.

So sieht das Ganze schon wesentlich besser aus.

.sidebar h3 { font-size:1.4em; color:#381d11; font-weight:normal; background:url(images/icon.png) no-repeat left; height:50px; padding:28px 0 0 65px;}

Schritt 89

Als Nächstes müssen wir dem p-Tag in der Sidebar ebenfalls einen Abstand nach unten geben, damit dieser nicht direkt an der Liste klebt.

Hier können wir es uns leicht machen, und zwar führen einfach ein sidebar.p mit auf.

.sidebar p { margin-bottom:20px; }

Schritt 90

Dann folgt die Liste. Hier beginnen wir mit dem list-style. Und wenn wir die Liste durchgehen, dann wird uns auffallen, dass wir keinen Listenpunkt bzw. Listenstil haben, wo wir einfach nur direkt einen Strich haben.

Schritt 91

Das passt aber ganz gut, denn so kann ich eine kleine CSS3-Funktion zeigen. Wir setzen den Listenstil auf none.

.sidebar ul { list-style:none; }

Schritt 92

Wir arbeiten jetzt mit einem Pseudo-Element, und zwar before. Diesem geben wir einen Bereich content …

.sidebar ul li:before { content:"- "; }

… und das wird dann unser Strich.

Schritt 93

Jetzt bekommen die Listenelemente selber noch einen kleinen Abstand und in der PSD-Datei ist das Ganze so, dass wir es ein paar Pixel eingerückt haben, damit es optisch besser auf der Linie mit dem Icon sitzt.

Schritt 94

Also legen wir weiter unten sidebar p und sidebar ul an und vergeben ein padding left von 6 Pixeln.

.sidebar p, .sidebar ul { padding-left:6px; }

Das Ergebnis sieht so aus:

Schritt 95

Wir gehen noch mal in den Browser, laden die Seite neu und schauen, ob alles passt.

Damit haben wir jetzt prinzipiell die Grundumsetzung unseres Themes bzw. unserer Arbeitsdatei fertig.

Schritt 96

Jetzt kommt die schlechte Nachricht, die euch sicher etwas enttäuschen wird:

Wir haben mit dieser Umsetzung noch nichts gemacht, was in irgendeiner Form zum Bereich Responsive Webdesign gehört.

Das ist aber nicht schlimm, denn jetzt wisst ihr schon mal ganz genau, wie die Webseite eigentlich umgesetzt werden sollte und worin sich das Ganze unterscheidet.

Denn diese Bereiche möchte ich euch im nächsten Teil der Tutorialserie erklären.

Bildquellen: http://fotolia.com – Fotolia © alder #14697790, http://fotolia.com – Fotolia © Stephan Leyk #7982735

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training