Click to See Complete Forum and Search --> : Monitor Size


scotsdaywalker
09-23-2006, 12:06 PM
I have since found out since setting up my web site, although looks fine on most PC monitors and fits the screen fine.

People using larger monitors, seem to see the page OK, but only in the upper left of the screen, and not fitting full screen size ?.

Is this a script error, or a resolution thingy on the actual PC ?. Still got my "L" plates on, so any feedback would be helpful.

Cheers,

Scots-Daywalker.

WebJoel
09-23-2006, 12:31 PM
Without any posted code to look at or URL to visit, -it could be 'bout anything...
Do you have the site online somewhere that we could have a look? :)

scotsdaywalker
09-23-2006, 12:35 PM
Hi WebJoel,

My web site is www.jsglogistics.pwp.blueyonder.co.uk. And sorry straight away, I know the code is a mess, using frontpage, the lazy mans web editor

WebJoel
09-23-2006, 07:14 PM
For Frontpage, this wasn't too bad. I finally got a chance today to go over it. I am not sure what you are saying though re:
I have since found out since setting up my web site, although looks fine on most PC monitors and fits the screen fine.
People using larger monitors, seem to see the page OK, but only in the upper left of the screen, and not fitting full screen size ?.
Is this a script error, or a resolution thingy on the actual PC ?. Still got my "L" plates on, so any feedback would be helpful. However, I went through your page and cleaned it up a bit. Fixed a few 'warnings' and such, switched to "strict" !doctype and got rid of a lot of superfluous 'non-breaking spaces' that were being used to horizontally space things like images. This can better be done with "positioning". That is to say, an image goes:
<img src="#" style="position:relative; left:50px;"> instead of 75 or 80 "&nbsp;"s. (I used to do it too, but this is a better, shorter way).
I noticed and it WORKS so there's no need to change it, that you have an image named "Wiz_Warroir.gif". -Should you ever discover and decide to change the name of the image to Wiz_WARRIOR.gif, be sure to ammend your code herein or else the images will stop working. But like I said, -it works albeit, mispelled(?) Heck, -I did a personal site about my vacation in the "Carribean" and well, it is spelled "Caribbean"... Did I change the web page? The text, yes... But the IMAGES? -Not yet... :rolleyes:
My thoughts on the matter:
http://viral.lycos.co.uk/attachments/3561/Reading_Test.jpg

But anyway... I spent about an hour just tweaking some things and have your site looking a bit better. Looks the same in IE as it does in Firefox, and no warnings/errors upon validation. It shows nicely upon 1024-wide and wider (centers). It may produce a scrollbar on 800-wide. To get around that I'd have to put that little text-box thingie (that I gave a left-double and single-pixel bottom white margin, btw) a new position, maybe below the golden navigation buttons(?) Or make that be not 169-px wide, but maybe 140-px wide and allow any text to 'wrap' to the next line (vis when hovering over the GLOBE image "Search the Internet", for instance, would line-wrap to another line..)
Check this out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Scots - Daywalker Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

</script>
<style type="text/css">
html, body {border:0; padding:0; margin:0;}/* re-sets IE to "zero" for these values */
body {background-color:#000;}
.link_images {margin-right:14px;}/* this spaces your gold image link images w/out
having to use multiple non-breaking spaces */
.last_link_images {margin-right:0;}/* takes away margin-right space from last gold image navigation link. Not needed. */
</style>

</head>

<body>
<div style="position:relative; width:860px; margin:23px auto 50px auto; /*border:1px dotted yellow;*/">
<!-- NEXT:, CONTENT -->
<div style="position:relative; width:665px; height:auto; padding-bottom:10px; margin:0 auto 0 186px; /*border:4px solid white;*/">

<!-- next: onMouseOver text description box, upper left-hand corner -->
<div id='description' style="position:absolute; left:-190px; height:37px; width:169px; font-size:18pt; font-family:'times';color:#FFFFFb; background-color:#00000; padding:3px; text-align:center; border-left:6px double white; border-bottom:1px solid white;"></div>

<!-- next: navigation buttons -->
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/home.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'You Are Here'" onmouseout="document.getElementById('description').innerHTML = ''" />
<a href="clips.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/clips.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Video Clips'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="audio.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/audio.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Audio Tapes'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="pictures.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/pictures.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Toons'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="games.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/games.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Games'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="email.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/email.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Email Me'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="links.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/links.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Links'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="tools.html">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/tools.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Tools'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="http://scotsdaywalker.proboards47.com/">
<img alt="" class="link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/forum.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Forum'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a>
<a href="routes.html">
<img alt="" class="last_link_images" src='http://www.jsglogistics.pwp.blueyonder.co.uk/buttons/globe.jpg' width='50' height='50' onmouseover="document.getElementById('description').innerHTML = 'Routes'" onmouseout="document.getElementById('description').innerHTML = ''" border="0" /></a><br /><br />

<div style="position:relative; left:10px; width:600px; margin:10px auto;">
<img alt="" border="0" src="http://www.jsglogistics.pwp.blueyonder.co.uk/wiz_warroir.gif" width="53" height="84" />
<img alt="Scots - Daywalker" title="Scots - Daywalker" border="0" src="http://www.jsglogistics.pwp.blueyonder.co.uk/scotsdaywalker2.gif" width="463" height="75" />
<img alt="" border="0" src="http://www.jsglogistics.pwp.blueyonder.co.uk/wiz_warroir.gif" width="53" height="84" />
</div>

<div style="position:relative; left:61px; width:600px; margin:5px auto 0 auto;">
<a href="http://www.jsglogistics.pwp.blueyonder.co.uk/live_chat.html">
<img alt="" title="Live chat" border="0" src="http://www.jsglogistics.pwp.blueyonder.co.uk/live_chat_icon.jpg" style="width:479px; height:41px" />
</a>
</div>

<div style="position:relative; top:1px; width:202px; /*border:1px dotted yellow;*/ height:30px; margin:5px auto;">
<img alt="Open 24 Hours" title="Open 24 Hours" src="http://www.jsglogistics.pwp.blueyonder.co.uk/enter_004.gif" style="width:200px;" />
</div>

<div style="position:relative; left:1px; width:45px; height:42px; margin:20px auto 0 auto; /*border:1px solid yellow;*/">
<a href="google.html">
<img alt="Search The Web" title="Search the Web: Google" src='http://www.jsglogistics.pwp.blueyonder.co.uk/earth-globe.gif' style="width:45px; height:42px; border:0 none;" onmouseover="document.getElementById('description').innerHTML = 'Search the Web'" onmouseout="document.getElementById('description').innerHTML = ''" />
</a>
</div>

<div style="position:relative; left:90px; top:23px; margin:0 auto;">
<img alt="Over 18s ONLY on this site!!" border="0" src="http://www.jsglogistics.pwp.blueyonder.co.uk/Over_18.gif" style="border:0; width:498px; height:52px;" />
</div>

<p title="And if you're under the age of 20 years, you must be accompanied by an adult." style="position:relative; left:20px; top:10px; width:600px; font-family:'comic sans ms', verdana, arial, serif; color:#fff; margin:10px auto;">And if you're under the age of 20 years, you must be accompanied by an adult.</p><a href="google.html"></a>
</div><!-- end content -->
</div><!-- WRAPPER for entire page & centers it -->
</body>
</html>