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.
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.
