Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resolution problem in my css.

    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>
    Last edited by Suke; 12-03-2006 at 10:37 AM.

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What exactly do you mean 'make the site the same in all resolutions'?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello Suke,
    You could try setting your widths with percentages. Something like this:
    Code:
     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;
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Nov 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by 1212jtraceur View Post
    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.
    Last edited by Suke; 12-04-2006 at 02:20 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •