Page 1 of 1

page that fits in all screens

Posted: Wed May 30, 2007 10:23 am
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

Posted: Wed May 30, 2007 10:26 am
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.

Posted: Wed May 30, 2007 11:08 am
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

Posted: Wed May 30, 2007 11:17 am
by feyd
eewwww tables.

Posted: Wed May 30, 2007 11:17 am
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.

Posted: Wed May 30, 2007 11:24 am
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?

Posted: Wed May 30, 2007 11:25 am
by feyd
Time for research into CSS. ;)

Posted: Wed May 30, 2007 11:30 am
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>

Posted: Wed May 30, 2007 11:33 am
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.

Posted: Wed May 30, 2007 11:34 am
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. ;)

Posted: Wed May 30, 2007 11:35 am
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.

Posted: Wed May 30, 2007 4:15 pm
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.

Posted: Wed May 30, 2007 4:22 pm
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.