Hi Leute,
ich habe vor in entfernter Zukunft meine Webseite mit Typo3 unter der Haube und einem schicken Design in (x)HTML und CSS fürs Auge neu zu gestalten. Deshalb habe ich mal angefangen ein wenig zu basteln und habe bisher folgende Ergebnisse:
HTML:
Code:
<!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">
<head>
<title>Mein Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- ###DOKUMENT### begin -->
<div id="oben">
<img src="fileadmin/images/logo.jpg" alt="CANundJAN-Logo" title="CANundJAN-Logo" width="149" height="95" />###TRAILER###
</div>
<div class="trennlinie">
</div>
<div id="menuoben">
###MENU_OBEN###
</div>
<div class="trennlinie">
</div>
<div id="menuleft">
###MENU_LINKS###
</div>
<div id="content">
###CONTENT###
</div>
<div id="menuright">
###RECHTS###
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>
und die CSS-Datei:
Code:
html, body{
height: 100%;
}
body{
background: #DDDDDD url(image/bg.1.3.100p.gif) repeat-y;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 11px;
}
#oben{
width: 100%;
height: 95px;
position; absolute;
left: 0;
top: 0;
background: #7FA0C1;
}
.trennlinie{
width: 100%;
height: 1px;
left: 0;
background: #FFFFFF;
}
#menuoben{
width: 100%;
height: 19px;
padding: 0 10pt 0 0;
background: #467289;
color: #FFFFFF;
text-align: right;
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
}
#menuleft{
position: absolute;
width: 149px;
left: 0;
top: 116px;
background: #467289;
}
#menuright{
position: absolute;
width: 150px;
right: 0;
top: 116px;
padding: 0 5px 0 5px;
background: #E2EEF5;
text-align: center;
}
#content{
margin: 0 160px 0 150px;
padding: 5px 10px 5px 15px;
background: #FFFFFF;
}
h4{
font-size: 15px;
border-bottom: 1px dashed #000;
}
p{
text-align: justify;
}
p.source{
font-size: 10px;
}
p.source:before{
content: 'Quelle: ';
}
#menuoben a:link {
color: #FFFFFF;
text-decoration: none;
}
#menuoben a:active {
color: #FFFFFF;
text-decoration: none;
}
#menuoben a:visited {
color: #FFFFFF;
text-decoration: none;
}
#menuoben a:hover {
color: #FFFFFF;
text-decoration: underline;
}
(Die Vorlage hat eine Seite aus dem Sticky geliefert)
Grundsätzlich ist die Sache so auch funktionstüchtig, allerdings gibt es noch ein, zwei Problemchen.
Zum einen hätte ich gerne in dem "menuoben"-Container rechts ein Padding von 5 Pixeln, dummerweise ist bei meiner Version der Container praktisch um 5 Pixel nach rechts erweitert, sprich größer als 100%. Warum?
Und zweitens sieht das Template in Firefox ja ganz toll aus, aber im IE etwas bescheiden. Wie schaffe ich es, dass der IE im Großen und Ganzen das selbe darstellt wie Firefox?
Und als letztes vielleicht noch irgendwelche grundsätzlichen Verbesserungsvorschläge? Ich bin dankbar für alles, was mich weiterbringt.
Übrigens: Das Design ist nicht die endgültige Version. Ich mach das gerade um mich ein bisschen in die Materie einzuarbeiten.
Greetz
billythekid
