Forum Moderators: mack
On my website, <snip> I use iframes. I thought for the heck of it I would change my screen resolution from 1024x768 to 800x600 and look at my site, and it the positioning was really screwed up. I searched around the internet and I came to the conclusion that frames aren't the best to use so that all resolutions can see them correctly - right?
So, I was wondering if anyone else had any suggestions on what else I should use - any good websites, etc? I've heard of tables and such, but I want to make sure that they will look good on all resolutions. Or if there is a certain coding I can use to make frames look good on all resolutions, that would be great.
Thanks!
[edited by: engine at 8:40 pm (utc) on Nov. 11, 2003]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]
I did find this but im not sure how to use it and below this is a few other things i found that might help. If you find what really works please let me know.
Sniff the visitors screen resolution with this .js
*/
if (screen.width==800¦¦screen.height==600) //if 800x600
window.location.replace("index800.htm")
else if (screen.width==640¦¦screen.height==480) //if 640x480
window.location.replace("index800.htm")
<end>
1. replace index800.htm with your html
2. The default loads the 1024x768 or higher rez page
OR -----------------------------
Make several sizes of the same image: sizes appropriate to the various screen widths you're concerned about. Then try this script:
screen_width = screen.width;
if (screen_width > 1000) {
document.write<img border='0' src='480px_filler.jpg' width='480' height='160' alt=''>");
}
else if (screen_width > 800 ) {
document.write<img border='0' src='352px_filler.jpg' width='352' height='160' alt=''>");
}
else if (screen_width > 600 ) {
document.write<img border='0' src='224px_filler.jpg' width='224' height='160' alt=''>");
}
I fed the script externally and had <script type="text/javascript" src=""></script> where I wanted the image. BUT I also include a <noscript> tag with the image from the > 600 wide screen in case javascript was disabled.
Oh, and the order of the screen widths I the script is crucial. You must go wider to smaller.
OR
<script language="JavaScript" type="text/javascript">
winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
document.write("Width: " + winWidth + "<br>Height: " + winHeight);
</script>
[edited by: amiyy4u at 6:43 pm (utc) on Nov. 13, 2003]
I did find this but im not sure how to use it and below this is a few other things i found that might help. If you find what really works please let me know.
Sniff the visitors screen resolution with this .js
*/
if (screen.width==800¦¦screen.height==600) //if 800x600
window.location.replace("index800.htm")
else if (screen.width==640¦¦screen.height==480) //if 640x480
window.location.replace("index800.htm")
<end>
1. replace index800.htm with your html
2. The default loads the 1024x768 or higher rez page
OR ----------------
Make several sizes of the same image: sizes appropriate to the various screen widths you're concerned about. Then try this script:
screen_width = screen.width;
if (screen_width > 1000) {
document.write<img border='0' src='480px_filler.jpg' width='480' height='160' alt=''>");
}
else if (screen_width > 800 ) {
document.write<img border='0' src='352px_filler.jpg' width='352' height='160' alt=''>");
}
else if (screen_width > 600 ) {
document.write<img border='0' src='224px_filler.jpg' width='224' height='160' alt=''>");
}
I fed the script externally and had <script type="text/javascript" src=""></script> where I wanted the image. BUT I also include a <noscript> tag with the image from the > 600 wide screen in case javascript was disabled.
Oh, and the order of the screen widths I the script is crucial. You must go wider to smaller.
OR
<script language="JavaScript" type="text/javascript">
winWidth=document.all?document.body.clientWidth:window.innerWidth;
winHeight=document.all?document.body.clientHeight:window.innerHeight;
document.write("Width: " + winWidth + "<br>Height: " + winHeight);
</script>
People used to do it for browsers (some still do) and serve the page differently depending on which browser the user had. It's much easier, I think, to code a page that shows up the same in all configs.
Also, I've never been a fan of frames (even iframes), so I use either tables or CSS for my layouts. I'm going to describe the following using tables though (but you don't want to make a habit of using tables for layout for many reasons which I won't go into here).
(when using tables, I find it very useful to have a WYSIWIG editor)
In terms of layouts, you can have either a:
1. Fixed width: i.e. EVERYTHING goes into a MOTHER/MAIN/SUPER table that is fixed in width. I usually design for 800x600 when going fixed width and the table is usually around 768px wide. Sometimes I use 'nested' tables (tables within tables) for the layout, but that's really frowned upon. You can get many different layout effects by playing with rowspan and colspan.
2. Liquid layout, i.e. the design expands/contracts depending on the size of the window (resolution). This has been a little harder to achieve. The MAIN table usually has a width of 100 [b]percent[/p]. However, there may be many elements (such as a side navigation) which will still remain fixed width (you put them in their own sub-tables), while the main 'content areas' are usually expandable.
For your particular case, it's tough to say what you should do since I don't really have an idea of what you want to accomplish with the frames.
