Hi All,
I wanted to know if a way exists to make my web pages fit the screen resolution of everyones computers.
It looks OK at 1024X768 but at 800X600 users have to scroll left and right, and on computers with resolutions higher than 1024X768 it does not fill the screen.
I am new to HTML so be easy on me. :-)
I am experimenting with notepad, homesite, and dreamweaver. I have tried Frontpage but if server extensions are not set right it is a pain.
I can bump up points if this is a tough one to answer.
Matt
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
if you are going and using tables, you can set the table width to percentages, like 100%, 50%, etc
then you go ahead and set the td widths in percents, or you can set them to absolute pixel widths like "80" "150", etc to make sure that everything shows up like you want it to
you set something as <td witdh="100"> if you want it to show up as 100 pixels all the time, but <td width="100%"> if you want it to take up the whole page and adjust itself
>>... set the elements widths using percentages
>>...you can set the table width to percentages
i would use nested tables with the outer table being a fixed width
<table id="myTable" border="0" width="778" cellspacing="0" cellpadding="0">
<tr>
<td>
and on the inner table(s) use percentages
<table border="0" width="80%" cellspacing="0" cellpadding="0">
the reason for this is that when you specify a percentage value for teh table width and teh user resizes the windo the table will adjust accordingly, sometimes screwing up the page look/layout, however with a fixed width outer table if teh page is resized the layout remains fixed
as for adjusting teh table for different resolutions try
<script>
window.onload=setWidth;
function setWidth(){
document.getElementById('m
}
</script>
778 will cause horizontle scroller to show.
I use 760.
Make sure your image all together do not = more then 760 wide if there are any side by side and always account for cell padding and cell spacing when looking at you overall width and images that are side by side.
Here are a few different styles and this is limited. there are tons of ways you can do it. This is in it's simpliest form.
1)
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Text</td>
</tr>
</table>
2)
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="left" valign="top">
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Text</td>
</tr>
</table>
</td>
</tr>
</table>
3)
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="left" valign="top">
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img name="TheImageName" src="" width="600" height="1" border="0"></td>
<td><img name="TheImageName" src="" width="160" height="1" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
4)
<table width="760" border="0" align="center" cellpadding="0" cellspacing="8">
<tr>
<td><img name="TheImageName" src="" width="600" height="1" border="0"></td>
<td><img name="TheImageName" src="" width="148" height="1" border="0"></td>
</tr>
</table>
Resolution Independent Design: use percentages not fixed widths
A good way to ensure that sites will work for as many resolutions as possible is to design sites to be resolution-independent, i.e. not to specify widths in absolute units (e.g. pixels) unless a width is that of a fixed-width object, e.g. a GIF, JPG, or PNG image. Also, it is important to note that users can normally resize the browser window, hence no particular size should be assumed.
http://eserver.org/courses
don't forget that if you want the same look you'll have also to resize the font.
take a look at this (wait till it gets loaded):
http://www.elpezmandala.co
1) If you created the page by slicing up a graphic, using percentages will just make it completely fall apart.
2) You don't control what the user does. You can't stop them from resizing the browser.
3) No matter what you do, or how well you design for flexibility, at some point the page will break. There is nothing you can do about it. You can control how badly it breaks, but you can't stop it. Nor can you stop there from being gaps/white space if somebody decides to view the page at 1280x1024 (unless you design it for that size, in which case 99% of the world will hate you).
Basically pick a size and stick with it. If you're new, don't get too wrapped up in creating a flexible design -- just find something you can understand, learn HTML and CSS, and THEN see how you'd make it more flexible.
Let's see... where to start...
First of all, your frameset code is all wrong. Second, all you have is GRAPHICS. Try some text. Any text. Go ahead, add some. Preferably a lot. Add a few more pages while you're at it, and try to use the same format. Third, try it in Mozilla, and resize the browser a few times -- you get this weird text along the edge that is completely unreadable.
Your design is fine -- for a throwaway entry page. It has no content.
"frameset code is all wrong" -- no frames in design, just one big evolving frame in order to hide scrolls (when a made this i didn't know another way to hide IE vertical scroll ;-)
"all you have is GRAPHICS" -- false, move over the left buttons. the waving chars are text and if you click there some sample text is loaded. Text is resized
"try it in Mozilla, and resize the browser a few times -- you get this weird text along the edge that is completely unreadable" -- I see that weird text only till the resize function is called. Just a moment. Of course my code can also be buggy, but I think that is better to fix it than saying that what i've done can not be done.
"when I resize the browser, the graphic gets all distorted" -- It was the intention of this design., I also made another which kept aspect ratio and also resized background images and made fit all content. Resizing came with javascript in order to keep aspect ratio (vertical sizes have to be proportional to horitzontal sizes) http://elpezmandala.com/le
Limitations in designing at any window size i've found:
- Text does not accept decimal sizes (but you can aproximate a lot the size without decimals)
- Resize function is called after browser has redrawn the resized content
- You cannot force the text to ignore user increased or decreased
Keep in mind that users resize the window very few times, so an ugly resizing is not a disadvantage if final design gets ok.
keep in mind too that also with fixed sizes you cannot make a design that looks exactly the same in all browers if it has text.
webwoman, I've given two examples. Please, give an example of resizing design that gets broken and cannot be fixed.
They all do. This one will -- set your text size to largest and make the window small. It's HOW it breaks. If it's done CORRECTLY all that happens is you get scroll bars at smaller window sizes and text reflows. If it's done incorrectly (usually when you take code generated from a graphics program and change from fixed to %) you get huge gaps in the graphics. You CAN fix the gaps. But it takes knowing how tables are constructed and going in and HAND CODING them.
As for your page... again, it has no content. None of them do. And you don't set up frames and then not give them content (blank src). Totally wrong. And it's unnecessary. Why don't you want scrollbars when they're needed? If the window is too small, NOBODY can even SEE your stuff.
Why iframes? Why not just create a new page with the content integrated into the actual design?
All your tricks do is make the page hard to use, hard to read, and impossible to print out. For some sites, you might want that. For what I do, it would get me fired. Most commercial sites don't want those things.
And of course text sizes can't be decimals -- this isn't print. You don't have partial pixels.
mld4165,
I've reread your question: "I am new to HTML so be easy on me. :-)". I'm not being easy. webwoman says that there's no way to do what you want. I say this is wrong.
If you are new to HTML I recomend you to hand code everything and to learn javascript. Graphical editors can only do what they are programmed to do. Use an advanced text editor like the comercial ultraedit or an open source alternative.
I think that points should be for the one who give you a solution which fit your needs.
---------------------
webwoman,
"You CAN fix the gaps. But it takes knowing how tables are constructed and going in and HAND CODING them." -- I allways hand code
"Why iframes? Why not just create a new page with the content integrated into the actual design?" -- not from this matter
"Why don't you want scrollbars when they're needed?" -- not from this matter
...I won't continue with this baby war
You can use JavaScript to determine the users screen resolution. After you determine the resolution, you can display different code according to their resolution. For Example:
<script language="JavaScript">
<!--
if (screen.width >= 1200)
//Write code to accommodate resolution > 1200.
else if ((screen.width >= 1024) && (screen.width < 1200))
//Write code to accommodate resolution from 1024 to < 1200.
else if ((screen.width >= 800) && (screen.width < 1024))
//Write code to accommodate resolution from 800 to < 1024.
else if (screen.width < 800)
//Write code to accommodate resolution < 800.
//-->
</script>
Hope this helps.
Well, you are. ;-) The screen size is NOT the browser window size. I don't have my browser window full screen either, so my browser window and screen size aren't even remotely the same thing.
And besides, I really don't want to have to have multiple versions of every single page. That's fine if you have 5 pages, but if you have 5,000 it's totally unworkable.
We're friendly -- but we're also realists and many of us maintain very large sites. Like I said, YOU might want 2 or 3 different versions of your 20 page site, but I don't have time to maintain 2 or 3 versions of my many thousands of pages, nor do I want to worry about what resolution the user has, or what size they make their browser window, or whether they have a browser that will handle the javascript I've set up.
That's why you design your site to be FLEXIBLE, not so rigid that if somebody has a bigger/smaller monitor everything falls apart.
Business Accounts
Answer for Membership
by: CrYpTiC_MauleRPosted on 2004-06-25 at 05:52:13ID: 11397906
Make your layout according to 800x600 and set the elements widths using percentages. So larger screensize will make the element expant to the proper percentage.
Regards,
Nick