Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

7.9 Das Stylesheet im Überblick

Am Ende dieses Kapitels wird das Stylesheet langsam, aber sicher etwas unübersichtlich. Hier der aktuelle Stand der Dinge:

01 /* Stylesheet für Übungsseiten "Little Boxes, Teil 1" */
02 * { padding: 0; margin: 0; }
03 html { height: 100%; margin-bottom: 1px; }
04 body {
05   background-color: #8c8c8c;
06   color: white;
07   font-family: Verdana, Arial, Helvetica, sans-serif;
08   font-size: small;
09 }
10 div#wrapper {
11   background-color: white;
12   color: black;
13   width: 720px; /* feste Breite */
14   margin-top: 10px;
15   margin-right: auto; /* Abstand rechts */
16   margin-bottom: 10px;
17   margin-left: auto; /* Abstand links */
18 }
19 div#kopfbereich {
20   background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
21   color: black;
22   padding-top: 10px;
23   padding-right: 20px;
24   padding-bottom: 0;
25   padding-left: 20px;
26 }
27 div#navibereich {
28   padding-top: 5px ;
29   padding-right: 20px;
30   padding-bottom: 5px;
31   padding-left: 20px;
32 }
33 div#textbereich {
34   padding-top: 20px ;
35   padding-right: 10px;
36   padding-bottom: 20px;
37   padding-left: 20px;
38 }
39 div#fussbereich {
40   padding-top: 10px;
41   padding-right: 20px;
42   padding-bottom: 20px;
43   padding-left: 20px;
44   border-top: 1px solid #8c8c8c;
45   margin-top: 0;
46 }
47 img#logo {
48   background-color: white;
49   color: black;
50   padding: 10px;
51   border: 10px solid #d9d9d9;
52 }
53
54 h1 { font-size: 150%; }
55 h2 { font-size: 130%; }
56 address {
57   text-align: center;
58   font-size: 80%;
59   font-style: normal;
60   letter-spacing: 2px;
61   line-height: 1.5;
62 }
63 a {
64   text-decoration: none;
65   /* outline: none; */
66 }
67 a:link { color: #d90000; }
68 a:visited { color: #cc6666; }
69 a:hover, a:focus {
70   border-bottom: 1px solid #d90000;
71 }
72 a:active {
73   background-color: #d90000;
74   color: white;
75 }
76 #textbereich a {
77   border-bottom: 1px dotted #cc0000;
78 }
79 #textbereich a:hover,
80 #textbereich a:focus {
81   border-bottom: 1px solid #d90000;
82 }
83
84 /* Abstand nach unten */
85 h2, p, ul, ol { margin-bottom: 1em ; }
86
87 /* Verschachtelte Listen ohne Abstand */
88 ul ul { margin-bottom: 0; }
89
90 /* Abstand von links */
91 li { margin-left: 1em; }