Responsive Webdesign – Praxis-Projekt – Teil 2: Kopfbereich/Header

In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird der HTML- und CSS-Aufbau des Headers sowie der allgemeine Grundaufbau erläutert.

Wir empfehlen:
Dreamweaver-Video-Training

Schritt 1

Wir wechseln also jetzt in den Dreamweaver zurück und beginnen ganz einfach mit dem header-Element.

<header>

</header>

Schritt 2

Das Erste, was jetzt hier in dem Moment auffällt, ist, dass der Dreamweaver standardmäßig einen größeren Einzug macht, als wir hier im HTML5-Boilerplate vorgegeben haben. Im Prinzip ist das vollkommen egal, wer hier alles einheitlich haben möchte, kann das Ganze entsprechend konfigurieren.

Dreamweaver>Voreinstellungen

Schritt 3

Dann befindet sich das Ganze im Bereich Codeformat und hier haben wir Tabulatorgröße, da können wir das Ganze auf 2 setzen. Bestätigen mit OK.

Jetzt passt es ganz genau.

Schritt 4

Jetzt haben wir unser erstes header-Element und legen uns einen div an. Diesem div geben wir jetzt die Klasse wrapper und clearfix. Auf clearfix gehe ich gleich zum Schluss ein, wenn wir unseren entsprechenden CSS-Part schreiben.

 <header>

     <div class=“wrapper clearfix“> </div>

</header>

Schritt 5

Als Nächstes setzen wir das Logo ein. Das fügen wir hier mit einem entsprechenden Heading 1 ein. Das Ganze soll natürlich verlinkt sein, deswegen hier noch mal einen entsprechenden a-Tag, href auf Raute (#), dadurch haben wir jetzt im Prinzip eine Sprungmarke beziehungsweise einen Platzhalter.

<header>

     <div class=“wrapper clearfix“>

         <h1><a href=“#“></a></h1>

     </div>

</header>

Schritt 6

Dann kommt der Titel Webdesign Podcast und wir geben dem Ganzen die ID branding.

<header>

     <div class=“wrapper clearfix“>

         <h1 id= “branding“><a href=“#“>Webdesign-Podcast.de</a></h1>

     </div>

</header>

Schritt 7

Danach kommt die Navigation, dafür gibt es in HTML5 das nav-Element.

<nav></nav>

Schritt 8

Hier setzen wir jetzt eine Liste ein.

<nav>
      <ul>

          <li></li>

        </ul>
</nav>

Schritt 9

Dann kommt der Link Banner; auch hier wieder auf einen Platzhalter verlinken, also Raute (#) und dann Impressum.

<nav>

      <ul>

          <li><a href=”#”>Banner</a></li>

          <li><a href=”#”>Impressum</a></li>

       </ul>

 </nav>

Schritt 10

Dann geben wir dem nav-Tag eine weitere ID topNavigation und speichern das Ganze.

<nav id=”topNavigation”>

     <ul>

          <li><a href=”#”>Banner</a></li>

          <li><a href=”#”>Impressum</a></li>

      </ul>

</nav>

Schritt 11

Wir gehen jetzt einmal in den Entwurfsmodus. So sieht es bis jetzt aus:

Die Elemente sind alle da, allerdings sieht das Ganze noch nicht annähernd so aus, wie es hier aussieht.

Schritt 12

Dafür schreiben wir jetzt den entsprechenden CSS-Code, wechseln also in die style.css Datei und beginnen mit dem header.

header { }

Schritt 13

Hier setzen wir die Weite auf automatisch, width:auto. Dabei handelt es sich auch um die Standardeinstellung von div-Tags, das heißt, dieser Wert muss nicht unbedingt reingeschrieben werden. Ich schreibe ihn an der Stelle allerdings aus, damit du weißt, um was für einen Weitenwert es sich handelt. Danach folgt die Höhe von 150 Pixel.

header{ width:auto; height:150px; }

Schritt 14

Dann wird der Background eingefügt, url

images beziehungsweise img, hier unsere header-Grafik.

schreibtisch > webdesign-podcast.de > url > img > header.jpg

Schritt 15

Wir setzen die auf no-repeat, damit sie sich nicht wiederholt beziehungsweise gekachelt wird. Zusätzlich positionieren wir sie mit center top und für den Fall, dass wir dann doch größere Monitore haben sollten, läuft das Ganze in einer normalen Farbe weiter aus, natürlich ist das auch ein Orangeton, der sieht so aus: #fe6301. Danach setzen wir noch ein clear both, um das floaten, was wir später im header haben werden, zu löschen.

header{ width:auto; height:150px; background:url(img/header.jpg) no-repeat center top #fe6301; clear:both; }

Schritt 16

Jetzt sieht das Ganze schon etwas eher so aus wie die eigentliche Seite.

Schritt 17

Wir machen an der Stelle dann weiter mit dem branding.

Hier tragen wir die genauen Werte der Grafik ein. Das sind 324 Pixel in der Weite und 125 Pixel in der Höhe. Danach setzen wir den margin von dem h1 auf 0 und ebenso das padding.

Hier brauchen wir allerdings im oberen Bereich 20 Pixel Abstand, damit das Logo nicht direkt oben an der Kante klebt. Also haben wir padding, der erste Wert oben, dann kommt rechts, unten und links, die setzen wir alle auf 0.

Damit das Logo immer an der linken Seite sitzt, folgt ein float left.

header #branding { width:324px; height:125px; margin:0; padding: 20px 0 0 0; float:left; }

Schritt 18

Danach müssen wir den eigentlichen Link anpassen. Der bekommt auch die selben Weitenwerte wie unser branding, deshalb können wir das Ganze mit einem Komma aufführen.

header #branding,
header #branding a{ width:324px; height:125px; margin:0; padding: 20px 0 0 0; float:left; }

Schritt 19

Damit wir das padding nicht doppelt haben, setzen wir das an dieser Stelle dann auf 0, und ein float benötigen wir auch nicht.

Schritt 20

Danach folgt die eigentliche Grafik webdesign-podcast-logo.png; …

… auch die soll nicht gekachelt werden, wir setzen sie auf no-repeat. Damit die weiten Angaben überhaupt greifen, brauchen wir display block.

Standardmäßig ist ein Link ein inline-Element und würde deshalb nicht auf width- und height-Angaben reagieren.

header #branding a { padding:0; float:none; background:url(img/webdesign-podcast-logo.png) no-repeat; display:block; }

Schritt 21

Um jetzt noch den Text von dem Logo runterzuschieben, benötigen wir text indent. Bevor ich das mache, möchte ich aber kurz zeigen, was damit überhaupt gemeint ist.

Und zwar sehen wir jetzt hier aktuell das Logo, darüber liegt aber noch der Text Webdesign-Podcast.de, …

… den wir ja hier in den Link eingetragen haben.

Schritt 22

Der ist in diesem Fall allerdings nur für Suchmaschinen und Screenreader relevant. Entsprechend wird es hier über text-indent, das ist entsprechender Zeileneinzug, rausgeschoben. Hier verwenden wir jetzt -9999em und speichern das Ganze.

header #branding a { padding:0; float:none; background:url(img/webdesign-podcast-logo.png) no-repeat; display:block; text-indent:-9999em; }

Schritt 23

Wir gehen in die Entwurfsansicht: Hier passt es aktuell noch nicht ganz.

Wir rufen die Datei einmal in einem richtigen Browser auf und hier haut es perfekt hin.

Das Problem ist, dass die Darstellung vom Dreamweaver nicht unbedingt immer der eines echten Browsers entspricht, deswegen macht es Sinn, hier immer noch mal mit einem richtigen Browser zu kontrollieren.

Schritt 24

Als Nächstes folgt dann die eigentliche Navigation, header #topNavigation. Auch hier setzen wir die Weite auf auto, also auf eine automatische Weiten-Vergabe. Auch das würde hier in diesem Fall ganz von alleine geschehen.

header #topNavigation { width:auto; }

Schritt 25

Danach benötigen wir ein entsprechendes padding, also einen Abstand, und zwar haben wir hier folgende Werte: 7 Pixel nach oben, 10 Pixel nach rechts, 10 Pixel nach unten und 10 Pixel nach links. Da dieser Bereich immer rechts sitzt, floaten wir auch entsprechend nach rechts, also float right.

header #topNavigation { width:auto; padding:7px 10px 10px 10px; float:right; }

Schritt 26

Danach kommt der Hintergrund, background. Das lösen wir hier mit Rgba, da es sich um einen transparenten Bereich handelt. Du siehst hier bei dem Weiß, dass hier noch der Hintergrund, die orangene Grafik, durchschimmert.

Schritt 27

Also haben wir hier Rgba, dann Weiß, dass sind 255, 255 und noch mal 255, dann folgt hier als vierter Wert die entsprechende Alpha-Transparenz, und zwar sind das 80%, und in diesem Fall wird das mit 0.8 angegeben. Wir könnten aber auch einfach nur .8 schreiben und die 0 weglassen, das kommt auf dasselbe heraus. Der Einfachheit halber lassen wir es hier bei der voranstehenden 0.

header #topNavigation { width:auto; padding:7px 10px 10px 10px; float:right; background:rgba(255, 255, 255, 0.8); }

Schritt 28

Danach benötigen wir einen entsprechenden Border-Radius für die abgerundeten Kanten hier unten.

Schritt 29

Wir machen das ganz über border-radius und vergeben hier 0 Pixel, 0 Pixel, dann für die unteren Kanten 5 Pixel und 5 Pixel.

header #topNavigation { width:auto; padding:7px 10px 10px 10px; float:right; background:rgba(255, 255, 255, 0.8); border-radius: 0px 0px 5px 5px; }

Schritt 30

Wir speichern das Ganze einmal zwischen, wechseln in den Browser und schauen es uns an.

Schritt 31

Passt soweit vom Stil her schon mal ganz gut, außer dass die Links noch weiter angepasst werden müssen, und das machen wir jetzt.

Als Erstes kommt der li, also das eigentliche Listenelement. Das setzen wir auf display:inline, damit die Menüpunkte beziehungsweise Elemente hier nebeneinandersitzen und nicht untereinander.

header #topNavigation li { display: inline; }

Schritt 32

Danach setzen wir noch einen entsprechenden Abstand. Von oben und unten brauchen wir keinen, deswegen 0 beziehungsweise 0 Pixel oder 0, kommt beides auf dasselbe hinaus. Px kann man sich sparen, das haben wir im vorherigen Beispiel padding: 20px 0 0 0; auch schon gemacht. Danach 5 Pixel, und mit diesen zwei Werten padding: 0 5px haben wir jetzt hier eine etwas andere Form als mit den vier Werten.

Mit den vier Werten ist die Aufstellung oben, rechts, unten, links und bei den zwei Werten haben wir oben unten, links rechts.

Schritt 33

Das Ganze speichern, nächste Zeile, header #topNavigation li und dann der Link.

header #topNavigation li a { }

Schritt 34

Dann die Farbangabe #807f7f.

header #topNavigation li a { color:#807f7f; }

Schritt 35

Dann den hover, wenn wir mit der Maus darübergehen #333.

header #topNavigation li a:hover { color:#333; }

Schritt 36

Und dann sieht das schon mal so aus. Hier haben wir noch die entsprechenden underline drunter, die es standardmäßig bei Links gibt.

Schritt 37

Die können wir auch rausnehmen. Dafür haben wir hier im HTML5 Bolerplate in den Zeilen 15-19 Standardangaben für Links.

Schritt 38

Und da können wir jetzt generell für alle a-Tags die text-decoration auf none setzen …

… und haben dann keine Unterstriche mehr unter den Links. Dann sieht das so aus:

Schritt 39

Etwas gibt es immer noch zu bemängeln,und zwar sitzen sowohl das Logo als auch die kleine Navigation hier oben zu nah am Rand.

Schritt 40

Wir haben im HTML-Code noch ein div-Tag um das Ganze herumgelegt mit der Klasse wrapper und genau diese werden wir jetzt anlegen.

<div class=”wrapper clearfix“>

Schritt 41

Der wrapper umschließt im Prinzip diese Elemente und sorgt jetzt dafür, dass sie richtig positioniert werden, und zwar mit der richtigen Weite und in der Mitte des Dokuments.

Wir haben für die Desktop-Version 998 Pixel und mit dem margin auto wird das Ganze automatisch mittig positioniert.

.wrapper{ width:998px; margin:auto; }

Schritt 42

Die beiden Angaben reichen schon, um das Ganze weiter einzurücken und mittig zu positionieren.

Jetzt kommt es dem originalen schon relativ nah.

Schritt 43

Das Einzige, was aktuell noch nicht passt, sind die Schriftgrößen, und um die werden wir uns jetzt kümmern. Dazu können wir hier oben den body anlegen. Wir beginnen dann mit font, geben als Erstes die Schriftgröße an, und zwar über em. Das sind 0.83em.

body { font: 0.83em; }

Die em sind hier ein ganz wichtiger Faktor bei dem responsive Webdesign, denn bei em handelt es sich um eine relative Angabe, das heißt, 0.83em sind auf einem System zum Beispiel etwas größer als beim anderen und passen sich damit immer automatisch der Displaygröße beziehungsweise dem System selber an.

Schritt 44

Als Nächstes geben wir die Schriftfamilie an. Hier haben wir als Hauptschrift die Tahoma, danach folgt die Alternativschrift, und falls diese auch nicht verfügbar ist, der Schriftentyp.

body { font: 0.83em Tahoma, Geneva, sans-serif; }

Schritt 45

Dann geben wir für die späteren Schriftelemente die Farbe an, das heißt, wir legen für generellen Text, der so noch nicht zugeordnet ist, hier eine Hauptfarbe fest #454545, das ist ein Grauton.

body { font: 0.83em Tahoma, Geneva, sans-serif; color:#454545; }

Schritt 46

Und da wir uns hier bereits im Body befinden, können wir direkt noch die Hintergrundgrafik mit einbauen. Background > ,URL, dann den images-Ordner und dann die background.png.

body { background:url(img/background.png) #e3e3e3; font: 0.83em Tahoma, Geneva, sans-serif; color:#454545; }

Schritt 47

Diese wird mittig gesetzt, also zentriert, über die Angabe center, und soll sich auf der y-Achse wiederholen, also repeat-y.

body { background:url(img/background.png) center repeat-y #e3e3e3; font: 0.83em Tahoma, Geneva, sans-serif; color:#454545; }

Schritt 48

Dann speichern wir das Ganze, laden die Seite einmal neu und sehen jetzt den Hintergrundverlauf. Auf der rechten Seite sehen wir das Dunkelgrau, in der Mitte das etwas hellere und auf der linken Seite wieder das dunkle. Der Verlauf ist also gut zu erkennen.

… und auch hier oben im Bereich der Top-Navigation sehen wir direkt, dass die Schriftart jetzt auf Tahoma umgestellt ist.

Schritt 49

Als Nächstes folgt die Haupt-Navigation, dazu wechseln wir in den eigentlichen Quellcode und öffnen unter dem Header-Element einen weiteren nav-Tag.

Der nav-Tag bekommt die ID mainNavigation.

<nav id=”mainNavigation”></div>

Schritt 50

Die mainNavigation enthält wie die Top-Navigation eine Liste mit den entsprechenden Navigationspunkten.

Dann fangen wir an mit Blog, Podcast, News und Kontakt.

<nav id=”mainNavigation”>

    <ul class=”wrapper”>

      <li><a href=”#”>Blog</a></li>

      <li><a href=”#”>Podcast</a></li>

      <li><a href=”#”>News</a></li>

      <li><a href=”#”>Kontakt</a></li>

    </ul>

</nav>

Schritt 51

Das reicht fürs Erste, um das Ganze in der Rohfassung zu programmieren. Wir können die Seite neu laden, CSS-Angaben fehlen aktuell natürlich noch, entsprechend sitzt das Ganze in der Ecke.

Schritt 52

Dann legen wir als Erstes bei ID mainNavigation die Hintergrundfarbe fest und hier haben wir Dunkelgrau, das ist der Hexadezimal Farbcode #333. Die Weite wie bei den anderen Elementen passt sich automatisch an.

#mainNavigation { background:#333; width:auto; }

Schritt 53

Das hatte ich ja bereits erwähnt: Die automatische Weite bei einem div-Container beziehungsweise auch beim nav-Container, die ist automatisch gegeben. Das ist hier nur noch mal geschrieben, damit du genau weißt, wie das Element sich hier verhält. In dem Fall können wir es aber weglassen, denn es macht keinen Unterschied. Wir lassen es jetzt erst mal stehen, ich lösche es gleich und es ist direkt zu sehen.

Danach folgen die padding-Angaben, die Angaben des Innenabstandes. Hier haben wir nach oben 8 Pixel, nach rechts 0, nach unten 10 Pixel und nach links ebenfalls 0.

#mainNavigation { background:#333; width:auto; padding:8px 0 10px 0; }

Schritt 54

Danach gehen wir über text-transform:uppercase, damit legen wir fest, dass sämtlicher Text, der in diesem nav-Tag mit der ID #mainNavigation enthalten ist, in Versalbuchstaben umgewandelt wird, also in Großbuchstaben.

#mainNavigation { background:#333; width:auto; padding:8px 0 10px 0; text-transform:uppercase; }

Schritt 55

Wir können das Ganze noch einmal neu laden. Hier haben wir den Hintergrund und hier ist es ganz deutlich zu erkennen, dass wir jetzt hier nur Versalien haben.

Schritt 56

Danach folgt ein Abstand nach unten; hier haben wir einen margin-bottom von 34 Pixeln. Zu guter Letzt legen wir die Schriftgröße von 1.05em fest.

#mainNavigation { background:#333; width:auto; padding:8px 0 10px 0; text-transform:uppercase; margin-bottom:34px; font-size:1.05em; }

Schritt 57

Damit haben wir den Container soweit fertig, müssen ihn an der Stelle jetzt noch ausrichten. Die Ausrichtung ist genau dieselbe wie beim wrapper auch, und das können wir hier mit #mainNavigation ul lösen. Wir können #mainNavigation ul anlegen, können ebenfalls width 998 Pixel und das Ganze auf margin auto setzen, dann haben wir prinzipiell die Angaben vom wrapper wiederholt.

#mainNavigation ul { width:998px; margin:auto; }

Schritt 58

Oder wir kopieren uns diesen Bereich #mainNavigation ul, löschen es unten wieder, und dann kann es einfach mit einem Komma hier angefügt werden, da es ja dieselben Angaben sind.

.wrapper, #mainNavigation ul { width:998px; margin:auto; }

Schritt 59

Als Nächstes widmen wir uns dem li, genauso wie bei der Top-Navigation gehen wir hier über display:inline. Padding oben und unten 0 und links und rechts 15 Pixel, das regeln wir hier über die zwei Angaben.

#mainNavigation li { display:inline; padding:0 15px; }

Denn mit vier Angaben im padding, bei den vier Attributen haben wir oben, rechts, unten und links, und wenn wir hier entsprechend nur zwei aufführen, dann gilt der erste Wert für oben und unten und der zweite für links und rechts.

Schritt 60

Danach folgt der eigentliche Link. Hier haben wir als Textfarbe ein helles Grau #999.

#mainNavigation li a { color:#999; }

Schritt 61

Wir legen jetzt noch den hover fest und hier haben wir dann einen Vollton; Weiß #fff.

#mainNavigation li a:hover{ color:#fff; }

Schritt 62

Wir laden das Ganze einmal neu und sehen, dass es so schon ganz gut passt.

Schritt 63

Was jetzt hier allerdings noch nicht ganz stimmig ist, ist: Hier auf der optischen Linie des Layouts macht die Navigation einen kleinen Sprung, das heißt, der erste Navigationspunkt müsste eigentlich auch genau auf der Linie sitzen.

Hier haben wir aber ein 15 Pixel padding nach links und rechts.

Schritt 64

Da gehen wir jetzt über die Pseudoklasse first-child und setzen dann hier das padding-left auf 0.

#mainNavigation li:first-child { padding-left:0; }

Schritt 65

Mit first-child selektieren wir das erste li-Element in dem ul und jetzt haben wir das Ganze genau auf einer Kante sitzen.

Damit haben wir dann auch schon die Hauptnavigation fertig gestaltet.

Schritt 66

Als Nächstes folgt die Box mit der Slideshow und dem kleinen Einleitungstext.

Schritt 67

Dazu wechseln wir in den Quellcode und legen jetzt unter dem nav-Tag einen div-Container an und geben dem die Klasse wrapper.

<div class=”wrapper”>

</div>

In dieser wrapper-Klasse wird sich jetzt das Meiste des Seiteninhalts abspielen.

Schritt 68

Denn der wrapper, den wir bereits definiert haben, wird hier sämtliche Inhalte umschließen. Denn der Haupt-Content und auch hier die Seitenleiste beziehungsweise Sidebar liegen alle in diesem 998 Pixel breiten Raster.

Schritt 69

Erst hier unten beim Footer werden wir das Ganze noch mal brechen und gehen hier auf eine Weite von 100% und ziehen alles dann mit einer weiteren Liste auf beziehungsweise hier unten noch mit dem letzten Hinweis im Footer.

Schritt 70

Hier legen wir einen weiteren div-Tag an und geben dem die ID topbox. Des Weiteren bekommt er die Klasse clearfix, denn wir werden hier in dem Bereich auch noch einige Elemente beziehungsweise zwei Elemente, links die Slideshow und rechts den Text, nebeneinanderherfloaten und der clearfix beendet dieses entsprechende Floaten und gibt danach den Bereich fei, damit die Seiten beziehungsweise Elemente nicht weiter danach umbrechen.

<div id=”topbox” class=”clearfix”></div>

Schritt 71

Als Erstes haben wir den Bereich für die linke Seite; hier legen wir einen div an mit der Klasse left und danach einen weiteren div mit der Klasse right.

<div class=”left”> </div>

<div class=”right”> </div>

Schritt 72

Hier fügen wir unser Beispielbild ein. Dies können wir einfach per Drag&Drop aus dem Datei-Manager in Dreamweaver in unseren Code hereinziehen.

Schritt 73

<div class=”left”>

   <img src=”img/bild-1.jpg” width=”600″ height=”280″ alt=”Bild”>

</div>

Schritt 74

In dem Bereich right werden wir entsprechend den Text eingeben; um das Ganze zu verkürzen, habe ich den Text bereits in der Zwischenablage und muss ihn hier nur noch einfügen.

<div class=”right”>

    <h2>Herzlich Willkommen</h2>

    <p>Mein Name ist <a href=”#”>Pascal Bajorat</a> und ich habe den Webdesign-Podcast vor über 2 Jahren gegründet. Gemeinsam mit dem Rest des Teams freue ich mich, dass du unseren Fachblog in den Weiten des Internets gefunden hast.</p>

    <p>Wir bieten dir hier viele interessante Artikel und Tutorials zu aktuellen Themen, wie z.B. HTML5, CSS3, WordPress, jQuery, Photoshop,  PHP, MySQL, Social Media uvm.</p>

    <p>Neben den vielen Tutorials gibt es ebenfalls einen praxisbezogenen Video-Podcast, der über iTunes oder via RSS-Feed abonniert werden kann.</p>

</div>

Schritt 75

Hier haben wir in dem h2-Tag, also der Überschrift, das Herzlich willkommen, und darunter in Paragraph-Tags, also den p-Tags, den eigentlichen Text. Das Ganze wird jetzt so einmal gespeichert und wir können das Ganze im Browser neu laden.

Schritt 76

Das muss jetzt natürlich noch angepasst werden, dazu wechseln wir wieder in die style.css und legen hier den Bereich topbox an. Als Erstes definieren wir die Hintergrundfarbe, das ist in dem Fall Weiß #fff.

#topbox { background:#fff; }

Schritt 77

Dann haben wir zwischen dem Rand der Box und dem eigentlichen Inhalt einen Abstand, einen Innenabstand, also hier wieder mit padding arbeiten, und zwar sind das hier in dem Bereich 20 Pixel.

#topbox { background:#fff; padding:20px; }

Schritt 78

Jetzt müssen die beiden Bereiche nur noch nebeneinanderhergefloatet werden.

Schritt 79

Dafür legen wir jetzt die entsprechend definierten Klassen an. Wir beginnen mit left, legen die Weite fest, das sind 600 Pixel, die können wir einfach dem Bild entnehmen, setzen das Ganze auf float left und danach kommt topbox right; diese hat eine Weite von 338 Pixel und wird auf float right gesetzt.

#topbox .left { width:600px; float:left; }

#topbox .right { width: 338px; float:right; }

Schritt 80

Das Ganze speichern, die Seite einmal neu laden und jetzt haben wir unser Bild auf der linken Seite und den Text auf der rechten Seite.

Dadurch, dass ich bei der rechten Box nicht den gesamten Raum fülle, das heißt, mit den 338 ja noch nicht die volle Breite von 998 ausgenutzt habe, entsteht der Abstand zwischen den beiden Boxen.

Schritt 81

Als Nächstes kümmern wir uns um den Text, topbox h2 für die Überschrift. Hier verwenden wir als Schriftgröße 2.55em und als font kommt die Schrift ‘Lato’ zum Einsatz. Font-weight sind 300 und dann die Schriftfarbe das helle Grau, was zu sehen war: #a3a3a3. Nur noch den Abstand nach unten, oben 0, rechts 0, unten 10 px und links 0.

#topbox h2 { font:2.55em ‘Lato’, sans-serif; font-weight:300; color:#a3a3a3; margin:0 0 10px 0; }

Schritt 82

Hier müssen wir in diesem Fall alle angeben oder zumindest oben und unten auf 0 setzen, denn standardmäßig können wir das hier mit dem Inspector sehen, gibt es hier ein margin, also einen Abstand nach oben und unten. Da wir aber hier in dem Fall nur den Abstand nach unten brauchen, müssen wir zumindest den von oben zurücksetzen.

Schritt 83

Als Nächstes definieren wir die line-height, die setzen wir auf 80%.

#topbox h2 { font:2.55em ‘Lato’, sans-serif; font-weight:300; color:#a3a3a3; margin:0 0 10px 0; line-height:80%; }

Was es damit auf sich hat, erkläre ich gleich.

Schritt 84

Jetzt können wir uns das Ganze so schon mal angucken, das passt so schon mal ganz gut:

Und wenn wir mal hin- und herschalten, dann wird klar, es handelt sich hier nicht um dieselbe Schrift.

Schritt 85

Das liegt daran, dass die ‘Lato’, die wir hier angegeben haben, keine Standardschrift ist. Die ‘Lato’ wird auf der fertigen Seite über die Google Web Fonts über die CSS3-Funktion @font-face eingebunden. Dadurch, dass wir die hier noch nicht mit drinhaben, springt das Ganze zurück zu einer Alternativschrift.

Dasselbe gilt auch für die beiden Navigationen, hier ist eigentlich auch die ‘Lato’ im Einsatz.

Schritt 86

Wie das Ganze funktioniert und wie man hier die entsprechenden Schriften auf das System, die Google Web Fonts, mit einbindet, erkläre ich allerdings später, denn wir haben noch weitere Elemente, zum Beispiel die Hauptüberschriften der Artikel, die ebenfalls in dieser Schrift gesetzt sind, und damit wir das nachher in einem Schritt abarbeiten können, werde ich dir später zeigen, wie das eingebunden wird.

Wir behalten es aber soweit im Hinterkopf.

Was wir hier jetzt direkt noch anpassen müssen, ist die Zeilenhöhe des eigentlichen Textbereiches, denn hier klebt alles aktuell noch sehr nah aneinander. Im direkten Vergleich sieht man das ganz gut.

Schritt 87

Die Zeilenhöhe können wir direkt für sämtliche Schifften angeben, das heißt, wir werden sie jetzt nicht direkt bei topbox mit angeben, sondern wir wandern wieder etwas höher zu unserem body und setzen hier line-height auf 1.4.

body { background:url(img/background.png) center repeat-y #e3e3e3; font: 0.83em Tahoma, Geneva, sans-serif; color:#454545; line-height:1.4; }

Schritt 88

Wir laden die Seite neu und dann haut das so schon eher hin.

Schritt 89

Nun müssen wir allerdings bei dem letzten p noch den Abstand nach unten entfernen, dazu gehen wir wieder über die topbox und dann das Element p. Hier verwenden wir jetzt die Pseudoklasse last-child, das heißt, damit wird das letze p-Element selektiert. Hier setzen wir margin-bottom auf 0.

#topbox p:last-child { margin-bottom:0; }

Schritt 90

Der allgemeine p-Tag ist so natürlich auch noch nicht definiert, das werden wir aber direkt im Zusammenhang mit dem eigentlichen Content, also mit den Artikeln, machen.

Schritt 91

Als Nächstes benötigen wir noch den Schatten unter der Box.

Schritt 92

Dazu gehen wir zurück in den Quellcode der index.html und legen unter topbox einen div an und geben dem die Klasse shadow.

<div class=”shadow”></div>

Schritt 93

Das Ganze speichern wir, gehen zurück in die style.css-Datei und definieren jetzt eine Klasse shadow. Diese Klasse shadow ist für alle Elemente, die diesen entsprechenden Schatten haben, die gleiche.

Den haben wir hier oben mit drin, hier bei den Teaserboxen …

… und unter den Artikeln.

Schritt 94

Hier gehen wir jetzt über background > url und verwenden die Grafik shadow-left.png.

Schritt 95

Wir wollen die nicht wiederholen beziehungsweise kacheln, also no-repeat, und sie soll links ausgerichtet werden.

.shadow { background: url(img/shadow-left.png) no-repeat left }

Schritt 96

Danach folgt der rechte Bereich des Schattens, hier können wir ganz einfach mit einem Komma trennen url > shadow-right.png. Auch dieser Bereich soll sich nicht wiederholen, no-repeat, und sitzt jetzt an der rechten Seite.

.shadow { background: url(img/shadow-left.png) no-repeat left, url(img/shadow-right.png) no-repeat right; }

Schritt 97

Als Weite haben wir 100%, damit sich der Schatten immer den entsprechenden Boxen anpasst. Zum Schluss noch die Höhe, hier haben wir 14 Pixel.

.shadow { background: url(img/shadow-left.png) no-repeat left, url(img/shadow-right.png) no-repeat right; width:100%; height:14px; }

Schritt 98

Wir kehren zurück in das Dokument und haben den Schatten angelegt.

Funktioniert soweit relativ einfach.

Schritt 99

Als Nächstes folgen die drei Teaser-Boxen.

Schritt 100

Dazu kehren wir wieder in den Quellcode zurück und legen hier unter dem Bereich div class shadow einen weiteren div-Container an. Dieser div-Container erhält die ID teaserBoxen und zum Beenden des Floaten’s auch hier wieder class clearfix.

<div id=”teaserBoxen” class=„clearfix”></div>

Schritt 101

Dann kommt die erste Box, sie erhält auch die entsprechende Klasse.

<div class=box“></div>

Schritt 102

Jetzt das Bild, das können wir wieder per Drag&Drop einfach reinziehen, das ist dann html5-dvd.jpg.

<a href=”#”><img src=”img/html5-dvd.jpg” width=”315″ height=”155″ alt=”HTML5 DVD”></a>

Schritt 103

Danach folgt auch unter diesen Boxen wieder der Schatten.

<div class=”shadow”></div>

Schritt 104

Das Ganze brauchen wir jetzt drei mal. Das können wir einfach so kopieren:

<div id=”teaserBoxen” class=”clearfix”>

    <div class=”box”>

      <a href=”#”><img src=”img/html5-dvd.jpg” width=”315″ height=”155″ alt=”HTML5 DVD”></a>

        <div class=”shadow”></div>

      </div>

      <div class=”box”>

      <a href=”#”><img src=”img/html5-dvd.jpg” width=”315″ height=”155″ alt=”HTML5 DVD”></a>

        <div class=”shadow”></div>

      </div>

      <div class=”box”>

      <a href=”#”><img src=”img/html5-dvd.jpg” width=”315″ height=”155″ alt=”HTML5 DVD”></a>

        <div class=”shadow”></div>

      </div>

</div>

Schritt 105

Einmal abspeichern, zurück in den Browser, neu laden und so sieht es aktuell aus.

Schritt 106

Wir müssen das Ganze jetzt natürlich noch anpassen, also ab in die CSS-Datei, teaserBoxen. Da haben wir als Erstes den Abstand nach unten zu den Elementen, die noch folgen.

#teaserBoxen { margin-bottom: 30px; }

Schritt 107

Danach folgt die Angabe für die einzelne Box, hier haben wir eine Weite von 319 Pixeln, und wir setzen das Ganze auf float left.

#teaserBoxen .box { width:319px; float:left; }

Schritt 108

Und danach stylen wir das Bild noch ein bisschen auf, und zwar bekommt das hier noch einen Rahmen. Border 2 Pixel, solid und die Rahmenfarbe ist Weiß: #fff.

#teaserBoxen .box img { border:2px solid #fff; }

Schritt 109

Das Ganze speichern wir und können es im Browser neu aufrufen und aktuell passt es so schon fast.

Das Einzige, was wir so noch sehen, ist: Wir haben einen relativ geringen Abstand von oben und zwischen den Boxen.

Schritt 110

Das lösen wir jetzt bei den Boxen über eine extra Klasse. Der Schatten mit dem Abstand nach unten für die Topbox, den gibt es nur einmal, deswegen fügen wir jetzt noch ID shadowTopbox.

<div class=”shadow” id=”shadowTopbox”></div>

Schritt 111

Wir legen dann in der CSS-Datei einfach das #margin-bottom an und vergeben hier 30 Pixel.

#shadowTopbox { margin-bottom:30px; }

Schritt 112

Wir laden ein mal neu und damit wäre der Abstand schon gegessen.

Schritt 113

Jetzt folgt noch der zwischen den Boxen. Hier machen wir das Ganze so, dass wir der mittleren Box noch eine weitere Klasse geben, und zwar middle.

<div class=”box middle”>
<a href=”#”><img src=”img/html5-dvd.jpg” width=”315″ height=”155″ alt=”HTML5 DVD”></a>
<div class=”shadow”></div>
</div>

Schritt 114

Diese legen wir dann in der CSS-Datei an und auch hier arbeiten wir mit einem Außenabstand, also einem margin von 20 Pixel nach links und rechts.

#teaserBoxen .middle { margin:0 20px; }

Schritt 115

Damit haben wir auch hier den entsprechenden Abstand soweit fertig beziehungsweise dann mit diesem letzten Schritt auch gleich die kompletten Teaser-Boxen.

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