Responsive Webdesign – Praxis-Projekt – Teil 3: Content-Bereich und Footer

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 Aufbau des Content-Bereiches mit den einzelnen Artikeln sowie der Footer mit seinen Listen erklärt.

Wir empfehlen:

Schritt 1

Als Nächstes folgt jetzt der eigentliche Content-Bereich.

Schritt 2

Wir wechseln wieder in den Quellcode, bleiben weiterhin im wrapper und legen hier einen neuen div an. Dieser div bekommt jetzt die ID maincontent. Wir fügen hier die role-Angabe main hinzu und schließen diesen div.

Schritt 3

Direkt danach folgt ein weiterer. Hier vergeben wir die ID sidebar und schließen diesen div wieder.

Schritt 4

Als Nächstes legen wir in der ID maincontent ein article an. Das heißt: hier der entsprechende article-Tag.

<article> </article>

Schritt 5

Wir können jetzt einfach von einem aktuellen Artikel die entsprechenden Informationen übernehmen.

Schritt 6

Damit wir es hier noch ein bisschen übersichtlicher haben, …

… lösche ich die Links raus und reduziere das auf einen.

<h3 class=”categoryHeadline”><a href=”#” rel=”category tag”>Software</a></h3>

Schritt 7

In dem h3 haben wir also die Angabe der Kategorie. Danach folgt in dem h2 die eigentliche Überschrift.

<h2>Google hat es geschafft: Chrome überholt Microsofts Internet Explorer – wirklich?!</h2>

Schritt 8

Dann kommt unser Content-Bild, da kann ich das lokale nehmen, das article.img, das wir bereits in dem Ordner haben.

Schritt 9

Und dann folgt der eigentliche Content.

<p>Die massive Werbung, die Google für seinen Browser Chrome die letzten Jahre gefahren hat, trägt jetzt Früchte. Natürlich hat sich Chrome schon die letzten Jahre steigender Beliebtheit erfreut, doch jetzt erzielt Google einen großen Durchbruch mit dem hauseigenen Browser, denn dieser überholte in den weltweiten Statistiken des Auswertungs- und Tracking Tools StatCounter vergangene Woche (14.05 – 20.05.2012) den Internet Explorer und stößt diesen damit vom Thron.</p>

<p>Google Chrome liegt nach den Zahlen von StatCounter bei einer Verbreitung von 32.76%, der Internet Explorer bei 31.94%, Firefox bei 25.47% und Safari bei 7.08%:</p>

Schritt 10

Den Content klappe ich jetzt in dem Fall zusammen, …

… dann haben wir das Ganze hier auch wieder etwas übersichtlicher.

Schritt 11

Dann können wir das so speichern und im Browser neu laden.

Aktuell sieht es so, genauso wie alle Elemente, wenn ich sie das erste Mal zeige, natürlich noch durcheinander aus.

Schritt 12

Wir wechseln also zurück in die style.css und legen als Erstes die ID maincontent fest. Maincontent bekommt jetzt eine Weite von 100% und eine maximale Weite von 658 Pixeln. Das Ganze setzen wir auf float left.

#maincontent { width:100%; max-width:658px; float:left; }

Schritt 13

Dann kommt die sidebar. Diese bekommt eine Weite von 315 Pixeln und wird auf float right gesetzt.

#sidebar { width: 315px; float:right; }

Schritt 14

Das Ganze speichern, zurück in den Browser, neu laden und jetzt passt es von der Weite so schon mal, wie es sein soll.

Schritt 15

Als Nächstes kommt maincontent und dann article. Background haben wir hier weiß #fff, padding genauso wie bei der Topbox auch 20 Pixel.

#maincontent article { background:#fff; padding:20px; }

Schritt 16

Damit steht der Grundaufbau.

Schritt 17

Als Nächstes können wir auch direkt den Schatten mit daruntersetzen.

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

Schritt 18

Wir fügen jetzt noch einen kleinen Extra-Abschnitt für die Schatten ein, die sich im maincontent befinden, und zwar maincontent .shadow und geben dem einen margin-bottom von 30 Pixeln.

#maincontent .shadow { margin-bottom:30px; }

Schritt 19

Hier haben wir den Schatten und da ist auch so ein entsprechender Abstand.

Schritt 20

Dann geht es weiter mit der Artikel-Überschrift, mit article h3. Auch hier haben wir vorhin schon erwähnt die ’Lato’ später im Einsatz, deswegen wird das Ganze jetzt erst mal so vorgestylt. Font-size auf 1.2em, font-weight auf bold und dann die entsprechende Farbe #949494.

#maincontent article h3 { font-size:1.2em; font-weight:bold; color:#949494; }

Schritt 21

Da wir das Ganze natürlich noch mit einem Link haben, bringt die Farbe nur hier im h3 so nicht viel, also das Ganze noch mal wiederholen und dann die Farbe noch direkt für den a-Tag deklarieren.

#maincontent article h3 a { color:#949494; }

Schritt 22

Wenn wir jetzt gucken, passt das Ganze schon wesentlich besser.

Schritt 23

Als Nächstes müssen wir das margin anpassen, 0. Das Ganze so speichern.

#maincontent article h3 { font-size:1.2em; font-weight:bold; color:#949494; margin:0; }

Schritt 24

Danach kommt der Bereich h2. Auch hier beginnen wir mit der font-size von 2em, danach folgt die Farbe, hier haben wir einen dunkelgrauen Ton. Denselben, den wir auch bei der Navigation haben: #333, und danach der Abstand nach unten 10 Pixel. Auch hier werden wir später die ’Lato’ als Schrift einsetzen.

#maincontent article h2 { font-size:2em; color:#333; margin-bottom:10px; }

Schritt 25

Wir können im Browser neu laden und haben immer noch den Abstand nach oben, …

… das heißt, ähnlich, wie wir das bei der h3 gesetzt haben, margin 0, müssen wir das Ganze bei h2 auch machen. Da haben wir wieder unsere 4 Werte.

#maincontent article h2 { font-size:2em; color:#333; margin:0 0 10px 0; }

Schritt 26

Hier haben wir den entsprechenden Abstand wieder weggenommen. Noch passt es so mit der Schriftgröße aktuell überhaupt nicht, aber wie schon erwähnt: Das kommt noch über die ‘Lato’, wenn die über die Google Web Fonts eingebunden wird.

Schritt 27

Als Nächstes wird das Artikelbild eingebunden. Hierzu setzen wir um das Bild selber erst noch mal einen div-Container und geben diesem die Klasse articleImage.

<div class=”articleImage”><img src=”img/article_image.jpg” width=”616″ height=”126″ alt=”Artikelbild”></div>

Schritt 28

Diese legen wir jetzt an, geben hier einen padding von einem Pixel, alle 4 Seiten. Dem Border auch einen Pixel, solid und dann der entsprechende Farbwert von #a6a6a6.

#maincontent .articleImage { padding:1px; border:1px solid #a6a6a6; }

Schritt 29

Hier ein erster wichtiger Punkt für Responsive Webdesign: Damit sich das Artikelbild später automatisch anpasst, geben wir dem img eine Weite von 100%.

#maincontent .articleImage img{ width:100% }

Schritt 30

Damit haben wir auch den Hauptcontent-Bereich gestaltet.

Schritt 31

Als Nächstes kommt der Artikel-Footer, also der untere Bereich unter den Artikeln.

Schritt 32

Dazu wechseln wir in die Quellcode-Ansicht und gehen in den unteren Bereich des article-Tags, öffnen einen neuen div und geben diesem die Klasse articleFooter.

<div class=„articleFooter”></div>

Schritt 33

Innerhalb des articleFooter werden wir jetzt die entsprechenden Elemente anlegen. Diese werden von p-Tags, also Paragraphs, umschlossen und mit Klassen angesteuert. Als Erstes haben wir die Klasse date und dann am Anfang ein Icon. Das lösen wir über einen span, geben ihm die allgemeine Klasse icon und danach haben wir das entsprechende Datum, date.

<p class=”date”><span class=”icon”></span> <time></time></p>

Schritt 34

Hier können wir jetzt beispielsweise einfach den 18.05.2012 nehmen oder jedes andere beliebige Datum, das ist in diesem Moment vollkommen egal. Weiterhin geben wir dem html5 time-Tag noch ein Attribut mit Namen datetime und hier kommt das Ganze noch mal mit amerikanischer Formatierung rein.

<p class=”date”><span class=”icon”></span> <time datetime=„2012-05-18″>18.05.2012</time></p>

Schritt 35

Danach einen weiteren p-Tag, hier haben wir jetzt die Klasse categories. Dann wieder das Icon davorsetzen, Klasse icon und danach ein paar Kategorien. Hier nehmen wir jetzt einfach mal Software, href wieder mit Platzhalter als Raute (#) und News.

<p class=”categories”><span class=”icon”></span> <a href=”#”>Software</a>, <a href=„#”>News</a></p>

Schritt 36

Dann kommt der Bereich für den Autor, Klasse author. Hier wird das Ganze über einen Link gelöst, das kann dann später auf eine entsprechende Autorenseite verlinkt werden oder auf die Webseite des Autors. Hier geben wir noch ein weiteres Attribut mit rel für relation und setzen es hier ebenfalls auf author.

<p class=”author”><span class=”icon”></span> <a href=”#” rel=”author”>Pascal Bajorat</a></p>

Schritt 37

Dann speichern wir das Ganze, gehen auf die Seite, können neu laden und haben das jetzt erst mal in ungestylter Form nach unten ablaufend.

Schritt 38

Das Ganze wird jetzt gestylt und als Erstes möchte ich ganz kurz erklären, wie das mit den Icons läuft.

Schritt 39

Denn an der Stelle werden wir das Ganze über CSS-Sprites lösen, das heißt, wir haben sämtliche Icons in einer Datei. In unserem Bilder-Ordner liegt die entsprechende Datei mit den Icons. Diese Datei enthält sämtliche Icons der Webseite. Zum einen die des articleFooters, dann die Social-Media-Icons, das Itunes- und das RSS-Feed-Icon.

Schritt 40

Diese werden auf der Hauptseite später rechts in der Sidebar angezeigt.

Schritt 41

Wir wechseln in die CSS-Datei und legen jetzt die Klasse articleFooter an. Das Ganze lassen wir erst mal leer, das füllen wir später aus.

.articleFooter { }

Schritt 42

Jetzt widmen wir uns wie gesagt erst einmal den Icons, articleFooter .icon, und geben der Klasse ganz allgemein die Grundwerte.

.articleFooter .icon { }

Schritt 43

Um das Ganze besser verdeutlichen zu können, mache ich mir die Icons in Photoshop auf und zoome näher ran. Diese kleinen Icons haben alle eine Größe von 16×16 Pixeln. Ich kann das gerade mal ganz deutlich machen mit Hilfslinien und genauso sitzen sie auch in dem png mit drin.

Schritt 44

Das heißt, wir geben jetzt hier dem Icon eine Weite von 16 Pixeln und eine Höhe von 16 Pixeln. Danach setzen wir das Ganze auf display block, das ist dasselbe Spiel wie mit den Links auch. Normalerweise ist das span-Element ein inline-Element und würde so an der Stelle dann keine Höhen- und Weiten-Angaben übernehmen.

.articleFooter .icon { width:16px; height:16px; display:block; }

Schritt 45

Dann verwenden wir background>url>webdesign-podcast.de>img und wählen als image unsere Datei “icons.png”.

.articleFooter .icon { width:16px; height:16px; display:block; background:url(img/icons.png); }

Schritt 46

Das Ganze einmal abspeichern, wieder in den Browser wechseln, neu laden und dann sehen wir schon unsere Icons.

Schritt 47

Aktuell wird überall das Uhr-Icon angezeigt, da wir im ersten Bereich 16×16 Pixel nur die Uhr mit drin haben.

Schritt 48

Das Ganze werden wir jetzt über background-postion weiter positionieren. Das heißt, wir haben hier:

articleFooter und dann als nächstes Element categories, also kommt noch die Klasse categories dazwischen. Dann gehen wir über background-position und haben hier die Werte 0 Pixel und -16 Pixel.

.articleFooter .categories .icon { background-position: 0px -16px; }

Schritt 49

Dann erscheint hier das entsprechende Icon für die Kategorien.

Schritt 50

Was wir hier in dem Fall machen: Wir verschieben einfach die Position des Hintergrund-Bildes -16 Pixel, das heißt, der Ausschnitt, den wir im Endeffekt sehen, wandert, genauso, wie meine Auswahl hier in Photoshop genau an diese Stelle.

Da wir nur 16 in der Weite haben, fällt alles drum herum einfach weg. So sparen wir uns HTTP-Request und können die Bilder ganz einfach und schnell positionieren.

Schritt 51

Dasselbe Spielchen haben wir auch bei author und hier haben wir dann statt -16 -32, also im Prinzip den doppelten Wert.

.articleFooter .author .icon { background-position: 0px -32px; }

Schritt 52

Damit sind unsere Icons hier mit enthalten.

Schritt 53

Das Nächste, was wir jetzt machen müssen, ist, dass die eigentlichen Texte neben den Icons sitzen. Das können wir relativ einfach über floats lösen, und zwar geben wir der allgemeinen Icon-Klasse ein float left.

.articleFooter .icon { width:16px; height:16px; display:block; background:url(img/icons.png); float:left; }

Schritt 54

Damit sitzt das Ganze entsprechend an der rechten Seite daneben und …

… dann wenden wir uns dem eigentlichen Aufbau zu. Das heißt, hier dem grauen Hintergrund und dass es immer im unteren Bereich des Artikels sitzt.

Schritt 55

Dazu gehen wir in die schon angelegte articleFooter-Klasse, geben dem background die Farbe #f6f6f6 und setzen die Weite auf 100%. Danach kommen Innenabstände, padding oben und unten 10 Pixel, links und rechts 0 Pixel.

.articleFooter { background:#f6f6f6; width:100%; padding:10px 0; }

Schritt 56

Das Ganze speichern wir erst mal so. Jetzt passen wir noch die Schrift an, font-size 0.8em und die eigentliche Schriftfarbe color #565656, dann haben wir diesen Grauton.

.articleFooter { background:#f6f6f6; width:100%; padding:10px 0; font-size:0.8em; color:#565656; }

Schritt 57

Wir können das Ganze soweit abspeichern und neu laden. Jetzt sehen wir den grauen Hintergrund und die Schriftfarbe hat sich angepasst. Die Links, die müssen wir noch extra anpassen.

Schritt 58

Hier nehmen wir als Erstes den p-Tag, diesen setzen wir auf display inline-block. Über display inline-block haben wir an der Stelle die Möglichkeit, dass wir weiterhin ein Block-Element haben, das sich in der Weite allerdings nach seinen Kind-Elementen, also nach den Elementen, die darin enthalten sind, ausrichtet.

Wir geben diesem Element noch ein float left und ein padding oben und unten 0, da wir bereits diesen Abstand im articleFooter haben, und links und rechts 20 Pixel. Ein margin benötigen wir nicht, deswegen setzen wir margin auf 0.

.articleFooter p { display:inline-block; float:left; padding:0 20px; margin:0; }

Schritt 59

Jetzt ist das Ganze hier schon in eine bessere Stellung gerutscht. Wir sind so natürlich noch nicht ganz fertig.

Schritt 60

Als Nächstes machen wir die Links.

.articleFooter a { color:#565656; }

Schritt 61

Dann brauchen wir noch einen Abstand zwischen Icons und Text. Hier verwenden wir margin-right von 2 Pixel und dann ist das Ganze so prinzipiell schon fertig.

articleFooter .icon { width:16px; height:16px; display:block; background:url(img/icons.png); float:left; margin-right:2px; }.articleFooter { background:#f6f6f6; width:100%; padding:10px 0; font-size:0.8em; color:#565656; position:absolute; bottom:0px; left:0px; }

Schritt 62

Was jetzt noch fehlt, ist: Wir haben hier bei dem eigentlichen article-Tag ein padding von 20 Pixeln und wir sehen jetzt hier ganz genau: Es schließt natürlich mit diesem padding sowohl oben als auch unten ab. Entsprechend sitzt das Ganze noch nicht so wie in der Hauptvorlage und hier gibt es jetzt einen ganz einfachen Trick, wie wir dieses padding überwinden können.

Schritt 63

Wir könnten das Ganze aus dem Container rausziehen und daruntersetzen. Das wäre auch eine Möglichkeit. Jetzt in diesem Fall möchte ich dir eine andere Möglichkeit vorstellen, und zwar geben wir unserem article-Tag ein position relative und dem articleFooter ein position absolute. Wir setzen das Ganze auf bottom 0 Pixel und left ebenfalls 0 Pixel.

#maincontent article { background:#fff; padding:20px; padding-bottom:45px; position:relative; }

.articleFooter { background:#f6f6f6; width:100%; padding:10px 0; font-size:0.8em; color:#565656; position:absolute; bottom:0px; left:0px; }

Schritt 64

Wir laden neu und dann haben wir das Ganze so wie in der Vorlage auch.

Schritt 65

Jetzt haben wir noch den letzten Absatz des Texts. Der passt jetzt natürlich nicht mehr mit der absoluten Positionierung zusammen, weil wir jetzt das Problem haben, dass dieser in dem Fall übergangen wird.

Schritt 66

Wir wechseln wieder zurück in den Dreamweaver und müssen uns in dem Fall noch ein mal ganz speziell die Abstände angucken und können uns das hier beziehungsweise vorher einmal im Chrome Inspector ansehen. Wir haben das Ganze soweit noch nicht definiert, das heißt, hier haben wir noch die Standard-Abstände bei dem p-Tag nach oben und nach unten.

Schritt 67

Da hatte ich ja bereits am Anfang, als es um den Bereich hier oben ging, angekündigt, dass wir die in diesem Zusammenhang jetzt anlegen werden.

Schritt 68

Und genau das machen wir jetzt auch. Das können wir oben beim body machen, wo wir sowieso schon einfache Standardklassen haben, beziehungsweise einen einfachen Standard-Tag. Wir legen jetzt hier den p-Tag mit an und setzen das Ganze auf oben 0, rechts 0, unten 20 Pixel und links ebenfalls 0.

p { margin:0 0 20px 0; }

Schritt 69

Einmal speichern und die Seite neu laden. Das Ganze sitzt so natürlich immer noch relativ nah an der Kante.

Schritt 70

Um jetzt hier den entsprechenden Abstand zu gewinnen, gehen wir in den article-Bereich und werden jetzt ganz speziell für den padding-bottom das Ganze um 45 Pixel erhöhen.

#maincontent article { background:#fff; padding:20px; padding-bottom:45px; position:relative; }

So haut das Ganze schon relativ gut hin. Damit haben wir unseren articleFooter gelöst.

Schritt 71

Als Nächstes werden wir uns dann um die Sidebar kümmern; vorher gilt es allerdings noch einen kleinen Bug zu beheben, und zwar haben wir durch das Umstellen der margins bei dem p-Tag unter anderem direkt unter dem Bild das Ganze relativ nah gerückt.

Schritt 72

Das heißt, wir setzen jetzt unter articleImage einen margin-bottom von ebenfalls 20 Pixel.

#maincontent .articleImage { padding:1px; border:1px solid #a6a6a6; margin-bottom:20px; }

Damit haben wir diesen Bereich soweit erledigt.

Schritt 73

Wir wechseln wieder in den Quellcode der HTML-Datei und können uns den article-Bereich zwei oder drei Mal duplizieren, …

… um hier die entsprechenden und richtigen Inhalte zu simulieren.

Schritt 74

Wir widmen uns nun der Sidebar. Hier haben wir als Erstes den Bereich mit den Social Networks.

Schritt 75

Wir legen uns jetzt hier einen entsprechenden aside-Tag an, geben dem die Klasse socialnetworks, kopieren uns den Text und setzen den in einen p-Tag ein.

<aside class=”socialnetworks”>

      <p>Wir sind in folgenden Netzwerken vertreten:</p>

</aside>

Schritt 76

Jetzt folgen die eigentlichen Social Networks. Die legen wir in einer ganz einfachen Liste an. Bei href setzen wir erst mal wieder die Raute (#) als Platzhalter ein und dann geht’s los mit Facebook, Goggle+, Twitter, Vimeo, YouTube und zu guter Letzt kommt der RSS-Feed.

<ul>

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

<li><a href=”#”>Google+</a></li>

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

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

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

<li><a href=”#”>RSS-Feed</a></li>

</ul>

Schritt 77

Jetzt bekommt jeder Link noch eine entsprechende Klasse. Das machen wir ganz einfach über den li, wir könnten es auch dem Link direkt geben. In dem Fall spielt es eigentlich keine große Rolle.

<ul>

<li><a href=”#” class=”facebook”>Facebook</a></li>

<li><a href=”#” class=”googleplus”>Google+</a></li>

<li><a href=”#” class=”twitter”>Twitter</a></li>

<li><a href=”#” class=”vimeo”>Vimeo</a></li>

<li><a href=”#” class=”youtube”>YouTube</a></li>

<li><a href=”#” class=”rss”>RSS-Feed</a></li>

</ul>

Schritt 78

Damit hätten wir das Ganze soweit angelegt, können einmal neu laden und haben die einfache Liste.

Schritt 79

Die Icons werde wir jetzt an der Stelle auf ganz genau die gleiche Art und Weise anlegen, wie wir es schon bei den articleFooter-Icons gemacht haben.

Schritt 80

Die Social Icons haben eine Auflösung von 48×48 Pixel und vom Prinzip funktioniert das Einbinden natürlich genauso wie bei den anderen Icons.

Schritt 81

Dazu wechseln wir wieder in den Dreamweaver und legen uns jetzt in der CSS-Datei die Klasse socialnetworks an und danach folgt der entsprechende Aufbau, das heißt, als Erstes wird bei der Liste der list-style auf none gesetzt, damit wir die entsprechenden Bullets vor den Listenpunkten nicht haben.

.socialnetworks ul { list-style:none; }

Schritt 82

Das blieb uns bei den Listen hier oben in der Navigation erspart, weil die Standard-Einstellung vom HTML5 Boilerplate dies bereits abdeckt, dass Listen, die innerhalb eines nav-Tags liegen, entsprechend keine Bullets beziehungsweise keine Listenelemente haben.

Schritt 83

Jetzt legen wir die Icons an. Hier erst mal für alle der generelle Stil, background>url>img, und dann hier wieder icons.png.

Das Ganze wird noch auf no-repeat gesetzt, dann die allgemeine Weite auf 48 Pixel, Höhe auf 48 Pixel und display block.

.socialnetworks ul li a { background:url(img/icons.png) no-repeat; width:48px; height:48px; display:block;

Schritt 84

Des Weiteren müssen wir dafür sorgen, dass die Schrift, die ja in dem Link ist, verschwindet.

Schritt 85

Hier wiederum dasselbe Prinzip wie bei dem Logo, was wir hier oben ja auch schon gemacht haben.

Schritt 86

Das heißt, hier text-indent und dann -9999em.

.socialnetworks ul li a { background:url(img/icons.png) no-repeat; width:48px; height:48px; display:block; text-indent:-9999em; }

Schritt 87

Danach listen wir die einzelnen Icons auf. Wir beginnen mit dem Facebook-Icon, background-position 0 Pixel, und dann minus, das können wir hier in Photoshop einmal nachmessen und da haben wir hier genau 48.

Schritt 88

.socialnetworks ul li a.facebook { background-position: 0px -48px; }

Schritt 89

Da haben wir das Facebook-Icon.

Schritt 90

Dann folgt als Nächstes Google+, hier haben wir -96 Pixel.

.socialnetworks ul li a.googleplus { background-position: 0px -96px; }

Schritt 91

Bei Twitter haben wir -144 Pixel.

.socialnetworks ul li a.twitter { background-position: 0px -144px; }

Schritt 92

Dann Vimeo und da sind es -192 Pixel.

.socialnetworks ul li a.vimeo { background-position: 0px -192px; }

Schritt 93

Bei YouTube sind -240 Pixel.

.socialnetworks ul li a.youtube { background-position: 0px -240px; }

Schritt 94

Und zu guter Letzt der RSS-Feed mit der Klasse rss und hier haben wir -288 Pixel.

.socialnetworks ul li a.rss { background-position: 0px -288px; }

Schritt 95

Damit haben wir die Icons soweit fertig.

Schritt 96

Wir haben jetzt aktuell noch die Abstände, die Listen typischerweise haben, und das Ganze sitzt natürlich noch untereinander.

Schritt 97

Das heißt, der nächste Schritt, den wir jetzt erledigen werden, ist, dass wir hier in das ul padding auf 0 setzen und ebenso das margin auf 0.

.socialnetworks ul { list-style:none; padding:0; margin:0; }

Schritt 98

Als Nächstes setzen wir den li auf float left.

.socialnetworks ul li { float:left; }

Schritt 99

Neu laden, dann sitzen die Icons auch alle direkt nebeneinander.

Schritt 100

Jetzt benötigen wir noch einen entsprechenden Abstand, das lösen wir über padding, oben unten 0 und links und rechts 5 Pixel.

.socialnetworks ul li { float:left; padding:0 5px; }

Schritt 101

Anfang und Ende sollen hier natürlich ausgenommen sein, also gehen wir wieder über die Pseudoklassen first-child und last-child. Bei First-Child haben wir dann padding-left 0 Pixel und beim last-child ist es dann padding-right 0 Pixel.

.socialnetworks ul li:first-child { padding-left:0; }

.socialnetworks ul li:last-child { padding-right:0; }

Schritt 102

Mit den 5 Pixeln Abstand sind wir hier etwas zu groß geworden.

Schritt 103

Also zurück in den Dreamweaver und dann verkleinern wir das Ganze einfach. Wir probieren das hier mit 2 Pixeln: 2 Pixel passt.

Schritt 104

Dann gucken wir ob, wir ihm noch ein bisschen mehr geben können. 3 wäre wieder zu viel, …

Schritt 105

… also bleiben wir hier letztendlich bei 2 Pixel stehen.

.socialnetworks ul li { float:left; padding:0 2px; }

Schritt 106

Damit haben wir dann insofern die erste Box so gut wie fertig, müssen allerdings den Abstand noch etwas anpassen.

Schritt 107

Socialnetworks, dann das p selektieren und dann geben wir hier ganz einfach ein margin-bottom von testweise 5 Pixeln und das sieht soweit schon ganz gut aus. Damit wäre die Box jetzt wirklich fertig.

.socialnetworks p { margin-bottom:5px; }

Schritt 108

Als Nächstes setzen wir dann in die Seitenleiste noch das Werbebanner für den HTML5- und CSS3-Artikel beziehungsweise für die entsprechende DVD.

Schritt 109

Wir gehen also wieder in den Quellcode, legen einen neuen aside-Tag an und geben dem jetzt die Klasse adbanner.

<aside class=„adbanner”> </aside>

Schritt 110

Hier können wir das Bild hineinziehen. Dazu gehen wir kurz in den Finder und sehen, dass das Banner, das wir suchen, in dem Ordner nicht drin ist. Also lade ich es hier gerade runter.

Schritt 111

Bild speichern unter und ab damit in unseren img-Ordner.

Schritt 112

Und dann können wir es ganz einfach via Drag&Drop hier reinziehen.

Schritt 113

<aside class=”adbanner”>

<a href=”#”><img src=”img/html5-css3.jpg” width=”300″ height=”250″ alt=”HTML5 CSS3 DVD”></a>

</aside>

Schritt 114

Dann noch einen entsprechenden Link.

<aside class=”adbanner”>

<a href=”#”><img src=”img/html5-css3.jpg” width=”300″ height=”250″ alt=”HTML5 CSS3 DVD”></a>

</aside>

Schritt 115

Damit haben wir das Bild drin; so passen die Abstände natürlich noch nicht.

Schritt 116

Also wieder in die CSS-Datei und hier geben wir den aside-Tags die ID sidebar aside. Generell bekommt jeder aside-Tag ein margin-bottom von 30 Pixeln.

Schritt 117

Aktuell hat sich noch nichts getan, und das liegt daran, dass wir dem ul der socialnetworks-Klasse beziehungsweise dem ul innerhalb dieses Teils socialnetworks noch die Klasse clearfix geben müssen.

<ul class=”clearfix”>

Schritt 118

Bevor ich das speichere, noch einmal ganz kurz gezeigt, warum. Denn da wir ja in dem Bereich floaten und hier noch kein clear, also das Floaten unterbunden haben, hat der ul eine Höhe von 0 Pixeln. Das heißt, im Prinzip hat die ganze aside-Box dadurch nur die Höhe dieses blauen Bereichs, also die der Schrift. Deswegen passt das mit dem Abstand auch nicht.

Schritt 119

Also hier die Klasse clearfix mit rein, einmal neu laden und dann passt das auch hier mit dem Abstand.

Schritt 120

Das Ganze können wir in der Sidebar jetzt so lassen, auch wenn die Hauptseite hier wesentlich mehr Sidebar-Elemente hat.

Schritt 121

Im Endeffekt geht es an der Stelle ja darum, dass wir hier das Responsive Webdesign nachvollziehen können, beziehungsweise, dass ich dir zeigen kann, wie das Ganze funktioniert. Also überspringen wir an dieser Stelle die weiteren Elemente und widmen uns dem Footer.

Schritt 122

Ich kopiere mir jetzt einfach aus der Original-Seite die komplette Liste, die wir hier mit eingebunden haben.

Ich kopiere die markierte Liste mit Cmd+C oder Strg+C in die Zwischenablage.

Schritt 123

Dann gehen wir in unseren Quellcode, gehen aus dem wrapper wieder heraus, also quasi zum allerletzten geschlossenen div, und öffnen dann einen footer-Tag.

<footer></footer>

Schritt 124

Innerhalb des footers wird ein neuer div-Tag geöffnet und dieser bekommt wieder die Klasse wrapper.

Schritt 125

Hier können wir jetzt einfach die erste Liste reinkopieren. Auch die Listen brauchen natürlich wieder einen div und hier können wir mit der Klasse footerCol arbeiten. Das wäre die erste Liste.

<div class=”footerCol”>
…

</div>

Schritt 126

Dann können wir die zweite Liste nehmen. Hier auf der Hauptseite haben wir mit aside-Tags gearbeitet, das kann man in der Regel halten, wie man will, es sind beide Tags richtig. Der aside-Tag ist hauptsächlich dafür da, um Nebencontent mit darzustellen. In der Regel handelt es sich bei diesem footer-Element auch darum, das ist letztendlich zu einem kleinen Teil Interpretationssache. Wir können jetzt mit divs arbeiten oder mit den aside-Tags. Letztendlich ist es euch überlassen.

Schritt 127

Hier ist die zweite Liste und wir rücken das Ganze noch etwas ein.

Schritt 128

Das machen wir für die erste Liste auch und damit sich das Ganze jetzt in diesem Bereich nicht so extrem staucht, so wie wir es jetzt hier haben, können wir über Ansicht>Codeansichtsoptionen>Umbruch den entsprechenden Umbruch entfernen.

Schritt 129

Das heißt wir haben alles, was in einer Zeile ist, auch wirklich in einer Zeile, wir müssen dann allerdings in der Horizontalen, wenn wir ans Ende wollen, scrollen. Ich persönlich finde das Ok, falls du das in dem Sinne für dich oder deine Arbeit eher mühsam findest, dann musst du das Ganze natürlich nicht umstellen.

Schritt 130

Wir brauchen jetzt zum Schluss noch unsere dritte und letze Liste, das ist der Link-Bereich.

Schritt 131

Also wieder ein div mit der Klasse footerCol und die Liste einfügen.

<div class=”footerCol”>

<ul><li><a href=”http://www.dreamztech.de” target=”_blank”>Webdesign und Programmierung Dreamztech Deutschland</a></li></ul>

</div>

Schritt 132

Dann haben wir noch die entsprechenden Überschriften.

<h5>Kategorien</h5>, <h5>Navigation</h5> und <h5>Links</h5>

Schritt 133

Damit ist der HTML-Aufbau für unseren footer soweit fertig. Als Nächstes kommt der CSS-Bereich, und wenn wir jetzt neu laden, dann sehen wir, dass unser footer aktuell noch umbricht. Das heißt, dass er sich nicht, wie er eigentlich soll, unten drunter anordnet, sondern wir haben ihn hier daneben.

Schritt 134

Genauso wie bei der Liste der Social-Media-Icons müssen wir auch hier das Floaten wieder beenden. Das heißt, wir scrollen wieder ein bisschen nach oben und geben jetzt der Hauptklasse wrapper, also dem, der um die komplette Seite herumliegt, noch ein weiteres clearfix mit dazu.

Schritt 135

Wir laden die Seite neu und dann sitzt der footer zumindest von der Position schon mal an der Stelle, an der er auch wirklich sitzen muss.

Schritt 136

Jetzt ab in die CSS-Datei, footer anlegen und wir vergeben als Erstes die Hintergrundfarbe #f3f3f3, also einen hellen Grauton. Als Nächstes die Textfarbe #3d3d3d, font-size liegt hier bei 0.9em, und dann brauchen wir noch den border nach oben, top 2 Pixel, solid und dann den entsprechenden Farbcode für den Orangeton #e02b08.

footer { background:#f3f3f3; font-size:0.9em; border-top:2px solid #e02b08; }

Schritt 137

Das Ganze speichern und die Seite neu aufrufen.

Schritt 138

Als Nächstes kommen die Listen. Float left, damit sie nebeneinandersitzen, dann der Abstand padding-right von 60 Pixel und der Abstand nach unten, margin-bottom 30 Pixel.

footer .footerCol { float:left; padding-right:60px; margin-bottom:30px; }

Schritt 139

Das Ganze wird gespeichert. Dann brauchen wir für last-child das padding-right auf 0.

footer .footerCol:last-child { padding-right:0; }

Schritt 140

Dann geht es direkt weiter mit der eigentlichen Liste. List-style setzen wir auf none, padding auf 0 und margin auch auf 0.

footer .footerCol ul { list-style:none; padding:0; margin:0; }

Schritt 141

Dann der eigentliche li, hier geben wir ein padding-bottom von 4 Pixel, line-height setzen wir auf 1.2.

footer .footerCol ul li { padding-bottom:4px; line-height:1.2; }

Schritt 142

Dann benötigen wir noch diese kleinen Pfeile, die hier vor den eigentlichen Listen sitzen und quasi hier als Bullets dienen.

Schritt 143

Da es die so in den list-styles nicht gibt, machen wir das Ganze über die Pseudoklasse before und können hier über content eigene Inhalte ganz einfach davorsetzen “» “. Als font-weight setzen wir das Ganze noch auf bold.

footer .footerCol ul li::before { content: “» “; font-weight:bold; }

Schritt 144

Wir laden die Seite einmal neu und haben die Pfeile als Listenpunkte.

Schritt 145

Jetzt muss natürlich noch die Linkfarbe mit angepasst werden: #676767, und dann der hover. Hier können wir jetzt einfach text-decoration underline nehmen. Den Effekt haben wir aber schon bearbeitet, was wesentlich schöner ist, wenn das hier einfach die Farbe zu dem Orange ändert #e02b08.

footer .footerCol a { color:#676767; }

footer .footerCol a:hover { color:#e02b08; }

Sieht dann so aus:

Schritt 146

Dann fehlen nur noch die eigentlichen Überschriften über den Boxen. H5, hier haben wir font-weight bold, Standard bei Überschriften. Die Farbe haben wir im footer schon mit drin, da es aber hauptsächlich die Überschrift betrifft, kann das Ganze auch in den h5 umziehen. Font-size ist 1em und dann benötigen wir noch den Abstand, da haben wir nach unten 5 Pixel und der Rest bleibt auf 0.

footer .footerCol h5 { font-weight:bold; color:#3d3d3d; font-size:1em; margin: 0 0 5px 0; }

Schritt 147

Uns fehlt jetzt noch der Abstand nach oben, damit das Ganze nicht direkt am eigentlichen footer klebt.

Schritt 148

Da können wir einfach über footer wrapper gehen und setzen hier ein padding-top von 30 Pixeln ein.

footer .wrapper { padding-top:30px; }

Schritt 149

Und das, was jetzt hier aussieht wie ein Grafikfehler, ist der eigentliche Hintergrund des footers, denn auch hier müssen wir erst noch das Floaten der footerCols, also der footerCol-Boxen unterbrechen beziehungsweise beenden.

Schritt 150

Wir gehen also runter in den Bereich footer und ähnlich, wie wir das vorhin auch beim wrapper im Content-Bereich gemacht haben, ergänzen wir das Ganze um die Klasse clearfix.

<footer>

<div class=”wrapper clearfix“>

Schritt 151

Wir laden einmal neu und dann haben wir den Hintergrund entsprechend mit drin.

Damit haben wir auch den footer soweit fertig und können uns jetzt dem eigentlichen Thema widmen, und zwar dem Responsive Webdesign.

Wir empfehlen: