Design for all resolutions

BrentC · 01-09-2009, 05:47 PM

Hi people,

I developed a menu page that looked ok on my monitor but it was all "scrambled" on a lower resolution monitor.

I used percentages to size and position the elements...

How else should I approach this problem?

Thank you!

BrentC

DonaldG · 01-09-2009, 06:32 PM

Hi Brent

Lets have the URL so that we can look at it and advise.

What size is your monitor?

BrentC · 01-11-2009, 01:29 PM

My URL is [url=http://24.71.42.16/MENU-test8.htm[/URL]

My monitor that I developed the page on is 1280 x 960

Thanks Donald!

Brent

FredT · 01-11-2009, 04:39 PM

It looked ok to me even when I made my browser window really small. Maybe it is a problem with the browser. What browser were you using when it looked scrambled?

**dm01** · 01-11-2009, 04:55 PM

Opera doesn't like it at all.

From Opera's internal Error Console:

Code:

Inline script thread
Error:
name: TypeError
message: Statement on line 109: Cannot convert undefined or null to Object
Backtrace:
  Line 109 of inline#1 script in http://24.71.42.16/MENU-test8.htm
     document.getElementById("flagbanner").style.width=screen.width();
stacktrace: n/a; see 'opera:config#UserPrefs|Exceptions Have Stacktrace'

**sobeit** · 01-11-2009, 05:14 PM

I tested it with chrome and the page did not even show up. It messed up with avant, msie8. safari, opera, and firefox.

My suggestion would be to place the navigation menu inside of a table using pixels instead of percentages. This way it will always stay the same.

ggormsen · 01-15-2009, 10:31 AM

First thing I would do, if I were you, is to open up notepad, copy paste your java script into it, save it as whateveryouwant.js and link to it, then do the same with your css. Name it whateveryouwant.css
That will clean your code up quite a bit.
To fix your problem, I would make a #main and encompass everything into it. It is basically what Sobeit says, but without those nasty little tables.
Question for you, because I do not know: With such a simple page, do you really need the browser fixes in your code?

BrentC · 01-17-2009, 08:08 PM

I re-coded the menus using a horizontal ul (unordered list) and that works on low resolutions that is provided with my editor. I still had to use JavaScript to make adjustments for different browsers.

Can anyone see why the text in the yellow bordered div has more space on the top for paragraph 1 and not on paragraph 2 (It does this on firefox but not IE) ?

Brent

BrentC · 01-20-2009, 01:48 PM

I then tried it on another lo res monitor - the menu bar and paragraph didn't align correctly...What should I try now?

Note: sometimes my server is off line - do try again at :

http://24.71.42.16/MENU-test8.html

Also: How do I enable links like the one above (ie. to make it active on mouseover)? I tried Insert Link but it didn't work.

Thanks,

Brent

BrentC · 01-20-2009, 01:49 PM

Correction: I now see that the link is working once I posted it.

**Jaxo** · 01-20-2009, 06:15 PM

Quote:

Originally Posted by sobeit

My suggestion would be to place the navigation menu inside of a table using pixels instead of percentages. This way it will always stay the same.

Ack! Kill it, kill it! Where is my table-spray?!

Sorry, link not working to test out.

BrentC · 01-21-2009, 10:37 PM

Ok...I'm starting a new page doing just a horizontal menu with drop down menus, all done with TABLES.

The MENU1 drop list positions ok but I can't adjust the top of the MENU2 drop list. If I take the MENU1 list out the MENU2 top is ok. What gives?

BrentC · 01-21-2009, 10:55 PM

Woops...I didn't give the url of the new page...it is

http://24.71.42.16/MENU.html

BrentC · 01-26-2009, 01:24 PM

I have heard from more than one source that we are not to use tables for layout (accept of course to explicitly display info in tabular form). That said, I am having better luck with tables than divs. Check out the two following pages...comments are welcome. The object of course is to display good on different window sizes and resolutions.

http://24.71.42.16/MENU-with-TABLES.html

http://24.71.42.16/MENU-with-DIVS.html

Brent

**Redcore** · 01-26-2009, 05:00 PM

Quote:

Originally Posted by Jaxo

Ack! Kill it, kill it! Where is my table-spray?!

heh, tables aren't dead yet! :P

**dm01** · 01-26-2009, 05:52 PM

Besides the colour issues, which we will address later, your menu isn't lining up again. This can be fixed with a simple margin tweak.

Table layouts are discouraged simply because they are ugly, rigid, and binding. If you want to do something different on your page, you have to completely re-do the layout.

01-09-2009, 05:47 PM	#1 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Design for all resolutions Hi people, I developed a menu page that looked ok on my monitor but it was all "scrambled" on a lower resolution monitor. I used percentages to size and position the elements... How else should I approach this problem? Thank you! BrentC

01-09-2009, 06:32 PM	#2 (permalink)
DonaldG Manager Home Support, Assistant Manager Articles Team Join Date: Aug 2007 Location: Somerset, UK Posts: 10,164 OS: XPsp2 Laptop & Vista Ultimate Desktop My System Blog Entries: 1	Re: Design for all resolutions Hi Brent Lets have the URL so that we can look at it and advise. What size is your monitor? __________________ . Lest we forget... "They shall grow not old, as we that are left grow old; Age shall not weary them, nor the years condemn. At the going down of the sun and in the morning We will remember them." Submit New Articles Here TSF's Photographer's Corner .

01-11-2009, 01:29 PM	#3 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: Design for all resolutions My URL is [url=http://24.71.42.16/MENU-test8.htm[/URL] My monitor that I developed the page on is 1280 x 960 Thanks Donald! Brent

01-11-2009, 04:39 PM	#4 (permalink)
FredT Registered User Join Date: Nov 2007 Posts: 388 OS: Mac OS X 10.5.7 and XP SP2	Re: Design for all resolutions It looked ok to me even when I made my browser window really small. Maybe it is a problem with the browser. What browser were you using when it looked scrambled?

01-11-2009, 04:55 PM	#5 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,433 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Design for all resolutions Opera doesn't like it at all. From Opera's internal Error Console: Code: Inline script thread Error: name: TypeError message: Statement on line 109: Cannot convert undefined or null to Object Backtrace: Line 109 of inline#1 script in http://24.71.42.16/MENU-test8.htm document.getElementById("flagbanner").style.width=screen.width(); stacktrace: n/a; see 'opera:config#UserPrefs\|Exceptions Have Stacktrace' __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

01-11-2009, 05:14 PM	#6 (permalink)
sobeit TSF Enthusiast Join Date: Nov 2007 Location: NEAR Posts: 7,433 OS: windows/linux	Re: Design for all resolutions I tested it with chrome and the page did not even show up. It messed up with avant, msie8. safari, opera, and firefox. My suggestion would be to place the navigation menu inside of a table using pixels instead of percentages. This way it will always stay the same. __________________ there's been global warming since the ice age Last edited by sobeit; 01-11-2009 at 05:16 PM.

01-15-2009, 10:31 AM	#7 (permalink)
ggormsen Registered User Join Date: Nov 2008 Location: Phx AZ USA Posts: 39 OS: XP SP3 / Vista Ult Home x86 My System	Re: Design for all resolutions First thing I would do, if I were you, is to open up notepad, copy paste your java script into it, save it as whateveryouwant.js and link to it, then do the same with your css. Name it whateveryouwant.css That will clean your code up quite a bit. To fix your problem, I would make a #main and encompass everything into it. It is basically what Sobeit says, but without those nasty little tables. Question for you, because I do not know: With such a simple page, do you really need the browser fixes in your code?

01-17-2009, 08:08 PM	#8 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: Design for all resolutions I re-coded the menus using a horizontal ul (unordered list) and that works on low resolutions that is provided with my editor. I still had to use JavaScript to make adjustments for different browsers. Can anyone see why the text in the yellow bordered div has more space on the top for paragraph 1 and not on paragraph 2 (It does this on firefox but not IE) ? Brent

01-20-2009, 01:48 PM	#9 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: More Design for all resolutions I then tried it on another lo res monitor - the menu bar and paragraph didn't align correctly...What should I try now? Note: sometimes my server is off line - do try again at : http://24.71.42.16/MENU-test8.html Also: How do I enable links like the one above (ie. to make it active on mouseover)? I tried Insert Link but it didn't work. Thanks, Brent

01-20-2009, 01:49 PM	#10 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: Design for all resolutions Correction: I now see that the link is working once I posted it.

01-21-2009, 10:37 PM	#12 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: Design for all resolutions Ok...I'm starting a new page doing just a horizontal menu with drop down menus, all done with TABLES. The MENU1 drop list positions ok but I can't adjust the top of the MENU2 drop list. If I take the MENU1 list out the MENU2 top is ok. What gives?

01-21-2009, 10:55 PM	#13 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: Design for all resolutions Woops...I didn't give the url of the new page...it is http://24.71.42.16/MENU.html

01-26-2009, 01:24 PM	#14 (permalink)
BrentC Registered User Join Date: May 2007 Location: British Columbia, Canada Posts: 53 OS: vista	Re: Design for all resolutions I have heard from more than one source that we are not to use tables for layout (accept of course to explicitly display info in tabular form). That said, I am having better luck with tables than divs. Check out the two following pages...comments are welcome. The object of course is to display good on different window sizes and resolutions. http://24.71.42.16/MENU-with-TABLES.html http://24.71.42.16/MENU-with-DIVS.html Brent

01-26-2009, 05:52 PM	#16 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,433 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Design for all resolutions Besides the colour issues, which we will address later, your menu isn't lining up again. This can be fixed with a simple margin tweak. Table layouts are discouraged simply because they are ugly, rigid, and binding. If you want to do something different on your page, you have to completely re-do the layout. __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.