different resolutions, trying to make my overlay work regardless of the screens resolution Options

[brooklyneast05]

I'm not sure what to do to my code to make my layout work regardless of the resolutions of peoples screens. it's centered on my screen, but not on anyone elses. i was thinking, where it says "px" that needs to be changed, because i dont wanan go by pixels, so i tried changing all of them to "pt" but that didnt seem to work right, im not sure if after i changed them to pt, i needed to change the numbers too. here's the link to my profile, and my codes


http://profile.myspace.com/index.cfm?fusea...33-f0115ac66ae1


About me

CODE

<style type="text/css">

.ftd {Moves the entire profile up - hey hey hey goodbye}
body table {margin-top:-5000px;}

.ftd {Keeps the ad, search form, and navigation links in place}
body td table, body div table {margin-top: 0;}

.ftd {Makes the table the ad, search form and nav links are on transparent}
table, tr, td {background-color:transparent;}

.ftd {Removes the search form}
body div table form{display:none;}

.ftd {For comment boxes to display}
body table div form{display:block;}

.ftd {Hides the dividers in between the nav links}
div table td font {visibility:hidden; }

.navbar {visibility:visible !important;}

a.navbar:active, a.navbar:visited, a.navbar:link { font-family: arial; font-size: 10px; font-weight: bold; color:7E0808; }
a.navbar:hover { color:ffffff; text-decoration: strike; }


body {
background-color: 660000;
background-image: url("http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/Myspace_v2_by_wireless_studios.jpg");
background-repeat: repeat y;
background-attachment: scroll;
background-position: top left
}




.bottom {
background-color:transparent;
border: 0px solid white;
position:absolute;
left:50%;
margin-left:-25px;
top:900px;
height:100px;
width:50px;
z-index:1;
}


.links {
background-color: transparent;
border: 2px;
border-style: double;
border-color: transparent;
font-family: arial;
font-size: 11px;
color: ffffff;
position: absolute;
top: 0%;
left: 50%;
margin-left: 105px;
top: 415px;
height: 130px;
width: 272px;
overflow-y: auto;
overflow-x: auto;
z-index: 2;
}

.div1 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: -373px;
top: 202px;
height: 374px;
width: 286px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}

.div2 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: -373px;
top: 594px;
height: 162px;
width: 286px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}

.div3 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: 115px;
top: 203px;
height: 199px;
width: 250px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}

.div4 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: 115px;
top: 548px;
height: 204px;
width: 250px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}





a.lalalalink:link, a.lalalalink:active, a.lalalalink:visited {
font-family: arial;
font-weight: bold;
font-size: 10px;
color: 7E0808;
width: 260px;
line-height: 18px;
background-color: 969789;
margin: 0 0 3px 0;
padding: 0 4px 0 0;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 2pt;
}
a.lalalalink:hover {
color: 999589;
font-weight: bold;
font-family: arial;
font-size: 10px;
letter-spacing: 2pt;
width: 260px;
line-height: 18x;
background-color: 000000;
padding: 0 0 0 4px;
display: block;
text-align: center;
}



.blacktext10 {
width: 500px;
margin: 0 0 -20px 0;
font-family: arial;
font-weight: normal;
font-size: 12px;
letter-spacing: 2pt;
color: 7E0808;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-color: transparent;
border-style: solid;
display: block;
text-align: right;
}

.comt {
font-family: arial;
font-size: 10px;
color: ffffff;
width:650px;
height:700px;
overflow-y: auto;
overflow-x: hidden;
background-color:transparent;
border: 0px;
border-style: inset;
border-color: ;
position:absolute;
top:787px;
left:75%;
margin-left:-600px;
}

.blacktext10 {
width: 500px;
margin: 0 0 -20px 0;
font-family: arial;
font-weight: normal;
font-size: 12px;
letter-spacing: 2pt;
color: ffffff;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-color: 4c4c4c;
border-style: solid;
display: block;
text-align: right;
}
.comt td b{
width: 635px;
font-family: arial;
font-weight: bold;
font-size: 10px;
display: block;
text-align: center;
}

.comt td a{visibility:auto;}

.bbzherp {style of: comment text;}
.comt td td td, .comt td td td b {
font-size:11px !important;
font-family:arial !important;
color:7E0808 !important;
}
.comt a {
font-weight: bold;
font-family: arial;
color: 7E0808;
font-size: 10px;
text-decoration: none;
}
.comt a:hover {
font-family: arial;
color: 999589;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}
.redtext, .redbtext {
font-family: arial;
font-size: 16px;
font-weight: normal;
font-color: ffffff;
}

.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:9px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:;} .comt td td td table, .comt .orangetext15, .redlink, .comt .btext, .rid, .frnd{display:none;} .comt td b, .blacktext10 {display:block;} .comt {z-index:7;}
.comt table, .comt b {position:relative; top:-29px; _top:-29px;}





</style>


<div class="bg" style="position: absolute; left:15%; top:14px; width:800px; height:1000px; overflow: hidden;">
<img src="http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/differentlayout.png">
</div>

[freeflow]

Use
- top: 0% and margin-top. (I think you used top and top)
- Give each of your divs a different z-index.
- Don't be afraid to use negative numbers with the margins.

Its misaligned for me slightly. Try implementing what I said and see if it fixes it.

[brooklyneast05]

thank u, that helped

i believe it should be centered no regardless of the resolution



ill try asking this here
this is my code for my background image

body {
background-color: 660000;
background-image: url("http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/Myspace_v2_by_wireless_studios.jpg");
background-repeat: repeat y;
background-attachment: scroll;
background-position: top left
}


i want it to only be repeating down the sides, not repeating over the whole layout, how would i do that?

[freeflow]

Read your other topic I posted in there.