vademecum

Gestaltungsraster mit einem Urgerüst

… weitere Beispiele für Raster mit Quelltexten

Beispiel für HTML- & CSS-Quelltext mit horizontaler Navigation:


     <html>
     <head><title></title><link rel="stylesheet" type="text/CSS" href=formate.css></head>
     <body><div class=all>

<header>Kopfleiste</header>

<nav><a href=.html>&laquo;</a>
<a href=.html>Verweis</a>
<a href=.html>Link</a>
<a href=.html>Anker</a>
<a href=.html>Hotspot</a>
&nbsp;</nav>

<div class=col><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt et dolore magna aliquyam erat, voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd matre gubergren,
no sea takimata.</p></div>

<div class=col2><p>Rechte Kolumne (etwas schmaler als die linke)</p></div>

<footer>Fu&szlig;leiste</footer>

     </div></body>
     </html>


* { margin:0; padding:0; }

body {
background:#555; }

.all {
margin:auto;
width:915px;
height:630px;
background:#fff;
color:#333;
font-family:Tahoma,Helvetica,sans-serif;
font-size:14px;
line-height:21px; }

header {
width:910px;
height:70px;
padding-left:5px;
background:#ddd; }

h1 {
font-size:33px;
color:#444;
font-weight:lighter; }

nav {
width:915px;
height:30px;
text-align:right;
word-spacing:17px;
background:#bbb; }

.col {
margin-left:5px;
width:500px;
height:500px;
float:left;
background:#cfc; }

.col2 {
margin-left:5px;
width:400px;
height:500px;
float:left;
background:#cfc; }

p {
padding: 7px 27px 0 0; }

footer {
width:910px;
height:30px;
background:#ddd;
text-align:right;
padding-right:5px;
clear:both; }

a:link, a:visited {
color:#cfc;
text-decoration:none; }

a:hover {
color:#d55;
text-decoration:none; }

td {
vertical-align:top; }