Aller Anfang ist schwer!
sdfsdsdfsf
Der Anfang für eine neue Website verläuft immer ähnlich. Bevor man sich an die Programmierung setzen kann, muss man sich zuerst Gedanken über das Layout machen. Unterschiede gibt es dabei zu genüge. Egal ob ein 2- oder 3-Spalten Layout, fixe oder dynamische Breite und Länge, Header, Wrapper, Footer. Über all das sollte man sich ersteinmal den Kopf zerbrechen, sonst kommt man schnell in einen nicht enden wollenden Kreislauf von Designüberarbeitung.
Aus diesem Grunde habe ich ein kleines Framwork vorbereitet. Welches den Anfang sicherlich erleichtern wird.
<body> <div id="wrapper"><div id="header"></div><div id="leftcolumn"></div><div id="content"></div> <div id="rightcolumn"> </div><div id="footer"></div> </div> </body>
Die dazu gehörige CSS Datei könnte dann so ausschauen:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}
Fertig ist ein dreispaltiges Layout mit Header- und Footerbereichen.
