Website view on different Screen Resolution ???

[j4mes_bond25]

My present website: http://homepage.ntlworld.com/darsh25/

can be seen perfectly well on the screen resolution of 1024 x 768 but after reducing my screen's resolution to 800 x 600, I couldn't see it equally well. There are many other websites over the Internet that I checked using both screen's resolution & that works perfectly well in higher & lower resolution.

I wonder if there's a way I can make bit of changes to my CSS code so it can be seen equally well in low resolution screen.

My present CSS code:

Code: Select all

/* CSS Document */

body 
{
    background-image:url(background.jpg);
    background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

#banner
{
    width:100%;
    height:100px;
    text-align:center;
}


/* ......................................... Top Menu .................................... */

#topMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:980px;
    float:right;
}

#topMenu ul
{
    list-style: none;
    float:right;
    position:relative;
    margin-left: 130px;
    width:850px;
}

#topMenu ul li 
{
    background-color:purple;
    display: inline;
    border-width:medium;
    border-style:outset;
    width:203px;
    float:left;
    position: relative;
    font-size:large;
}

#topMenu li:hover
{
    border-width:medium;
    border-style:inset;
}


#topMenu a
{
    display:block;
    text-decoration:none; 
    font-size:larger;
    color:yellow; 
}

#topMenu a:hover
{
    background-color:black;
    color:white;
    text-transform:uppercase;
}

/* ....................................... Left Menu .......................................... */

#leftMenu
{
    background-color:transparent;
    cursor:default;
    text-align:center;
    width:100px;
    float:left;
}

#leftMenu ul
{
    text-align:center;
    list-style:none;
    margin:0px;
    position:relative;
    padding:0px;
    width:120px;
    border:thin solid red;
    border-bottom:0px;
}

#leftMenu ul li
{
    display: block;
    background-color:yellow;
    width:120px;
    border-bottom:thin solid red;
    color:blue;
    position: relative;
    font-size:large;
    line-height:50px; 
}

#leftMenu ul li:hover
{
    color:black;
    background-color:yellow;
    text-transform:uppercase;
}

#leftMenu ul li ul 
{
    position:absolute;
    display: none;
    text-transform:none;
    left:120px;
    width:123px;
    top:0px;
}

#leftMenu ul li ul a
{
    display:block;
    position:relative;
    text-decoration:none; 
    background-color:white;
    line-height:20px; 
    font-size:large;
    width:123px;
    color:green;
    text-transform:none;
}

#leftMenu ul li ul a:hover
{
    color:#00FFFF;
    background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }

/* ................................... Content ................................................ */

#content
{
    background-color:white;
    width:850px; 
    border:1px solid green;
    float:right;
    border-bottom:none;
}

#content h2
{
    font-family:"Times New Roman", Times, serif;
    text-align:justify;
    margin:30px;
    color:#990033;
    text-decoration:underline;
    clear:both;
}

#content h3
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    font-size:large;
    margin:30px;
    color:blue;
    text-decoration:none;
    clear:both;
}

#content h4
{
    font-family:"Courier New", Courier, monospace;
    text-align:justify;
    font-size:large;
    color:red;
    margin:30px;
    text-decoration:none;
    clear:both;
}

#content h5
{
    font-family:"Courier New", Courier, monospace;
    text-align:justify;
    font-size:large;
    color:fuchsia;
    margin:30px;
    text-decoration:none;
    clear:both;
}

#content h6
{
    font-family:"Courier New", Courier, monospace;
    text-align:justify;
    font-size:medium;
    color:black;
    margin:30px;
    text-decoration:underline;
}

#content p
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    margin:20px 30px;
    color:black;
}

#content p.first-letter:first-letter
{
    color:red;
    margin-left:20px;
    font-size:xx-large;
}

#content ul
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    margin:20px 30px;
    list-style-image:url(file:///C|/Darsh/list_icon.gif);
}

#content ul li
{
    margin:20px;
    clear:both;
}

#content ol
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    margin:20px 30px;
    list-style-type:decimal;
}

#content ol li
{
    margin:20px;
}

#content img.left
{
    float:left;
    padding:10px;
}

#content img.right
{
    float:right;
    padding:10px;
}

#content ul li a
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    text-decoration:none;
}

#content ul li a:hover
{
    color:red;
    background-color:yellow;
    font-weight:bold;
}

#content ul a:active
{
    color:blue;
    font-weight:bold;
}

#content ul a:visited
{
    color:grey;
}

/* ................................... Other Class ......................................... */

.boldText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    font-weight:bold;
}

.italicText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    font-style:italic;
}

.underlineText
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:justify;
    color:black;
    text-decoration:underline;
}


/* ................................... Table ......................................... */

.table
{
    background-color:black;
    border-style:outset;
    border-width:thick;
    border-spacing:20px;
    margin:30px 30px;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:center;
}

.table:hover
{
    border-style:inset;
    border-width:thick;
}

.tr
{
    border:1px solid red;
}

.th
{
    border:1px solid yellow;
    color:fuchsia;
}

.td
{
    border:1px solid red;
    font-size:medium;
    color:yellow;
}

/* ................................... Bottom Menu ......................................... */

#centerTop
{
    text-align:center;
    float:none;
}

#centerTop img
{
    border:0px;
}

#bottomMenu
{
    border:1px solid red;
    float:left;
    background-color:black;
    color:#FFFFFF;
    text-align:center;
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    font-size:large;
    width:100%; 
    height:5%; 
    margin:0px;
}

#validator
{
    text-align:center;
    float:none;
}

#validator img
{
    border:0px;
}

[iZone]

Basically an 800x600 screen has about 768 visible pixels allowing for the scrollbar and browser edges. So the total width of items in your site shouldnt be wider than that.

Your #topMenu is 980px wide. Therefore it'll never fit on an 800x600 screen. Go through and adjust the sizes or try using % so it fits equally well on all size screens.

[j4mes_bond25]

Originally Posted by iZone

Basically an 800x600 screen has about 768 visible pixels allowing for the scrollbar and browser edges. So the total width of items in your site shouldnt be wider than that.

Your #topMenu is 980px wide. Therefore it'll never fit on an 800x600 screen. Go through and adjust the sizes or try using % so it fits equally well on all size screens.

http://www.w3schools.com/browsers/browsers_stats.asp says that around 20% STILL uses lower screen resolution & 17% use MORE than 1024 resolution. Only around 60% uses the exact 1024 resolution.

Would you say changing everything from "px" to "%" would AUTOMATICALLY adjust the display of content whatever the screen's resolution is ???

[iZone]

Yes, changing over to describing the widths of things as a % of the total width will definately make your site look good on any resolution. The problem is its quite a bit harder than fixing at a set width. It depends what type of site you want. Many people still like having a 768px wide column.

[Dan Williamson]

If you are fairly capable in CSS you will know what this means, turn your layout into a liquid layout. It can have it's problems but also it has it's advantages for people running 800x600 as I myself hate having incredibly small layouts but I stil ldo for accessibility.