Website view on different Screen Resolution ???

j4mes_bond25 · May 11, 2006

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:

/* 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;
}

ISDProductions · May 13, 2006

google search "liquid CSS sites"

StephanieCordray · May 13, 2006

You've put widths in your css that are greater than 800px. Your header alone is 830px. As long as you have absolute sizes for the images, it's not going to show correctly on an 800 x 600 screen.

j4mes_bond25 · May 13, 2006

It seems to be working perfectly well after changing all my "px" to "%".

I've checked it on 800 & 1024 resolution but haven't had a chance checking it on anything HIGHER than 1024 resolution.

johnnytv · May 24, 2006

This is just a personal preference but I wouldn't use %, I'd use specified pixel sizes, based on the resolution you're designing for, so if you want it visible on 800x600, don't make any divs, images etc wider than say 780px

j4mes_bond25 · May 24, 2006

johnnytv said:
This is just a personal preference but I wouldn't use %, I'd use specified pixel sizes, based on the resolution you're designing for, so if you want it visible on 800x600, don't make any divs, images etc wider than say 780px

In that case, wouldn't it display with excessive spaces AROUND the image itself or whatever the element is (UL or content area OR whatever)

ISDProductions · May 24, 2006

it could, but say someone is viewing your site with a 1600 x 1200 (or higher), then there will be excessive space inside your content, or you will get a smushed effect. With the advent of wide screen displays, there is no perfect solution, but with a predetermined px instead of % you will know exactly how your page will look under any resolution.

johnnytv · May 24, 2006

j4mes_bond25 said:
In that case, wouldn't it display with excessive spaces AROUND the image itself or whatever the element is (UL or content area OR whatever)

If aligned to the left you'll just have space to the right of the content.

If you want to center the page, put it inside a container div that is your maximum screen width wide (say it was 800px use 790px to ensure a horizontal scrollbar isn't displayed) and center the container.

See my website below for what I mean, though this was designed for 1024x768

j4mes_bond25 · May 24, 2006

johnnytv said:
If aligned to the left you'll just have space to the right of the content.

If you want to center the page, put it inside a container div that is your maximum screen width wide (say it was 800px use 790px to ensure a horizontal scrollbar isn't displayed) and center the container.

See my website below for what I mean, though this was designed for 1024x768

Interesting website. I'm building my own website presently and always wonder as how exactly people design background images and then "split" it into "header.jpg", "content.jpg" and "footer.jpg" but when seen together making it look like one single image, as in http://www.cambridgefruitcompany.com/.

Does the text itself need to have some sort of z-index to flow ON TOP of these images ???

johnnytv · May 24, 2006

Nope I never use z-indexing, it can be unreliable.

It's just done through CSS, setting an image as the background for a div and then positioning the text within it.

If you look at some CSS tutorials (I'm also posting an article about this on my site tomorrow) you'll see what I mean, it's amazing what you can achieve

j4mes_bond25 · May 24, 2006

johnnytv said:
Nope I never use z-indexing, it can be unreliable.

It's just done through CSS, setting an image as the background for a div and then positioning the text within it.

If you look at some CSS tutorials (I'm also posting an article about this on my site tomorrow) you'll see what I mean, it's amazing what you can achieve

While I started to feel little agitated UNTIL I could've known the way such a layout was possible, I continued to look into the website AGAIN & AGAIN & realised that it was done using the "background-image" property of CSS.

In fact, CSS is fan-bloody-tastic, to be honest & I got a good grip of it within just 2-3 weeks while I really got bogged into it & created a basic CSS & XHTML based website, while I couldn't get the job & while sitting at home doing nothing much, thought to built my own portfolio by building website based on common interests.

I'm currently delving into PHP & MySQL. Sadly, got little stuck with "Form Validation", at the moment, so see how I manage to sort this problem out.

Just one question, which is still bugging me is HOW EXACTLY you "chopped" the COMPLETE image. Did you simply used the "crop" function on some image editing software & "splitted" the entire image into 3 parts i.e. header.jpg, content.jpg and footer.jpg

johnnytv · May 24, 2006

Nope, didn't chop the image, created each part separately. Did the header then the links are a div positioned in the correct place on the image.

The content uses a single strip that's a couple of pixels high by the required width and then repeated (if you look at the different pages you can see some have larger heights than others) Then the footer was again created separatley.

To be honest I hate this current fad of creating a web site look in photoshop and then cropping it up into the necessary parts, many times it doesn't allow for flexibility within a layout, again just my opinion though

Keep up with the php/mysql it's rewarding once you get your head around it, and form validation (comprehensively using php) is one of the best things you can utilise when creating websites especially in contact forms - DON'T USE JAVASCRIPT FOR THIS! Look up functions such as ereg which can really help you with this

j4mes_bond25 · May 25, 2006

johnnytv said:
Nope, didn't chop the image, created each part separately. Did the header then the links are a div positioned in the correct place on the image.

The content uses a single strip that's a couple of pixels high by the required width and then repeated (if you look at the different pages you can see some have larger heights than others) Then the footer was again created separatley.

To be honest I hate this current fad of creating a web site look in photoshop and then cropping it up into the necessary parts, many times it doesn't allow for flexibility within a layout, again just my opinion though

Keep up with the php/mysql it's rewarding once you get your head around it, and form validation (comprehensively using php) is one of the best things you can utilise when creating websites especially in contact forms - DON'T USE JAVASCRIPT FOR THIS! Look up functions such as ereg which can really help you with this

Thanks for the enlightenment.

I certainly couldn't be bothered with JavaScript, at least, not at this stage, until laying my hands on PHP properly.

Basically, I've tried typing all the validated codes for "name" (such as characters ONLY allowed & NO numbers, etc.), "e-mail" (such as "@" and "dot" HAS TO BE there), telephone number (such as ONLY numbers to be allowed, etc.) by going through 3 different PHP books.

I've recently looked into some PHP book having "ereg" mentioned in it, but since you said it's certainly worth looking into it, I'll be delving into it today. See how far I go, before getting stuck again

Once I feel comfortable with PHP (God knows, when that would happen

I'll be exploring ASP followed by JavaScript. See how it goes & more importantly, whether my skills could possibly satisfy some employer's whim, so can get the job.

Life's certainly a B.IT.CH, especially if you happen to be a graduate WITHOUT a "commercial experience".

johnnytv · May 26, 2006

Yup. I'm just doing web design part time at the moment, really want to work full time on it as I enjoy being my own boss but it's getting a constant supply of clients to allow me to survive off the income.

I learnt ASP then PHP, they're quite similar, though to be honest I never use ASP anymore, PHP is much more widely used and easier to do most things.

By all means learn ASP though, it's a useful skill to have. Sadly so is Javascript, though I personally detest it and never use it in any of my sites. I feel it's mostly used for pointless things on sites which can be achieved better using CSS or server side scripting. Plus what is the point of using a technology that a user has the ability to switch off if they so wish? Rant over lol

j4mes_bond25 · May 26, 2006

johnnytv said:
Yup. I'm just doing web design part time at the moment, really want to work full time on it as I enjoy being my own boss but it's getting a constant supply of clients to allow me to survive off the income.

I learnt ASP then PHP, they're quite similar, though to be honest I never use ASP anymore, PHP is much more widely used and easier to do most things.

By all means learn ASP though, it's a useful skill to have. Sadly so is Javascript, though I personally detest it and never use it in any of my sites. I feel it's mostly used for pointless things on sites which can be achieved better using CSS or server side scripting. Plus what is the point of using a technology that a user has the ability to switch off if they so wish? Rant over lol

Well, who wouldn't fancy the idea of being their own boss & course, so do I. But in my case, my not-so advanced skills are being a bit of a set-back to get clients & course, the lack of portfolio adds to the misery.

Hopefully, once I lay my hands on PHP properly, I should be able to see myself in much better position.

Website view on different Screen Resolution ???

j4mes_bond25

New Member

ISDProductions

New Member

StephanieCordray

New Member

j4mes_bond25

New Member

johnnytv

New Member

j4mes_bond25

New Member

ISDProductions

New Member

johnnytv

New Member

j4mes_bond25

New Member

johnnytv

New Member

j4mes_bond25

New Member

johnnytv

New Member

j4mes_bond25

New Member

johnnytv

New Member

j4mes_bond25

New Member