PDA

View Full Version : Why does page layout appear different on other comp screens?

brit
09-26-2003, 06:18 PM
My friends website and some of its pages looks different in layout on her monitor (15"), than it does when I view it on my own computer screen. My monitor is slightly larger at 17". I have noticed this with a few other websites when viewed on different computers too.

Is there a way to have your page design appear in the same layout on all computers, or is this just something you have to bear in mind when designing a site... It didn't occur to me that pages would appear different due to the size of someone's monitor. I assumed a person's web layout would appear exactly the same.

Thanks,
Brit:)
oracleguy
09-26-2003, 06:40 PM
If the two computers are running at different resolutions, then it can make the website look different. The easiest solution is to build a fluid layout using percentages. That shrinks/expands to fit the users screen.

Also depending on the browser, there can be slight abberations depending on how well you conform to proper coding standards.
brit
09-26-2003, 07:02 PM
How would you build a fluid layout using percentages. I dont know what that is. Is it simple to do? I am only a beginner. Most of my page contents will include html.

Thanks,
Brit
oracleguy
09-26-2003, 10:58 PM
Where you set the elements that make up the page to percentages so instead of making your body 400px wide, you make it 80% say so then it will automatically expand.

If you want examples, there should be some the "Examples of XHTML & CSS based layouts" sticky at the top of this forum, I think at least a few are fluid.

If you could post a link to your site myself and others could look at it and see if there is anything else that would cause it to look different.

When I get home I'll post up some links to tutorials.
brit
09-27-2003, 03:47 PM
Here is a link to one of the pages that unfortunately changes in layout, according to what resolution/monitor you have. It was designed on my old monitor using 800x600, before I changed to a 17" monitor using 1024x728...


http://www.itsmysite.com/cgi-bin/itsmy/go.exe?page=&domain=&webdir=brit

Anyone using the latter, (17" and above, with higher res. will probably notice the difference). Hope the link helps. Obviously doesn't include text yet, but you get the general idea of how I'd like it to appear.

Thanks,
Brit:)
brit
09-28-2003, 08:16 PM
Also, forgot to mention... Does anyone know how I can get rid of the white box that surrounds the 'back' silver triangle button.

This is just a test page at the moment to see if layout looks on 800x600.

Thanks,
Brit
:)
oracleguy
09-28-2003, 09:33 PM
Part of the problem may be that you have some rather serious coding errors.

You have multiple head and body tags, you are supposed to only have one of each. With more than one the browser can get confused when it tries to render the page.
brit
09-28-2003, 09:45 PM
Thanks for that... I am only just starting out on all this:)

Here is the coding I have got for that page...;



<html>
<head>
<p><br>
<style type="text/css">
a:link {color: #FF99CC}
a:visited {color: #FF99CC}
a:hover {color: #FFFFFF}
a:active {color: #FFFFFF}
</style>
<style type="text/css">
<!--
a{text-decoration:none}
//-->
</style
</head>

<body><script language="JavaScript1.2">

/*
Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="640px"
//Specify the marquee's height
var marqueeheight="165px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<font face="Verdana"color="#FF99CC"><p><br><p><br><p><br>Text text text text text text text text text text text text text text text text text text etc, etc....<p><br><br></font>'



////NO NEED TO EDIT BELOW THIS LINE////////////

marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualheight=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>


Which exact parts would I need to edit or delete... Would layout be ok then?

Thanks again for the help!
Brit