page that fits in all screens

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

page that fits in all screens

Post by sarris »

Hi there,
This is more of a general question.
What is the best way to build a page so that it fits in all possible screens?
Give percentage values in all elements or still design with pixel values?
Designing with percentage values i mist say i had some issues, for example when the page is not maximized or when the user resizes the window the page behaves weirdly.
Any general thoughts and advice over that would be really appreciated
Thanks
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Yes, percentages, but only test it down to 800x600 with the window maximized. It's generally safe to ignore 640x480 users because they're used to scrolling. :-p

There is a min-width property to stop your page from being scaled to the point that things mess up, but it's not supported by IE.
However, if you look into conditional CSS, there IS a solution for IE's lack of a min-width property.
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post by sarris »

ok then...need to ask why this simple code is behaving so weirdly

Code: Select all

<table style="width :80%; height:15%; margin-left:10%">
	<tr>
	<td style="width: 85%"><img style="width: 100%; height:100%" border="0" src="houseonmap.JPG" alt="Spiti.gr" align="top">&nbsp;</td>
	<td style="width: 15%" bgcolor="#FF33CC"></td>
	
</table>

<table style="width:80%; height:85%; border-style:none; margin-left:10%">
	<tr>
    <td height="15%" width="50%" bgcolor="#339966">&nbsp;</td>
    <td bgcolor="#66CC33">&nbsp;</td>
  </tr>
  <tr>
    <td height="3%" bgcolor="#66FFFF">&nbsp;</td>
    <td bgcolor="#66CCFF">&nbsp;</td>
  </tr>
  <tr>
    <td height="40%" bgcolor="#9900FF">&nbsp;</td>
    <td bgcolor="#9966FF">&nbsp;</td>
  </tr>
  <tr>
    <td height="3%" bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFCCFF">&nbsp;</td>
  </tr>
  <tr>
    <td height="19%" bgcolor="#FFCC33">&nbsp;</td>
    <td bgcolor="#FF9933">&nbsp;</td>
  </tr>
</table>
this cant get simpler than that. the problems i get are
A) at Internet Exlporer 7, when i resize the window, at any size just not mazimized, the second cell of the first table

Code: Select all

<td style="width: 15%" bgcolor="#FF33CC"></td>
shirnks so much that you cant even see it.why is that?
B) at mozzila firefox when the page loads the img on the first cell of the first table, gets extended as it gets and occupies all the scree. If i resize the window and maximize it again its all ok. but at the beggining its all weird.

is any of those possible to happen because i am using extended desktop with two screens on my computer? cause i have not tried it to any other computers.

i am putting up the link so you can check out this behavior i am talking about.
http://www.iou.gr/RENTAPAGE_2.htm
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

eewwww tables.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

It's behaving weirdly because that's... Just what tables do.

We have a simple solution for that: don't use tables. You'll find stuff working more the way that it should.
sarris wrote:ok then...need to ask why this simple code is behaving so weirdly

Code: Select all

<table style="width :80%; height:15%; margin-left:10%">
	<tr>
	<td style="width: 85%"><img style="width: 100%; height:100%" border="0" src="houseonmap.JPG" alt="Spiti.gr" align="top">&nbsp;</td>
	<td style="width: 15%" bgcolor="#FF33CC"></td>
	
</table>

<table style="width:80%; height:85%; border-style:none; margin-left:10%">
	<tr>
    <td height="15%" width="50%" bgcolor="#339966">&nbsp;</td>
    <td bgcolor="#66CC33">&nbsp;</td>
  </tr>
  <tr>
    <td height="3%" bgcolor="#66FFFF">&nbsp;</td>
    <td bgcolor="#66CCFF">&nbsp;</td>
  </tr>
  <tr>
    <td height="40%" bgcolor="#9900FF">&nbsp;</td>
    <td bgcolor="#9966FF">&nbsp;</td>
  </tr>
  <tr>
    <td height="3%" bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFCCFF">&nbsp;</td>
  </tr>
  <tr>
    <td height="19%" bgcolor="#FFCC33">&nbsp;</td>
    <td bgcolor="#FF9933">&nbsp;</td>
  </tr>
</table>
this cant get simpler than that. the problems i get are
A) at Internet Exlporer 7, when i resize the window, at any size just not mazimized, the second cell of the first table

Code: Select all

<td style="width: 15%" bgcolor="#FF33CC"></td>
shirnks so much that you cant even see it.why is that?
B) at mozzila firefox when the page loads the img on the first cell of the first table, gets extended as it gets and occupies all the scree. If i resize the window and maximize it again its all ok. but at the beggining its all weird.

is any of those possible to happen because i am using extended desktop with two screens on my computer? cause i have not tried it to any other computers.

i am putting up the link so you can check out this behavior i am talking about.
http://www.iou.gr/RENTAPAGE_2.htm

And... you're giving your table percentage heights? ..... No. Bad, programmer, bad.
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post by sarris »

haha...ok ok.i get it. no tables. could you give me an example on how you would get the same result without tables?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Time for research into CSS. ;)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Psuedo code:

Code: Select all

<BIG DIV>
    <SMALLER DIV>
       <HEADER>stuff</HEADER>
    <SMALLER DIV>
    <MAIN DIV>
        <CONTENT>
        <HEADER>stuff</HEADER>
        <P>stuff</P>
        <P>more stuff</P>
    </MAIN DIV>
    <DIV> footer </DIV>
</BIG DIV>
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post by sarris »

ok...will do. allready reading tutorials talking about how tables are bad and how to replace them with divs and css positioning.
had no clue, i thought tables were ok. anyway
thanks.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

sarris wrote:ok...will do. allready reading tutorials talking about how tables are bad and how to replace them with divs and css positioning.
had no clue, i thought tables were ok. anyway
thanks.
They were okay ten years ago. ;)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

sarris wrote:ok...will do. allready reading tutorials talking about how tables are bad and how to replace them with divs and css positioning.
had no clue, i thought tables were ok. anyway
thanks.
I was completely unaware until the folks here at DevNetwork enlightened me. I'd never go back.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Depending on your layout, you can set a particular section to a fixed width so everything expands and contracts neatly around it. One of my biggest pet peeves with all percentage based fluid layouts is that at enormous resolution (like on one of feyd's 30 inch mega screens) a 15% div width could stretch to over 500 pixels in rendered width. So in many of my designs I will set the navigation section to a fixed width and float the content div to the left with a margin equal to the width of the left fixed width div plus 10-30 pixels. Then no matter the resizing that is done, that fixed width section stays the same width and everything else wraps neatly around it.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Everah wrote:Depending on your layout, you can set a particular section to a fixed width so everything expands and contracts neatly around it. One of my biggest pet peeves with all percentage based fluid layouts is that at enormous resolution (like on one of feyd's 30 inch mega screens) a 15% div width could stretch to over 500 pixels in rendered width. So in many of my designs I will set the navigation section to a fixed width and float the content div to the left with a margin equal to the width of the left fixed width div plus 10-30 pixels. Then no matter the resizing that is done, that fixed width section stays the same width and everything else wraps neatly around it.
Thus, removing percentages from the main layout.

Good when you have a logo as part of an element that could stretch, but shouldn't since your logo does not.
Post Reply