Page title

Du bist hier: Blog » Kategorie Web Development » Beitrag XHTML-Grundgerüst
 23.09.2009
 keine Kommentare

XHTML-Grundgerüst

Inspiriert von dem wirklich hervorragenden Blog-Beitrag The Incredible Em & Elastic Layouts with CSS von Ty Gossman (und weil ich grade eine neue Internet-Seite anfange) habe ich mich mal daran gesetzt, ein XHTML-Grundgerüst zu erstellen.

Die Seite soll möglichst flexibel sein, einige grundsätzliche Regeln beinhalten (z.B. erhalten alle Elemente ein Margin- und Padding-Reset) und leicht anzupassen sein.

Hier also nun das Resultat, was gerne jeder verwenden/ändern darf:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
  <title>Seitentitel</title>
 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Lars Schweisthal" />
 
  <style type="text/css">
 
    /* very basic CSS reset */
    * {
      padding: 0;
      margin: 0;
    }
 
    html {
      width: 100%;
      background: white;
      color: black;
      overflow-y: scroll; /* prevent Firefox scrollbar jump when resizing window/content */
      font-size: 100%; /* Fix for IE; Most Browsers have 16px as standard font-size */
    }
 
    body {
      background: white;
      margin: 3.125em auto; /* center the body, top-/bottom-margin of 50px */
      width: 56.25em; /* Base-width 900px */
    }
 
    ul {
      list-style-type: none;
    }
 
    a {
      color: black;
      text-decoration: underline;
    }
 
    a:hover {
      color: red;
      text-decoration: none;
    }
 
    h1 {
      clear: both;
      font-size: 1.875em; /* 30px base */
      font-weight: bold;
    }
 
    h2 {
      clear: both;
      font-size: 1.5em; /* 24px base */
      font-weight: bold;
    }
 
    p {
      font-size: 0.875em; /* 14px base */
      margin: 0 0 0.5em 0;
    }
 
    ul#navigation {}
 
    ul#navigation li {
      display: block;
      float: left;
      margin: 0 1em 0 0;
    }
 
    ul#navigation li:last-child {
      margin: 0;
    }
 
    ul#navigation li a {
      text-decoration: none;
    }
 
    ul#navigation li a:hover,
    ul#navigation li a.active {
      color: blue;
    }
 
    ul#navigation li a:hover {
      text-decoration: underline;
    }
 
  </style>
 
</head>
 
<body>
 
  <ul id="navigation">
    <li><a href="#" title="Seite 1" class="active">Seite 1</a></li>
    <li><a href="#" title="Seite 2">Seite 2</a></li>
    <li><a href="#" title="Seite 3">Seite 3</a></li>
    <li><a href="#" title="Seite 4">Seite 4</a></li>
  </ul>
 
  <h1>Seitentitel</h1>
 
  <h2>Untertitel</h2>
 
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Get to
    <a href="http://google.de">Externer Link</a>.
  </p>
  <p>
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
    consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. <a href="#">Interner Link</a> &hellip;
  </p>
  <p>
    In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
    dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
    leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
    lorem ante, dapibus in, viverra quis, feugiat a.
  </p>
 
  <script type="text/javascript">
  /* <![CDATA[ */
  //
  /* ]]> */
  </script>
 
</body>
</html>

Hier gibt’s das ganze dann noch als eigenständige Seite.

 kommentieren ·  abgelegt unter Web Development ·  23.09.2009
diesen Artikel bookmarken oder weiterempfehlen:
         
 Kommentar hinterlassen






 Kommentar absenden