Back To Website Design Forum

Designing for different resolutions

  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Joined: Jun 20, 2004
  • Posts: 20
  • Loc: UK
  • Status: Offline

Post June 20th, 2004, 9:13 am

Hey there,

I've just completed a website which took me months to make. (You can see it here: http://www.263rdbrownies.4t.com ). I used iFrames for the first time. My computer is set to 1024 x 768 pixels. On my own computer, it displays perfectly and looks rather good =P. However when my friends accessed it, it was completely off centre and not viewable. I there any way which I could make it display the same no matter what resolution it is viewed at? I'll paste the html for the page below.. maybe that will help?

May I thank you in advance for your help!

x


Code: [ Select ]
<HTML>
<HEAD>
<META NAME="Author" CONTENT="">
<META NAME="Generator" CONTENT="Jasc Paint Shop Pro 8">
<TITLE> 263rd Glasgow Brownie Pack</TITLE>
<style type="text/css">
<!--
.mouse
{
position:absolute;
visibility:visible;
top:-50px;
font-size:10px;
font-family:tahoma;
color:pink;
}
body
{
width:100%;
overflow-x:hidden;
overflow-y:scroll;
}
-->
</style>
<style>
<!--
BODY{
scrollbar-face-color:#0033cc;
scrollbar-arrow-color:#ff3300;
scrollbar-track-color:#ffff66;
scrollbar-shadow-color:#0033cc;
scrollbar-3dlight-color:#0033cc;
scrollbar-highlight-color:#0033cc;
scrollbar-darkshadow-Color:#0033cc;
}
-->
</style>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
  document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</HEAD>
<BODY>
<div style="position:absolute;left:0px;top:0px;">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 14px; top: 3px">
  <div align="center"><a href="main.htm" target="inlineframe"><img src="emblem.gif" width="142" height="125" border="0"></a></div>
</div>
<IMG NAME="Image20" SRC="Image3.gif" WIDTH="1014" HEIGHT="750" BORDER="0" USEMAP="#Image2">
 <div id="Layer2" style="position:absolute; width:600px; height:400px; z-index:2; left:270px; top:147px; scrollbar-face-color:#0033cc; scrollbar-highlight-color:#0033cc; scrollbar-3dlight-color:#0033cc; scrollbar-shadow-color:#0033cc; scrollbar-darkshadow-color:#0033cc; scrollbar-track-color:#ffff66; scrollbar-arrow-color:#ff3300"><iframe FRAMEBORDER="0"; FRAMEBORDER-STYLE:"solid"; FRAMEBORDER-COLOR="#ff3300" width=600px height=400px src="main.htm" name="inlineframe" style="position:absolute; left:###px; top:###px" scrolling=auto></iframe>
 </div>
<MAP NAME="Image2">
<AREA SHAPE="rect" COORDS="42,192,131,204" HREF="brownies.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="45,209,109,224" HREF="team.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="43,227,83,239" HREF="news.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="46,244,93,257" HREF="history.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="41,261,106,273" HREF="fun.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="43,278,99,289" HREF="gallery.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="41,293,137,308" HREF="misc.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="40,311,116,322" HREF="gbook.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="40,329,81,339" HREF="links.htm" target="inlineframe">
<AREA SHAPE="rect" COORDS="43,342,100,360" HREF="contact.htm" target="inlineframe">
</MAP>

</div></BODY>
</HTML>
  1. <HTML>
  2. <HEAD>
  3. <META NAME="Author" CONTENT="">
  4. <META NAME="Generator" CONTENT="Jasc Paint Shop Pro 8">
  5. <TITLE> 263rd Glasgow Brownie Pack</TITLE>
  6. <style type="text/css">
  7. <!--
  8. .mouse
  9. {
  10. position:absolute;
  11. visibility:visible;
  12. top:-50px;
  13. font-size:10px;
  14. font-family:tahoma;
  15. color:pink;
  16. }
  17. body
  18. {
  19. width:100%;
  20. overflow-x:hidden;
  21. overflow-y:scroll;
  22. }
  23. -->
  24. </style>
  25. <style>
  26. <!--
  27. BODY{
  28. scrollbar-face-color:#0033cc;
  29. scrollbar-arrow-color:#ff3300;
  30. scrollbar-track-color:#ffff66;
  31. scrollbar-shadow-color:#0033cc;
  32. scrollbar-3dlight-color:#0033cc;
  33. scrollbar-highlight-color:#0033cc;
  34. scrollbar-darkshadow-Color:#0033cc;
  35. }
  36. -->
  37. </style>
  38. <script language="JavaScript">
  39. <!--
  40. function MM_reloadPage(init) { //reloads the window if Nav4 resized
  41.  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
  42.   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  43.  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  44. }
  45. MM_reloadPage(true);
  46. // -->
  47. </script>
  48. </HEAD>
  49. <BODY>
  50. <div style="position:absolute;left:0px;top:0px;">
  51. <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 14px; top: 3px">
  52.   <div align="center"><a href="main.htm" target="inlineframe"><img src="emblem.gif" width="142" height="125" border="0"></a></div>
  53. </div>
  54. <IMG NAME="Image20" SRC="Image3.gif" WIDTH="1014" HEIGHT="750" BORDER="0" USEMAP="#Image2">
  55.  <div id="Layer2" style="position:absolute; width:600px; height:400px; z-index:2; left:270px; top:147px; scrollbar-face-color:#0033cc; scrollbar-highlight-color:#0033cc; scrollbar-3dlight-color:#0033cc; scrollbar-shadow-color:#0033cc; scrollbar-darkshadow-color:#0033cc; scrollbar-track-color:#ffff66; scrollbar-arrow-color:#ff3300"><iframe FRAMEBORDER="0"; FRAMEBORDER-STYLE:"solid"; FRAMEBORDER-COLOR="#ff3300" width=600px height=400px src="main.htm" name="inlineframe" style="position:absolute; left:###px; top:###px" scrolling=auto></iframe>
  56.  </div>
  57. <MAP NAME="Image2">
  58. <AREA SHAPE="rect" COORDS="42,192,131,204" HREF="brownies.htm" target="inlineframe">
  59. <AREA SHAPE="rect" COORDS="45,209,109,224" HREF="team.htm" target="inlineframe">
  60. <AREA SHAPE="rect" COORDS="43,227,83,239" HREF="news.htm" target="inlineframe">
  61. <AREA SHAPE="rect" COORDS="46,244,93,257" HREF="history.htm" target="inlineframe">
  62. <AREA SHAPE="rect" COORDS="41,261,106,273" HREF="fun.htm" target="inlineframe">
  63. <AREA SHAPE="rect" COORDS="43,278,99,289" HREF="gallery.htm" target="inlineframe">
  64. <AREA SHAPE="rect" COORDS="41,293,137,308" HREF="misc.htm" target="inlineframe">
  65. <AREA SHAPE="rect" COORDS="40,311,116,322" HREF="gbook.htm" target="inlineframe">
  66. <AREA SHAPE="rect" COORDS="40,329,81,339" HREF="links.htm" target="inlineframe">
  67. <AREA SHAPE="rect" COORDS="43,342,100,360" HREF="contact.htm" target="inlineframe">
  68. </MAP>
  70. </div></BODY>
  71. </HTML>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 20th, 2004, 9:13 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post June 20th, 2004, 1:24 pm

lilcutie009: Please don't post the same question multiple times.

Once will suffice.

I don't think there's an easy answer to your question. I believe your page needs to be completely restructured to do what you want to do. That worries me, because you noted that it took months to do this.

//subject changed.
- dM
  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Joined: Jun 20, 2004
  • Posts: 20
  • Loc: UK
  • Status: Offline

Post June 20th, 2004, 1:28 pm

sorry, i didnt think my subject was appropriate and people wouldn't no wot I was on about so I changed the heading.. :oops: sorry bout that. What do you think is wrong with my page?

PS Thanks for having a look.

x
  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Joined: Jun 20, 2004
  • Posts: 20
  • Loc: UK
  • Status: Offline

Post June 21st, 2004, 1:22 pm

Helllooo is there anyboy out there who can help me? I'm kind of on a deadline for this one...!
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Feb 04, 2004
  • Posts: 2136
  • Loc: Louisville, Ky
  • Status: Offline

Post June 21st, 2004, 2:11 pm

Well you would probably do a whole lot better if you used tables, and give them percentage widths. For your particular layout it would be worlds better that way.

Also I would get rid of the I-frames, and I think lots of people here would agree. It seems you could make this a lot better by just making a table for the header, and two tables for the main page.

This may or may not make sense to you, but there are some good tutorials at http://www.w3schools.com/


btw, are you using anything program to make this site?
  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Joined: Jun 20, 2004
  • Posts: 20
  • Loc: UK
  • Status: Offline

Post June 21st, 2004, 2:22 pm

okai, thanx.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post June 21st, 2004, 6:11 pm

Here's the basic structure I'd go for...
Code: [ Select ]
DOCTYPE
HEAD
<body>
<div>
  Header</div>
<table>
<tr>
  <td>
   <h1>
     Left Column</h1></td>
  <td>
   <p>Right Column</p></td></tr></table></body></html>
  1. DOCTYPE
  2. HEAD
  3. <body>
  4. <div>
  5.   Header</div>
  6. <table>
  7. <tr>
  8.   <td>
  9.    <h1>
  10.      Left Column</h1></td>
  11.   <td>
  12.    <p>Right Column</p></td></tr></table></body></html>


Instead of absolutely placing everything, let the natural render order put your major containers where you want them. Inside the containers, again, try to let the render order happen and use as many plain HTML tags (h1, h2, p, ol, ul, li) as you can without classing everything.


I think the biggest problem is your hosts advertising.
- dM
  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Joined: Jun 20, 2004
  • Posts: 20
  • Loc: UK
  • Status: Offline

Post June 24th, 2004, 7:31 am

this is all good, and thanx. But, you see, what I wanted to was design my layout in psp and have it open on the same page like i already have with the iframe.... im so confoozled!

:cry:

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.