Hi, I decided that I am done with modifying this Photoshop generated code! So I started to look at Chris's videos about coding it myself.
My job was to design the site and make it work as far as HTML and CSS goes. Then the server owner would make it actually work with the server etc.
My goal was to make the site lightweight, but still make it look decent. So the final thing uses only 2 images that are worth mentioning size-wise. The first one is header, which is the biggest image. And the second one is background which is 4pixels wide thin strip behind there. Everything else is just.. not worth mentioning.
Although my part is done with this it is still not completely ready. There will also be 10 of these designs. Each of them which have different race in header, but overall it stays the same.
My job was to design the site and make it work as far as HTML and CSS goes. Then the server owner would make it actually work with the server etc.
My goal was to make the site lightweight, but still make it look decent. So the final thing uses only 2 images that are worth mentioning size-wise. The first one is header, which is the biggest image. And the second one is background which is 4pixels wide thin strip behind there. Everything else is just.. not worth mentioning.
Anyway here's the outcome:
http://codeforums.org//website/Home
And here's the code:
HTML:
CSS:
a:link {color: #e7a7e8; text-decoration:none;}
a:visited {color: #e7a7e8; text-decoration:none;}
a:hover {color:#bf59c1; text-decoration:none;}
a:active {color: #bf59c1; text-decoration:none;}
body{
background: URL(Images/bg.jpg) repeat-x #101010;
font-family:Georgia, \"Times New Roman\", Times, serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
div#page-wrap {
margin: 0 auto;
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
width: 691px;
text-align:left;
}
div#header {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 341px;
background: url(Images/header.png);
}
div#server-stats{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-size: 12px;
color:#c71200;
position:relative;
top:150px;
left:400px;
}
div#menu-div{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
position:relative;
top: 259px;
}
ul#menu li{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: inline;
}
ul#menu li a{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: block;
height: 24px;
float: left;
position:relative;
left: 100px;
margin: 0px 5px 0px 5px;
padding: 0px 5px 0px 5px;
background:url(Images/menu-bg.png) repeat-x;
color:#e7a7e8;
text-decoration:none;
font-weight:bold;
font-size:15px;
}
ul#menu li a:hover, a:active, a:focus{
background-position:bottom center;
color:#bf59c1;
outline:none;
}
div#content{
position:relative;
width: 606px;
left: 57px;
background:url(Images/50trans-bg.png) repeat;
}
div#content-text{
padding: 0px 50px 20px 50px;
}
div#footer{
position:relative;
width: 606px;
left: 57px;
background:url(Images/50trans-bg.png) repeat;
color: #393939;
text-align:right;
border-top:#393939 solid 1px;
}
div#footer-text{
padding: 2px 50px 2px 50px;
}
Although my part is done with this it is still not completely ready. There will also be 10 of these designs. Each of them which have different race in header, but overall it stays the same.