| | |
Website view on different Screen Resolution ???
Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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:
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:
/* 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;
} Nope, I'm NOT God, but I'm British (which is the next best thing ;)
In short you'll find that most of the professional websites design their content to be viewed in the lowest resolution - 800 x 600 pixels.
When people are using a slightly higher resolutions they just center it, to give the illusion of looking perfect.
http://www.adobe.com/
http://www.winamp.com/ looks okey dokey in watever resolution.
The other popular alternative is to have a banner which dynamically expands and contracts depending on the resolution of the user. It sounds more difficult than it actually is
http://www.symantec.com/index.htm
However, some sites such as Daniweb (he he) consider 1024 x768 resolution to be the de facto resolution and disregard all those viewing below that range! Which is a fair point, most people use monitors with this settings.
Choose, whichever options suit you best.
P.S I've had a look at some of your websites - in the javascript forums.. And I'm finding it hard to resist nominating them for the websites that suck prize. :cheesy:
Question:
Are you even using a web design program (frontpage/dreamweaver)?
When people are using a slightly higher resolutions they just center it, to give the illusion of looking perfect.
http://www.adobe.com/
http://www.winamp.com/ looks okey dokey in watever resolution.
The other popular alternative is to have a banner which dynamically expands and contracts depending on the resolution of the user. It sounds more difficult than it actually is

http://www.symantec.com/index.htm
However, some sites such as Daniweb (he he) consider 1024 x768 resolution to be the de facto resolution and disregard all those viewing below that range! Which is a fair point, most people use monitors with this settings.
Choose, whichever options suit you best.
P.S I've had a look at some of your websites - in the javascript forums.. And I'm finding it hard to resist nominating them for the websites that suck prize. :cheesy:
Question:
Are you even using a web design program (frontpage/dreamweaver)?
*Voted best profile in the world*
•
•
•
•
Originally Posted by iamthwee
P.S I've had a look at some of your websites - in the javascript forums.. And I'm finding it hard to resist nominating them for the websites that suck prize. :cheesy:
Question:
Are you even using a web design program (frontpage/dreamweaver)?
My website is viewable perfectly well on 1024 and 800 resolution since I've changed the "px" to "%" value now.
I'm bit at sea as what do you mean by "some" of my websites, since I don't have many websites as this is the only one that I've created lately.
Although, I'm doing my work in Dreamweaver window but am NOT using the software itself, since all my codes are hand-coded.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
>I'm bit at sea as what do you mean by "some" of my websites, since I don't have many websites as this is the only one that I've created lately.
Don't forget this atrocity...: http://uk.geocities.com/darsh2525/
:cheesy: as well as the one you posted in this thread :cheesy:
>Although, I'm doing my work in Dreamweaver window but am NOT using the software itself, since all my codes are hand-coded.
I admit the code, looks well organised, but when it comes to web-design me thinks the purdiness of the interface should take priority.
At the moment it looks, well amateurish. Hope you don't mind the crit. Dreamweaver's a good piece of kit. Use it!
Don't forget this atrocity...: http://uk.geocities.com/darsh2525/
:cheesy: as well as the one you posted in this thread :cheesy:
>Although, I'm doing my work in Dreamweaver window but am NOT using the software itself, since all my codes are hand-coded.
I admit the code, looks well organised, but when it comes to web-design me thinks the purdiness of the interface should take priority.
At the moment it looks, well amateurish. Hope you don't mind the crit. Dreamweaver's a good piece of kit. Use it!
*Voted best profile in the world*
•
•
•
•
Originally Posted by iamthwee
>I'm bit at sea as what do you mean by "some" of my websites, since I don't have many websites as this is the only one that I've created lately.
Don't forget this atrocity...: http://uk.geocities.com/darsh2525/
:cheesy: as well as the one you posted in this thread :cheesy:
>Although, I'm doing my work in Dreamweaver window but am NOT using the software itself, since all my codes are hand-coded.
I admit the code, looks well organised, but when it comes to web-design me thinks the purdiness of the interface should take priority.
At the moment it looks, well amateurish. Hope you don't mind the crit. Dreamweaver's a good piece of kit. Use it!
Although, I've used Dreamweaver in the past (though, not as much as I've done the hand-coding, I must admit), I'm trying to make myself comfortable with hand-coding to get a thorough understanding of CSS.
Beside, employers often prefer someone able to make website using "hand-coding" so that's another reason, as why I'm delving more into hand-coding.
Currently, I'm looking into MySQL & PHP, since that's always asked by the employers before even considering my job application.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
![]() |
Similar Threads
- Increase form size beyond screen resolution (C)
- Screen Resolution in KDE (*nix Software)
- Screen Resolution Help! (Windows NT / 2000 / XP)
- Screen Resolution prob (Windows NT / 2000 / XP)
- Screen resolution problems in mandrake/KDE (Window and Desktop Managers)
- For marcus1060: Screen resolution problems in mandrake/KDE (Window and Desktop Managers)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Problem with Dreamweavers FTP
- Next Thread: would like an explanation
| Thread Tools | Search this Thread |
blogging content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server site tables template tips tomtom url wave web website websitedesignreview web_development web_sites






