beuster{se}
< Zurück zu HTML erklärt

HTML erklärt #14 Footer und Design-Arbeiten

geschrieben von Felix Beuster am

Dein Browser ist zu klein für den eingebetteten Player. Du kannst das Video hier auf YouTube ansehen.

Die Seite aus Folge 12 (auch hier im Blog zu finden) wird überarbeitet. Sie erhält eine grafische Aufwertung und einen Footer, der stets am unteren Fensterand zu sehen ist.
Neue Tags in diesem Teil: div
Neue Attribute in diesem Teil: position, bottom, left

1
2
<!DOCTYPE html>
3
<html>
4
 <head>
5
  <meta charset="utf-8">
6
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
7
  <title>Abstände an und in Elementen</title>
8
  <style type="text/css">
9
   * {margin: 0; padding: 0;}
10
   body {font-family: Calibri, Tahoma, Arial, sans-Serif;
11
            background: url(verlauf.png) repeat-x #bcbcbc fixed;}
12
   div#head {height: 5.5em; background: url(kante.png) repeat-x bottom;}
13
   h1 {margin: 0 0 0 2em; font-size: 3em; color: #2a2a2a;}
14
   ul {display: block; width: 100%; text-align: center; font-size: 1.1em}
15
   ul li {display: inline; padding: 3px 15px;}
16
   ul li a {text-decoration: none; color: #111111;}
17
   ul li a:hover {color: #bcbcbc;}
18
   p {width: 80%; margin: 10px auto; text-align: justify;}
19
   div#footer {background: #bcbcbc; width: 100%; height: 2em; position: fixed; bottom: 0; left: 0;
20
                border-top: 1px solid #7a7a7a; clear: both;}
21
   div#footer p {text-align: center;}
22
  </style>
23
 </head>
24
 <body>
25
  <div id="head">
26
   <h1>Lorem ipsum dolor sit amet</h1>
27
   <ul>
28
    <li><a href="#">Blog</a></li>
29
    <li><a href="#">Fourm</a></li>
30
    <li><a href="#">About Me</a></li>
31
    <li><a href="#">Downloads</a></li>
32
    <li><a href="#">Impressum</a></li>
33
   </ul>
34
  </div>
35
  <p>
36
   <img src="speicher.jpg" alt="Speicherstadt in Hamburg" style="float: left; margin: 0 1em 0.5em 0;">
37
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
38
   labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
39
   et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
40
   ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
41
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
42
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
43
   dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
44
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
45
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
46
  </p>
47
  <p>
48
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
49
   labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
50
   et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
51
   ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
52
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
53
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
54
   dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
55
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
56
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
57
  </p>
58
  <p>
59
   <img src="ifa.jpg" alt="IFA Berlin 2010" style="float: right; margin: 0.5em 0 0.5em 1em;">
60
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
61
   labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
62
   et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
63
   ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
64
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
65
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
66
   dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
67
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
68
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
69
  </p>
70
  <p>
71
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
72
   labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
73
   et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
74
   ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
75
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
76
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
77
   dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
78
   dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
79
   rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
80
   <br><br><br>
81
  </p>
82
  <div id="footer">
83
   <p>©2011 DerAutor</p>
84
  </div>
85
 </body>
86
</html>

< Zurück zu HTML erklärt

Mehr aus HTML erklärt

HTML erklärt # 15.1 Formulare
HTML erklärt # 15.1 Formulare

Hier klicken, um das Video zu sehen. Nach langem Warten ist nun endlich Folge 15 der HTML erklärt Reihe erschienen, genauer gesagt ist es Folge 15.1. Es geht in dieser Episode um Formulare, ihren grundlegenden Aufbau und ihre...

HTML erklärt #15.2 Input - Spezielle Eingaben
HTML erklärt #15.2 Input - Spezielle Eingaben

Hier klicken, um das Video zu sehen. Der Input tag bietet eine ganze Reihe an semantischen Unterschieden und eine ebenso lange Reihe an verschiedenen Unterstzüzungen der Brwoser. Ich zeige euch heute mal, welche Typen es alles...

HTML erklärt #6 Aufzählungen und Listen
HTML erklärt #6 Aufzählungen und Listen

Hier klicken, um das Video zu sehen. So, hier ein Video, wie ihr verschiedene Listen erstellen könnt. Erklärt wird auch, wie ihr den Typ und den Anfang der Liste ändert. Neue Tags in diesem Teil: ul, ol,...

HTML erklärt #3 Makros in Notepad++
HTML erklärt #3 Makros in Notepad++

Hier klicken, um das Video zu sehen. Mit diesem kleinen Tipp zeige ich euch, wie ihr mit ein paar Mausklicks oft wiederholte Eingaben fast schon automatisieren könnt und dadurch viel Zeit spart.

< Zurück zu HTML erklärt

Kommentare

Bisher keine Kommentare.
Schreib etwas neues

Noch 1500 Zeichen übrig.

Mit * makierte Felder sind Pflichtfelder. Mit dem Absenden des Formulars eklären Sie sich mit den Datenschutzerklärung einverstanden.

Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.

< Zurück zu HTML erklärt

Ein parr mehr Artikel

YouTube Capture - Neue Video-App
YouTube Capture - Neue Video-App

Mit einem kurzen Werbevideo auf der eigenen Plattform, stellt YouTube seinen Nutzern eine neue App vor. Mit dieser soll das Aufnehmen, Hochladen auf die Videoplattform und Teilen in verschiedenen...

Freunde der Zukunft
Freunde der Zukunft

Freunde zu haben ist doch was Tolles. Viel schöner wird es dann doch sogar, wenn man über 15000 Freunde hat, virtuelle auf YouTube. Natürlich steht bei diesen Freundschaften nur selten eine richtige oder sogar reale soziale Interaktion im Vordergrund....

Ein ganz normales Wochenende - Briefe von Felix
Ein ganz normales Wochenende - Briefe von Felix

Hier klicken, um das Video zu sehen. Nach dem Kurzurlaub ist es wieder an der Zeit für YouTube-Videos. Doch bevor es damit normal weitergeht, muss erstmal für Ordnung gesorgt werden, und das ein oder andere abseits von YouTube...

Zählen will gelernt sein
Zählen will gelernt sein

Seit Tagen, nein eigentlich schon seit Wochen bereitet uns YouTubern eines Schmerzen: Klickzähler. YouTube sucht nach Methoden, um die Klicks verlässlich zu zählen Ist doch ganz einfach, mag man sich denken. Klick - 1, Klick - 2, Klick - 3 und so...

< Zurück zu HTML erklärt
Ich bin ein Test. Schließen
Diese Seite verwendet eigene und Drittanbieter-Cookies. Mehr dazu hier. Ok