page that fits in all screens
Moderator: General Moderators
page that fits in all screens
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
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
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.
ok then...need to ask why this simple code is behaving so weirdly
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 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
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"> </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"> </td>
<td bgcolor="#66CC33"> </td>
</tr>
<tr>
<td height="3%" bgcolor="#66FFFF"> </td>
<td bgcolor="#66CCFF"> </td>
</tr>
<tr>
<td height="40%" bgcolor="#9900FF"> </td>
<td bgcolor="#9966FF"> </td>
</tr>
<tr>
<td height="3%" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFCCFF"> </td>
</tr>
<tr>
<td height="19%" bgcolor="#FFCC33"> </td>
<td bgcolor="#FF9933"> </td>
</tr>
</table>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>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
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
And... you're giving your table percentage heights? ..... No. Bad, programmer, bad.
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
this cant get simpler than that. the problems i get areCode: 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"> </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"> </td> <td bgcolor="#66CC33"> </td> </tr> <tr> <td height="3%" bgcolor="#66FFFF"> </td> <td bgcolor="#66CCFF"> </td> </tr> <tr> <td height="40%" bgcolor="#9900FF"> </td> <td bgcolor="#9966FF"> </td> </tr> <tr> <td height="3%" bgcolor="#FFFFFF"> </td> <td bgcolor="#FFCCFF"> </td> </tr> <tr> <td height="19%" bgcolor="#FFCC33"> </td> <td bgcolor="#FF9933"> </td> </tr> </table>
A) at Internet Exlporer 7, when i resize the window, at any size just not mazimized, the second cell of the first tableshirnks so much that you cant even see it.why is that?Code: Select all
<td style="width: 15%" bgcolor="#FF33CC"></td>
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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>- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Thus, removing percentages from the main layout.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.
Good when you have a logo as part of an element that could stretch, but shouldn't since your logo does not.