things out of place on different screens Options

[fashy]

I am creating my div layout and its one div so everything streams down. The only probably I am having is it is positioned differently on different monitor sizes. I am on a wide screen laptop but if I get it looking right on this, it looks out of place on a smaller monitor. Is there anyway of fixing its position so I am not going backwards and forwards and looks right on all screens?

http://www.myspace.com/graffiti_my_mind

<style type="text/css">
.myspaceprodesigns.com-div-generator{display:none}
body {
background:url('http://www.fileden.com/files/2007/3/3/845758/backgroundmy_3.jpg') repeat-y top fixed; background-color:000
}
.contain div {
background-color:FFF;
color:000000;
font: 10pt Verdana,Geneva,sans-serif;
}
a:link, a:active, a:visited, a.navbar:link, a.navbar:active, a.navbar:visited, a.man:link, a.man:active, a.man:visited {
color:FF0099;
text-decoration: underline;
font: bold 10pt Verdana,Geneva,sans-serif
}
a:hover, a.navbar:hover, a.man:hover {
color:FF0099;
font: bold 10pt Verdana,Geneva,sans-serif
}

.mpd2{width:900px;height:auto;top:9px;left:35px;position:absolute}.hold{backgrou
d-color:pink; text-align: center;}

.contain{left:42%;margin-left:-400px;top:170px;position:absolute;z-index:1;background-color:transparent;visibility:visible}

.mpd {left:50%;margin-left:-400px;top:2000px;position:absolute;z-index:9;visibility:visible !important}

.bodyContent div div form{display:inline}
.bodyContent table table table{visibility:visible}
td,form{margin:0;padding:0}
table,tr,td{background:transparent}
.myspaceprodesigns.com-additional-coding{display:none}
</style>









a:hover,
.nava {width:XXXpx;}
.navB {width:XXXpx;}
.navC {width:XXXpx;}
.navD {width:XXXpx;}
.navE {width:XXXpx;}
.nava:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:999;color:000000; width:XXXpx; text-align:right; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
.navb:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:######; color:######; width:XXXpx; text-align:right; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
.navc:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:######;color:######; width:XXXpx; text-align:right; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
.navd:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:######; color:######; width:XXXpx; text-align:right; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
.nave:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:######; color:######; width:XXXpx; text-align:right; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
.navz:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:000; line-height:8px;color:ffffff; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
}

.navF {width:XXXpx;}
.navF:hover {text-align:justify; font-family:ariel;font-size:8px; background-color:######; color:######; width:XXXpx; text-align:right; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:uppercase;}
</style>







<cite style="display:none">
Instructions: This coding, starting with the cite tag above should go into your "i'd like to meet" section and should be the only thing in your i'd like to meet section. You may leave these instructions in place for reference, as they will not appear on your profile.

You may edit anything between div tags in this section or edit images or anything requiring a url. However, as you do this, be extremely careful not to delete any starting or ending html tags or things like quotes, as deleting something could make your profile not work. If you need help with html, please check out http://www.myspaceprodesigns.com/tutorial/ where you will find lots of tutorials on everything from simple html to advanced css tricks.
</cite>

<div class="hold"><div class="contain">


<div class="mpd2">

<img src="http://img.photobucket.com/albums/v123/Fashy/myspace_nav.jpg" width="900" height="217" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="55,95,130,138" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD03MTI2NTkyNyZNeVRva2VuPTEyNzdiNGFlLWYwMjUtNGIwYy1iNzc1LTUyZWVhZ
AxYWZjMw==">
<area shape="rect" coords="144,95,226,139" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD03MTI2NTkyNyZNeVRva2Vu
WE5ZWU0NjRhLWM5ZDUtNGExZC1hYjRhLTViZTc5N2VhODQ1Mg==">
<area shape="rect" coords="242,96,322,140" href="#">
<area shape="rect" coords="341,96,418,140" href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWdyb3Vwcy5hZGR0
2dyb3VwJmZyaWVuZElEPTcxMjY1OTI3">
<area shape="rect" coords="443,96,539,139" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9y
2FyZCZmcmllbmRJRD03MTI2NTkyNyZmPWZvcndhcmRwcm9maWxl">
<area shape="rect" coords="549,95,645,139" href="#">
<area shape="rect" coords="655,95,750,139" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTcxMjY1OTI3">
<area shape="rect" coords="770,94,855,139" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1SYXRlSW1hZ2UuVXNlclJhdGluZyZVc2VySUQ9NzEyNjU5Mjc=">
</map>

<BR><BR>








SOME OF MY WORK - i will do more as soon as I get time.

<BR><BR><BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/gdi2_small.jpg">
<BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/fobcoverxx.jpg">
<BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/w0fm.jpg">
<BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/white_x_pasha.jpg">
<BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/random2.jpg">
<BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/random.jpg">
<BR>
<img src="http://img.photobucket.com/albums/v123/Fashy/Designs/enhanced_work.jpg">

<BR><BR><BR><BR>


<table width="900" border="0">
<tr>
<td>
<strong>Pondering Computer Games in the 80's - Russell Brand</strong>
<BR><BR>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="355" width="425" data="http://www.youtube.com/v/us8_COVGQF4&color1=0xcc2550&color2=0xe87a9f&border=0">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/us8_COVGQF4&color1=0xcc2550&color2=0xe87a9f&border=0" />
</object>
<BR><BR><BR>
<strong>1,500 plus CPDRC Inmates.</strong>
<BR><BR>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="355" width="425" data="http://www.youtube.com/v/Pdz38TIwqIQ&color1=0xcc2550&color2=0xe87a9f&border=0">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/Pdz38TIwqIQ&color1=0xcc2550&color2=0xe87a9f&border=0" />
</object>
<BR><BR><BR>
<strong>Like cars? Would you drive this? LOL (Peel p50 from Top Gear)</strong>
<BR><BR>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="355" width="425" data="http://www.youtube.com/v/iN0LQJLabqA&color1=0xcc2550&color2=0xe87a9f&border=0">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/iN0LQJLabqA&color1=0xcc2550&color2=0xe87a9f&border=0" />
</object>
</td>
<td>Site under constructio


</td>
</tr>
</table>



</div></div></div>


<div class="comments" style="position: absolute; left:300px; top:4990px; width:100%; height:auto; overflow:hidden;"><div style="position:relative; height:0px; overflow:none; border:1px;"> <div class="friends">
<table><tr><td> <table><tr><td> </div>


<table><tr><td>
<table><tr><td>

[IVIike]

make sure you position everything in px not %

[fashy]

Well if this was web design I would put an extra div around the whole think and margin: auto that on the left and right. But this is slightly different from web design. I mean I never touch absolute or relative positioning. I have tried putting 50% on the part of code below:

CODE

.mpd2{width:900px;height:auto;top:9px;left:35px;position:absolute}.hold
backgrou
d-color:pink; text-align: center;}

.contain{left:42%;margin-left:-400px;top:170px;position:absolute;z-index:1;background-color:transparent;visibility:visible}

.mpd {left:50%;margin-left:-400px;top:2000px;position:absolute;z-index:9;visibility:visible !important}


(this is NOT the edited code)

It dosn't work because it gose to far to the right.
Also when you manually re size the window by dragging it from the corner it all moves about. Usually in web design margin-right: auto and margin-left:auto solves this but it doesn’t with this.

[fashy]

When you’re on a website and you “restore down” (minimize the screen) you can then use the bottom right corner to manually re size the window by dragging it about. Well if you go to my profile and do that everything moves about and outside the container. So for myspace profiles how can you stop that?

As for the code, I just want to know where to put that left: 50% is the CSS.

[pandora]

it looks fine to me when i resize the browser window.

but for future reference, the only way to really have a fixed position on the center of the screen no matter what window size you are viewing it in - to get it so it doesnt jump out of your containers, you need to code EVERYTHING into the center; not just the content. dont use a vertical body background to "contain" your content.

mike: percents work just as well as pixels if you are using them correctly.