< 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

< 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 < Zurück zu HTML erklärt