centering div profile, for different screen resolutions Options

[transam400]

my div profile looks fine on my screen (19" monitor, 1152 x 864) but when the resolution goes down, my profile moves right. Like when its viewed on a 15" monitor its off to the right, not centered. How can i make the page stay centered no matter what the resolution is? Thanks

[*WHIMSICAL 0NE*]

CODE

<div class="content" style="position:absolute; z-index:2; left:50%; top:0%;
margin-left:-175px; margin-top:150px; width:210px; height:210px;border-style:solid; border-width:0px; border-color:000000;overflow:auto;">

You'll have to mess around with the positioning of the code, though, because I believe it starts from the center. Unlike finding the coordinates in a paint program which starts starts at zero.

[transam400]

Well I assume I have to delete some other code that would conflict with that one? Heres my code if you wouldn't mind taking a look, I would appreciate it. Also, I like your myspace!


ABOUT ME:


<style type="text/css">
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,a.redlink:active, a.redlink:visited, a.redlink:link,.orangetext15,.blacktext12,.lightbluetext8,strong,.nametext,div b font font, div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
td.text table table {display:inline; visibility:visible;}
.text {font-family:tahoma;font-size:7pt; color:ffffff; font-weight:none; border:0px; text-transform: none; line-height:12px; text-align: justify; letter-spacing: 1px;}
.blacktext10{font-family:tahoma; font-size:7pt; color:ffffff; font-weight:none;text-align:right; letter-spacing:1pt;border-bottom:; text-transform:lowercase ; background-color: ff0000;width:320px;}
.nava {width:130px;}
.nava:hover {text-align:justify; font-family:tahoma;font-size:7pt; background-color:ff0000; color:ffffff; font-weight:none; letter-spacing:1pt; width:130px; text-align:left; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:lowercase;}
.titles {text-align:justify; font-family:tahoma;font-size:7pt; border-bottom:; border-color:ffffff;color:ffffff; letter-spacing:1pt;text-align:left; padding: 0px;cursor:crosshair;text-decoration:none;text-transform:lowercase;}
</style>
<style>td td object { position:absolute; left:0px; top:0px; background:transparent;display:block; width:0px; height:0px;}</style>
<style type="text/css">
a:active, a:visited, a:link {cursor:crosshair; font-family:tahoma; color:ffffff; font-size:7pt;text-transform:lowercase ; text-align:right;background-color:transparent; letter-spacing:1pt;font-weight:none;border-bottom:; border-color:ffffff;}
a:hover { font-family:tahoma; color:ffffff; font-size:7pt; text-transform:lowercase;text-decoration:none; letter-spacing:1pt;background-color:ff0000; text-align:left;cursor:crosshair; }
body {background-color:000000;
background-image:url("");
background-repeat: no-repeat;
scrollbar-face-color:000000;
scrollbar-highlight-color:000000;
scrollbar-3dlight-color:000000;
scrollbar-darkshadow-color:000000;
scrollbar-shadow-color:000000;
scrollbar-arrow-color:000000;
scrollbar-track-color:000000;
cursor:crosshair;}
input {background-color:transparent;BACKGROUND-IMAGE:URL(""); border:0px; border-style:solid; border-color: 000000; text-align:center; letter-spacing:1pt;font-family:tahoma;font-size:7pt; line-height:8pt;font-weight:none; color:ffffff; padding: 0px;}
div {filter:chroma(color=000000) ;scrollbar-arrow-color: ff0000; scrollbar-face-color: 000000; scrollbar-3dlight-color:000000; scrollbar-darkshadow-color:000000; scrollbar-highlight-color: 000000; scrollbar-shadow-color:000000; scrollbar-track-color: 000000; }
.rollover {position:absolute; background-color:ff0000;
width:160px; height:293px; overflow:auto;
left:300px; top:606px;
visibility:visible; position:absolute;
text-align:center; letter-spacing:1pt;font-family:tahoma;font-size:8pt; line-height:7pt;color:666666; padding: 0px;}
.layoutmap {position:absolute;width:858px; height:500px; overflow:auto;
position:absolute; left:140px; top:100px;
text-align:center;border:0 solid ; border-color:cccccc;
visibility:visible; padding: 0px;}
.aboutme {position:absolute; background-color:transparent;
width:248px; height:110px; overflow:auto;
left:595; top:205;
visibility:visible; position:absolute;
text-align:left; letter-spacing:1pt;font-family:tahoma;font-size:7pt; line-height:9pt;color:ffffff; padding: 0px;}
.comments {visibility:visible;width:547px; height: 153px;position:absolute;top:359px;left:296px;
overflow:auto;background-color:000000;
border:black 0px solid;z-index:2px;font-family:tahoma; color:ff0000; font-weight:none; border:0px; text-transform: none; line-height:12px; text-align: justify; letter-spacing: 1px;}
.rollover {position:absolute; background-color:transparent;
width:190px; height:195px; overflow:auto;
left: 147; top: 193;
visibility:visible; position:absolute;
text-align:justify; letter-spacing:1pt;font-family:tahoma;font-size:7pt; line-height:9pt;color:ffffff; padding: 0px;}
.aboutme2 {position:absolute; background-color:transparent;
width:248px; height:110px; overflow:none;
left:300; top:245;
visibility:visible; position:absolute;
text-align:left; letter-spacing:1pt;font-family:tahoma;font-size:7pt; line-height:9pt;color:ffffff; padding: 0px;}


</style>


<style type="text/css"> td.text td.text table table table td a img {width:50px;} td.text td.text table table table td div img {width:80px;} td.text td.text table table td img {width:50px; max-width:50px; width:auto;} td.text td.text table table td div img {width:250px;} * html td.text td.text table table td img {width:250px;} * html td.text td.text table table td a img {width:50px;} * html td.text td.text table table td div img {width:50px;} </style>
<style>.r{}</style>


<style>
div table tr td form{display:none;}
</style><style type="text/css">
div table td font { display: none }
div div table tr td a.navbar, div div table tr td font { display: none }
.testnav { position:absolute; top: 136px; left:50%; _top: 146px }
</style>


<style type="text/css">
table, tr, td, li, p, div { font-family:tahoma; color:FFFFFF; font-size:10px; }
.btext { font-family:tahoma; color:FFFFFF; font-size:10px; }

a:link img {border:0px solid color_code;} image border
a:hover img {border:0px solid color_code;} hover
a:visited img {border:0px}
</style>






ID LIKE TO MEET:


<style>.r{}</style>
<div class="layoutmap">
<IMG SRC="background URL" WIDTH=637 HEIGHT=435 BORDER=0 USEMAP="#lyt.jpg">
</MAP>
</div>

<div class=aboutme>
about me
</div>

<div class=rollover><BR><BR><BR><a HREF="http://home.myspace.com/index.cfm?fuseaction=user" class="nava">home</a><BR>
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=89936207" class="nava">add</a><BR>
<a HREF="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=89936207" class="nava">message</a><BR>
<a HREF="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=89936207" class="nava">block</a><BR>
<a HREF="http://chat.myspace.com/index.cfm?fuseaction=messenger&strDestinationUserID=89936207&sendType=0" class="nava">chat</a><BR>
<a HREF="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=89936207" class="nava">pics</a><BR>
<a HREF="http://home.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=89936207" class="nava">friends</a><BR>
</div>

<div class=aboutme2>age/location</div>

<div class="comments"><table><tr><td><table><tr><td>
<style>.r{}</style>

[freeflow]

The code she gave you are the coordinates to a centered div. So if you want your image or whatever centered you go in your code. Replace the coordinates your currently have with the ones she gve you. (Basically in your case, you will be editing the css.)

[transam400]

hmm its not working for me...does it go in about me or iltm?

[freeflow]

Your css and div coordinates are in about me so it goes there. You are not posting that code only the coordinates.

For example if you wanted the image div to be like that you'd change what you had to:
.layoutmap {position:absolute; z-index:2; left:50%; top:0%;
margin-left:-175px; margin-top:150px; width:210px; height:210px;}

And then edit.......

[transam400]

ok I got it centered and tested it, it stays in the center with different resolutions. But now my scroll boxes dont scroll, its like there under the background picture. And also the boxes still move to the right on smaller resolutions but the background stays put. Do I have to change the codes for all of them?

[freeflow]

You can change for all of them. Test it out. IF it still moves to the right then i'm lost.

[transam400]

Well I finally had some time to recode my page. THANK YOU for that code and the help! It works great!

[Unfold]

I'm having a problem with this as well.

I used the code to center my DIV and it DOES work in all resolutions.

The only problem is that my content and scrollboxes are showing under the image. I don't know how to recode this. So any help would be great!

[*SinfullySweet*]

^Try adding a z-index:4 or z-index:5 into your div coding.

(Showing us your codes, and a link would greatly help)

[Unfold]

http://www.myspace.com/christines_layouts

Here's the link. I put in some random content for an example as my problem

CODE

<div class="content" style="position: absolute; left:000px;  top:500px; width:635px; height:50px; overflow: auto;"><center>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaa
</div>

that's the code for my content

[*SinfullySweet*]

Yeah, try replacing your div code with this

CODE

<div class="content" style="position: absolute; left:000px;  top:500px; width:635px; height:50px; overflow: auto; z-index:4;"><center>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaa
</div>

[Unfold]

thank you very much.
It works :)

[*SinfullySweet*]

no problemo =)