Link to page:
http://www.masta-gamerz.com/MgDark/MgDark.html
Here's my code, It's the first css I've ever made, so any help would be appreciated.
Code:
body {
margin: 0px;
padding: 0px;
background: url('/MgDark/images/SideBackground.gif') repeat-x;
background-color: #000000;
font-size: 12px;
color: #FFFFFF;
font-family: verdana, arial, sans-serif;
}
#Header {
width: 800px;
height: 200px;
background: url('/MgDark/images/Header.jpg') no-repeat;
}
#Content {
width: 800px;
height: 200px;
background: url('/MgDark/images/Middle.jpg') no-repeat;
}
#Footer {
width: 800px;
height: 200px;
background: url('/MgDark/images/Footer.jpg') no-repeat;
}
#Background {
width: 800px;
height: 600px;
background: url('/MgDark/images/Background.gif') repeat-y;
}
#SideBackground {
position: absolute;
width: 10px;
height: 600px;
top: 490px;
left: 190px;
background: url('/MgDark/images/SideBackground.gif') repeat-y;
}
#Font {
position: absolute;
width: 490px;
height: 450px;
top: 490px;
left: 210px;
font-size: 14px;
color: #FFFFFF;
font-family: verdana, arial, sans-serif;
}
#Layout {
position: absolute;
width: 460px;
top: 985px;
height: 15px;
left: 220px;
}
#Navigation {
position: absolute;
width: 150px;
top: 490px;
left: 20px;
background-color: #212121;
height: 500;
visibility: visible;
font-size: 10px;
color: #FFFFFF;
font-family: verdana, arial, sans-serif;
}
#Navlinks a {
display: block;
border: 1px solid #303030;
background-color: #3D3D3D;
padding: 3px;
margin-bottom: 2px;
}
#Navlinks a:hover {
color: #AAAAAA;
background: url('/MgDark/images/linkbg_copy.jpg') no-repeat;
}
a {
color: #B8B8B8;
border-bottom: 1px dotted #D7D7D7;
text-decoration: none;
}
a:hover {
color: #FFF;
border-bottom: 1px solid #D7D7D7;
}
Now, I was wondering how I'd make the site the same in all resolutions? I've looked around but I can't find anything that helps. I use 1280 x 800 and it looks ok, but it looks better in 1028 x 768. Again, I need help with the resolutions, please! Here's my php code if you'd like it:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Masta-Gamerz; Dark</title>
<meta http-equiv="Content-Language" content="en-us">
<meta name="keywords" content="Roms, Anime, Downloads, Graphics, Downloads, Movies">
<meta name="description" content="Gaming, Anime, Grafix max!">
<meta name="copyright" content="masta-gamerz.com" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
.style2 {color: #FFFFFF}
.style3 {color: #F2F2F2}
.style7 {color: #CCCCCC; }
.style9 {font-size: 14}
.style11 {color: #333333}
-->
</style>
<div id="Header"></div>
<div id="Content"></div>
<div id="Footer"></div>
<div id="Background"><span id="Font">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/linkbg_2.jpg','images/linkbg_2_2.jpg')">
<span id="navigation">
<!-- Starts Navigation -->
<div id="navlinks">
<!-- Navigation links start -->
<h2>Navigation</h2>
<a href="http://www.masta-gamerz.com/index.php.html" class="style3">Home</a> <a href="#" class="style3">Downloads</a> <a href="http://www.masta-gamerz.com/MgForum/index.php" class="style3">Forum</a> <a href="http://www.masta-gamerz.com/Mastamain/S.O.T.W.html" class="style3">S.O.T.W</a> <a href="http://www.masta-gamerz.com/Mastamain/W.O.T.F.html" class="style3">W.O.T.F</a> <a href="#" class="style3">bla bla </a><br />
<h2>Affilates</h2>
<a href="#" class="style3">bla bla </a> <a href="#" class="style3">bla bla </a> <a href="#" class="style3">bla bla </a> <a href="#" class="style3">bla bla </a> <a href="#" class="style3">bla bla </a> <a href="#" class="style3">bla bla </a>
</div>
</span>
</body>
</html>
Before you post, read our: 
