Das ist mein 2. mal erst das ich ein Design per Div und CSS code.
Leider natürlich ein ziemlicher Reinfall.
Der Aufbau ist schlicht, links und rechts eine Navi (etwas versetzt natürlich) und in der Mitte der Content, Header oben und Footer unten.
Leider verschiebt es die rechte Navi nach jeden Klick etwas hoch und dann etwas runter...
(Zu erwähnen das die Navi in Tabellen gecodet ist - Ja ich weiss Tabellen sind böse aber ich kann den style nicht in list umsetzen)
Aber der Code spricht mehr wie Worte wohl
Code:
*{
margin:0;
padding:0;
border:none;
}
body{
background:url('img/headbg.jpg') #FFFFFF repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#908f8f;
}
#header{
background-image:url('img/head.jpg');
width:1000px;
height:600px;
clear:both;
z-index:1;
}
#wrap{
width:1000px;
height:auto;
background-image:url('img/bg.jpg');
margin-left: -423px;
position:absolute;
left:50%;
}
#content{
width:596px;
height:auto;
clear:left;
padding-left:205px;
margin-top:-175px;
margin-right:220px;
}
#special{
width:180px;
height:auto;
margin-left:19px;
margin-right:769px;
margin-top:-160px;
float:left;
z-index:3;
}
#navi{
width:300px;
height:auto;
margin-left:785px;
margin-right:5px;
margin-top:-690px;
float:left;
z-index:4;
}
#footer{
clear:both;
width:1000px;
height:100px;
background:url('img/footer.jpg') no-repeat;
line-height:30px;
font-family:"Century Gothic", Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
padding-right:30px;
text-align:right;
font-size:11px;
color:#FFFFFF;
}
.navhead {
background-image: url(img/navhead.png);
background-repeat: no-repeat;
font-family:Lucida Sans Unicode;
font-size: 13px;
color: #50c1c7;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.70;
opacity:0.7;
height: 42px;
width: 198px;
padding: 2px;
}
.navbody {
background-color: #c9ffe7;
font-family: arial;
font-size: 11px;
color: #d3d07f;
font-weight: bold;
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
filter: alpha(opacity=60);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.6;
opacity:0.6;
width: 194px;
height: 10px;
padding: 2px;
}
.navfooter {
background-image: url(img/navfooter.png);
background-repeat: no-repeat;
font-family: Lucida Sans Unicode;
font-size: 10px;
color: #580800;
font-weight: bold;
text-align: center;
letter-spacing: 2px;
filter: alpha(opacity=60);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.6;
opacity:0.6;
width: 198px;
height: 15px;
padding: 2px;
}