Making my site scale to resolution sizes in css

Question 1

You're mixing relative and absolute measurements incorrectly. If you are beginners, I would recommend sticking to one model of measurements first and gradually learn how to use the others.

For example, the Stack Overflow is absolutely positioned; if you resize the browser window, nothing will resize. A relatively positioned webpage can adapt the content to the available window size. The JSFiddle site is relatively positioned; it always utilizes the entire window size.

Both model of measurements can produce a good websites, but to produce a successful website though, you have to be intimately familiar with both methods of positioning and how to mix them to produce various effects when used in the same page.

Many people consider absolute positioning to be easier to visualize for beginners; although it has its limitations if you want to create more advanced layouts that works well across widely different screen sizes.

If you want to start with absolute positioning, you first start by deciding a certain width for the overall page. Many people uses a fairly narrow number of pixels that have a large number of even divisibility like 960px or 800px. To make a simple absolutely positioned site, you need to:

Set position: absolute on most things.
Set any two of: top, bottom, or height.
Set any two of: left, right, or width.
Everything on the page should use the same measurement unit (e.g. px)

For example (edit on jsfiddle or full screen):

#hometext{
    font-family: "arial";
    font-size: 100%; 
    text-decoration: none;
    color: #585858;
    position: absolute;
    top: 80px; 
    left: 60px; 
    width: 335px;
    height: 60px;
    line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}

The drawback of absolutely positioned website is apparent if you try to zoom the site or if your users use a different window size (they'll either have lots of wasted space or have to scroll horizontally. With pure absolute positioning, the website essentially becomes like a static image.

A more modern best practice is to use floated positioning to produce a responsive or elastic website. For this, you need to understand how to float elements and the various layout algorithms. To produce an elastic website you'll need:

use percent unit for most things
utilize the margins and paddings judiciously
utilize the various layout algoritms

For example (edit in jsfiddle or fullscreen). Understanding the various layout algorithm admittedly can be quite difficult, but you will eventually get it naturally if you keep using it for various different layouts.

Question 2

Try my css .. use a container to hold everything when re size container will do the trick.. try to copy my codes it has a container css .. and it controls overlap see . The containe most be relative to it wont overlap;; hope it help see how #advertisement css id do the trick

                        <html>

                        <body>

                        <div id = "container">
                        <div id="advertisement">
                        <img src="Desert.jpg" width="200px" height="200px">
                        </div>
                        <div id="transparent">
                        <img src="black.jpg" width="200px" height="200px">

                        </div>
                        <div id="regularborder">
                        <img src="Desert.jpg" width="200px" height="200px">
                        <img src="Desert.jpg" width="200px" height="200px">
                        <img src="Desert.jpg" width="200px" height="200px">
                        </div>
                        </div>



                        </body>
                        </html>
                                <style>
                                     #container{
                                     position:relative;

                                     }


                                       #advertisement{
                                        z-index:-1;
                                        border-left: solid;
                                       }

                                        #transparent
                                        {


                                        opacity:0.4;
                                        filter:alpha(opacity=40);
                                        position:absolute;
                                        left:0px;
                                        top:0px;

                                        }
                                        #regularborder{
                                        border-style:solid;

                                        }

                                </style>

Question 3

Try something like this in your CSS.

#wholepage { position:absolute; margin:0px; width:100%; }

Question 4

if you want responsive then try like this

CSS

.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}

HTML

<div class="header">
        <a href="/" id="headertext"> replay.sc </a>
     </div>
     <div class="table">
        <div class="row">
            <div class="cell">
                <h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
                <p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
            </div>
            <div class="cell">
                <h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
                <p> Only basic information for each replay will be made to conserve server load. </p>
            </div>
        </div>
     </div>

Set content's margin,padding as you like

Question 5

You can use vw and vh units:

font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax  /* = 1vw or 1vh, whichever is larger */

Reference:

Viewport Sized Typography

Question 6

True responsiveness can only truly be achieved if you want the behavior of your content to be predictable. Thus you could apply media queries to your website for specific sizes of the screen. @media screen and {max-width:400px}{.....} this simply means at a maximum width of 400px, treat the content like this. So your contents behavior will be included in the {....}. That will leverage you the time to try multiple browsers apart from Internet Explorer and there's one solution for this:

IE8 - I think doesn't support media queries so you'll just have to add a JavaScript file called respond.js from their developer website.

Reference:

W3C media queries and their standards