...
PDA

Resolution problem in my css.

Suke
12-03-2006, 09:32 AM
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. :)

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:

<!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>
1212jtraceur
12-03-2006, 03:30 PM
What exactly do you mean 'make the site the same in all resolutions'?
Excavator
12-03-2006, 06:54 PM
Hello Suke,
You could try setting your widths with percentages. Something like this: html, 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;
width: 99%;
}



#Header {
width: 80%;
height: 200px;
background: url('/MgDark/images/Header.jpg') no-repeat;
}

#Content {
width: 80%;
height: 200px;
background: url('/MgDark/images/Middle.jpg') no-repeat;
}

#Footer {
width: 80%;
height: 200px;
background: url('/MgDark/images/Footer.jpg') no-repeat;
}

#Background {
width: 80%;
height: 600px;
background: url('/MgDark/images/Background.gif') repeat-y;
}
Suke
12-04-2006, 12:47 AM
What exactly do you mean 'make the site the same in all resolutions'?

I mean so that in 800 x 600 it doesn't make scroll bars, and in 1024 x 768 as well. So that in all resolutions the site appears the same.

@ Excavator: It didn't work, thanks for trying though. ;)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum