Screen resolution problems

@joecriticMay 23.2004

Hey,

I developed my website on a computer with a 1024X768 screen resolution, then I realized that some of the pages weren’t appearing how I’d like them to on computers with 800X600.

All I’d like to do is have a horizontal scroll bar appear so that users can scroll left to right, what’s happening now is that all the content is appearing at the bottom of the page below a sidebar. One of the places the problem is appearing is at this page: ~~[URL=http://www.joecritic.com/previewsntrailers/]~~http://www.joecritic.com/previewsntrailers/[/URL]

Can anyone give me any advice?

Thanks in advance!

to post a comment

HTML

11 Comments(s) _↴

@VladdyMay 23.2004 — #General goal is to develop your site for the internet (i.e. any device that can access it, some of them do not have "resultion" at all) not some monitor.

First step on that path is semantic mark-up for your content.

@joecriticauthorMay 23.2004 — #I'm sorry, I have no idea what that means. Could you tell me anything more specific or in dumb person's terms?

@VladdyMay 23.2004 — #http://www.w3.org/MarkUp/Guide/

@joecriticauthorMay 23.2004 — #Sorry to be rude, but I have no idea whether you're trying to help me, or trying to mock me. I don't need a beginner's guide to HTML, I think the problem I'm having is a more advanced problem. I would guess it's coming from something in the scripting, but I was posting here to see if there was a quick fix, something to force the horizontal scroll bar to appear.

@VladdyMay 23.2004 — #Looking at your code you DO need a beginners guide to HTML.

<font> has been deprecated last century

<table>s should be used for tabular data not layout.

Presentation is accompished using CSS and takes into account user font size setting and browser window width so that horizontal scroll bar is avoided as much as possible.

P.S. As far as "quick fix" goes... just a general observation - nothing personal... why people never have time to do things right, but find plenty of it to keep fixing them. ?

@spufiMay 24.2004 — #Just to back up Vladdy. I went and looked at the code and thought, "You want me to weed through [I]that[/I] mess?" Ugh. If given a non-table version, then yeah, I could weed through the code much easier and answer it within a couple of minutes tops. If you define the formatting via an externally defined CSS file, I doubt it would take even a minute.

I just looked at the site in 800X600 and everything seems ok, but maybe you fixed it.

@joecriticauthorMay 24.2004 — #Yeah, I used NetMechanic to fix up the little HTML problems, and then I resized so it would fit into a 800X600 window. I understand what you guys are saying, but I just don't have the HTML knowledge to do what has to be done to fix it, and I don't have the time to start all over.

Thanks for the help anyway.

@smercerMay 24.2004 — #Hi all

I find that a Javascript to determine what resolution the user is using is always best for when you have problems like that. here is some steps you can take to implement this:

1) in the directory of your HTML files right click on a blank area and go to new > text document. then rename to "CSS_By_res.js", answer yes to any questions

2) open up "CSS_By_res.js" with notepad (press shift and right click when the file is highlighted and choose "open with..." > "choose program."

3) copy and paste the following code in to "CSS_By_res.js":

[COLOR=limegreen]

/* this will make the page adjust the CSS style sheet according to what the user has

set their screen resolution

this one will use the 640.css file if screen resolution is 640 X 480 */

if (screen.width == 640) {

document.write('<link rel="stylesheet" type="text/css" href="640.css">');

}

/* this one will use the 800.css file if screen resolution is 800 X 600 */

if (screen.width == 800) {

document.write('<link rel="stylesheet" type="text/css" href="800.css">');

}

/* this one will use the 1280.css file if screen resolution is 1280 X 1024 */

if (screen.width == 1280) {

document.write('<link rel="stylesheet" type="text/css" href="1280.css">');

}

[/COLOR]

4) in your HTML documents in between the <head> and </head> tags copy and paste this:

[COLOR=limegreen]

<script src="CSS_By_res.js"></script>

[/COLOR]

5) make your adjustments to your CSS file names and their content. My advice is to get one css right and then copy, paste and rename the filenames and then adjust the things like padding, font size etc.

@VladdyMay 24.2004 — #Yeah.... right....

1. What is the relation between the screen.width and available width of the browser window?

2. What happens when javascript is disabled?

3. What happens when user does not have one of those screen widths.

Just design your CSS so that it does not care about the size of the browser window. :rolleyes:

@philawebMay 24.2004 — #[i]Originally posted by Vladdy [/i]

[B]P.S. As far as "quick fix" goes... just a general observation - nothing personal... why people never have time to do things right, but find plenty of it to keep fixing them.[/B][/QUOTE]

[B]Vladdy[/B],

Wow, that's really profound. ?

I'll rephrase to: "Why does people never have time to do things right, but find plenty of time trying to fix them".

Then I'll print it, frame it, and give it to my boss for his upcoming birthday with a bottle of vodka. Should make him think...

BTW... [B]I[/B]'m on the lookout for a new job. ?

@smercerMay 25.2004 — #[b] What is the relation between the screen.width and available width of the browser window? [/B][/QUOTE]

you could always put in a script to maximise the window, so that would not be an issue.

[b]What happens when javascript is disabled?[/B][/QUOTE]

Yes that is a tricky one. Is it possible to do this?:

<noscript>

<link rel="stylesheet" type="text/css" href="800.css">

</noscript>

I tried it but, no it does not work. is there a way around this?

[B]What happens when user does not have one of those screen widths.[/B][/QUOTE]

I am still working on the CSS and the JavaScript on my site so that is not an issue. If you want the code, you can always copy and paste the code but change the CSS file to suit yourself.

Also in #HTML _↴

Blinking red and green colors in HTML.mask out nav for print???Div tags as targets for hyperlinks

Success!

Help @joecritic spread the word by sharing this article on Twitter...

Tweet This

Screen resolution problems

11 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Screen resolution problems

11 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #HTML _↴