HTML erklärt #14 Footer und Design-Arbeiten
geschrieben von Felix Beuster amDein 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
12<!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 ut38 labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores39 et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem40 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et41 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea42 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum43 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et44 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea45 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 ut49 labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores50 et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem51 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et52 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea53 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum54 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et55 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea56 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 ut61 labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores62 et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem63 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et64 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea65 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum66 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et67 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea68 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 ut72 labore et dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores73 et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem74 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et75 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea76 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum77 dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et78 dolore magna aliguyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea79 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>Mehr aus HTML erklärt
Ein parr mehr Artikel
Kommentare
Bisher keine Kommentare.Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.