Frage stellen
das Layout für eine Website habe ich bislang immer mit einer Tabellenstruktur gelöst. Nun wollte ich das Ganze aber mittels XHTML, CSS und Div-Containern realisieren. Da ich aber bisher noch nie mit Div's gearbeitet habe, weiß ich nicht ob ich das Grundgerüst so richtig erstellt habe, oder ob man es evtl. noch verbessern könnte. Für eure Meinung wäre ich euch dankbar.
So soll das Grundgerüst aussehen:
Hier mein HTML-Code (Ich habe am Ende in Klammern den ID-Namen des jeweiligen Div's-Tag geschrieben, der er hier im Forum automatisch ausgeblendet wird:
- Code: Alles auswählen
<body>
<div>(page)
<div>(header)
<div>Logo</div>(logo)
<div>Metamenü</div>(metamenu)
<div>Suche</div>(search)
<p> </p>
</div>
<div>(content)
<div>(navigation)
<div>Navigation</div>(layermenu)
<div>Sprache</div>(language)
<p> </p>
</div>
<div>Flash</div>(flash)
<div>Brotkrümelnavigation</div>(breadcrumb)
<div>Inhalt links</div>(left)
<div>Inhalt rechts</div>(right)
<p> </p>
</div>
<div>(footer)
<div>Zusatzmenü</div>(footermenu)
<div>© Copyright 2008</div>(copyright)
</div>
</div>
</body>
Und hier meine CSS-Datei:
- Code: Alles auswählen
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body {
background: #EFEFF1;
}
#page {
width: 942px;
margin: 0 auto;
}
#header {
width: 100%;
height: 60px;
background: url(header.gif) repeat-y;
}
#header #logo {
width: 200px;
height: 54px;
margin: 6px 0px 0px 31px;
float: left;
background: url(logo.gif) no-repeat;
}
#header #metamenu {
width: 575px;
height: 100%;
float: left;
text-align: right;
}
#header #search {
width: 125px;
height: 100%;
float: left;
}
#content {
width: 100%;
height: 100%;
background: url(white.gif) repeat-y;
}
#content #navigation {
width: 920px;
height: 37px;
margin: 0px 0px 0px 11px;
background: url(navigation.gif) repeat-x;
}
#content #navigation #layermenu {
width: 795px;
height: 100%;
float: left;
}
#content #navigation #language {
width: 125px;
height: 100%;
float: left;
}
#content #flash {
width: 920px;
height: 270px;
clear: left;
margin: 0px 0px 0px 11px;
}
#content #breadcrumb {
width: 900px;
height: 15px;
margin: 0px 0px 0px 11px;
padding: 0px 0px 0px 20px;
background: url(breadcrumb.gif) repeat-x;
}
#content #left {
width: 610px;
float: left;
margin: 20px 20px 0px 31px;
padding: 10px 0px 10px 0px;
}
#content #right {
width: 229px;
float: left;
margin: 20px 0px 0px 0px;
padding: 10px 0px 10px 20px;
border-left: 1px dotted #CCCCCC;
}
p.clear {
clear: left;
}
#footer {
background: url(footer.gif) no-repeat;
}
#footer #footermenu {
width: 920px;
height: 21px;
margin: 0px 0px 0px 11px;
background: url(footermenu.gif) repeat-x;
}
#footer #copyright {
width: 920px;
height: 35px;
font: normal normal normal 7pt/15px Verdana, Arial, Helvetica;
color: #666666;
text-align: center;
}
Grüße Tweety
!
Aber aus Fehlern lernt man.
