Positioning problems... Options

[misfit]

Ok i'm using the bbzspace generator as I find it easier and quicker.
Someone asked me to make their profile like this-
http://i5.photobucket.com/albums/y165/soco...atefinished.jpg

She doesn't want all the text on it,she just filled it in to show an example.
Well i've tried positioning and the divs have gone all over the place,I basicly alwaysh ave trouble so thats why I use the div generator.


http://profile.myspace.com/index.cfm?fusea...iendID=46682823
I'm hopeless.Please help:(.I'm thinking I should give up,I don't know what I do wrong,but I keep trying and it just never goes where I want it too.

[SortedDetails]

Ok i'm using the bbzspace generator as I find it easier and quicker.
Someone asked me to make their profile like this-
http://i5.photobucket.com/albums/y165/soco...atefinished.jpg

She doesn't want all the text on it,she just filled it in to show an example.
Well i've tried positioning and the divs have gone all over the place,I basicly alwaysh ave trouble so thats why I use the div generator.


http://profile.myspace.com/index.cfm?fusea...iendID=46682823
I'm hopeless.Please help:(.I'm thinking I should give up,I don't know what I do wrong,but I keep trying and it just never goes where I want it too.

Hmm... Try using these types of divs..

CODE

<div id="DIVIDHERE" style="position: absolute; overflow-y:auto; overflow-X:auto; width:0px; height:0px; left:0px; top:0px "></div>

If you need more of an example, tell me.

[coldtrance]

you need to change the margin numbers of the divs with the generator codes. post the codes and i'll show you how

[misfit]

CODE

<style type="text/css">
body {background-color:transparent; background-image:url("http://i5.photobucket.com/albums/y165/
socompletelyuncool/matrix.jpg"); background-repeat:repeat;
background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:000000 !important;}
span, b {color:000000 !important;}
a {color:000000 !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
div table td font {visibility:hidden;}
div table table table td font {visibility:visible;}
table table table td {visibility:hidden;}
marquee, table table table div td {visibility:visible;}
table div div, table tr td div font a {visibility:hidden;}

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; position:absolute; top:0px; left:0px;
visibility:visible;}
table table table embed {position:static;}
.text, table table table table a,
table table table table div,.frm1 {visibility:hidden;}
table table table table div a, .frm1 input {visibility:visible;}
.bbzComment { You selected to hide comments. }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}

.div3 {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:349px; height:162px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-174px; margin-top:150px; text-align:center;
visibility:visible;}

.div0 {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:250px; height:285px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-125px; margin-top:460px; text-align:center;
visibility:visible;}

.div1 {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:258px; height:321px; overflow:auto;
position:absolute; z-index:2; left:100%; top:0%;
margin-left:-400px; margin-top:150px; text-align:center;
visibility:visible;}

.div2 {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:250px; height:600px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:150px; margin-top:150px; text-align:center;
visibility:visible;}
.bbzContainer div font, .bbzContainer div a, .bbzContainer div div,
.bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}
</style>
<div class="frm1"><table><tr><td><table><tr><td><table><tr><td>

and

CODE

</td></tr></table></td></tr></table></td></tr></table></div> <div class="bbzContainer"> <div class="div3"> <font size=5>top div</font> </div> <div class="div0"> <font size=5>bottom div</font> </div> <div class="div1"> <font size=5>left div</font> <br><br> <img src="http://groups.myspace.com/images/no_pic.gif"> <br><br> <a href="http://bbzspace.com">bbzSpace</a> </div> <div class="div2"> <font size=5>right div</font> </div> </div> <style type="text/css"> .frm2 {visibility:hidden;} .frm2 input {visibility:visible;} .bbzURL {content:"http://overlay.bbzspace.com";} </style> <div class="frm2"><table><tr><td><table><tr><td><table><tr><td>

Thanks

[coldtrance]

i changed your code a bit because it didnt have a submit button. look at the margin numbers in the first set of codes (the ones in the interests) Look at how big they are and how I used negatives:

Interests:

</td></tr></table></td></tr></table></td></tr></table></div>
<style>
BASIC INSTRUCTIONS:
You can delete this section from the code if you don't need it, but it won't affect the looks of your profile in any way.

For every div class (.div1, .div2, etc) you will notice a lot of common properties. To move the layer, use:
** margin-top to move it up and down
** margin-left to move it left and right

margin-left begins from the center of your page. If you set it to 0px, the top left corner of the div will be located in the center of the profile. If you want the layer in the center of your profile take the width of the div, divide it by 2, and multiply it by -1. (In other words, divide it by 2 and make it a negative number.) For example, your div is 400px wide. Give it a margin-left of -200px and the div layer will sit in the middle of the screen. Now, if you want to move it somewhere else, you will have to experiment with the position.

margin-top should be no less than 150px since anything above that may overlap the MySpace advertisment.

The rest is self explanatory, width for width, height for height, colors and so on.

Style and Format:
The divs will automatically align everything to the center, in order to make the text and pictures aligned to right or left, look for "text-align:center;" and replace center with left, right, or justify.

If you want your comments to flow automatically rather than have them stuffed in a scroll box, look for the comments selector, named .comt {} inside .comt, you will fine overflow:auto; change auto to overflow:none;

To move the personal song player, look for the embed {}

To add a background image on one of the divs, add this to your div selector:

background-image:url(URL to background);
background-position:center center;
background-repeat:repeat;
background-attachent:scroll;


Good Luck!

bbz Overlay Model Generator v0.5
bbzSpace dot com
</style>

<style type="text/css">
body {background-color:FFFFFF; background-image:url("http://i5.photobucket.com/albums/y165/socompletelyuncool/matrix.jpg"); background-repeat:repeat; background-position:center center; background-attachment:fixed;}
td, .text, div, input {color:000000 !important;}
span, b {color:000000 !important;}
a {color:000000 !important;} img {border:0px;}
table, tr, td {background:transparent; border:0px;}
div table td font {visibility:hidden;}
div table table table td font {visibility:visible;}
table table table td {visibility:hidden;}
marquee, table table table div td {visibility:visible;}
table div div, table tr td div font a {visibility:hidden;}

.bbzComment { This is where you control the position of the player. }
table table embed {display:block; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed {position:static;}
.text, table table table table a,
table table table table div,.frm1 {visibility:hidden;}
table table table table div a, .frm1 input {visibility:visible;}
.bbzComment { You selected to hide comments. }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}

.Contact {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:300px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:150px; text-align:center;
visibility:visible;}

.Middle {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:300px; height:475px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:340px; text-align:center;
visibility:visible;}

.MainImage {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:195px; height:250px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-355px; margin-top:150px; text-align:center;
visibility:visible;}

.Comments {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:195px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-355px; margin-top:415px; text-align:center;
visibility:visible;}

.Navigation {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:150px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:165px; margin-top:150px; text-align:center;
visibility:visible;}

.Music {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:150px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:165px; margin-top:340px; text-align:center;
visibility:visible;}

.Love {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:150px; height:285px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:165px; margin-top:530px; text-align:center;
visibility:visible;}

.Friends {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:400px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-355px; margin-top:830px; text-align:center;
visibility:visible;}

.Skull {
background-color:B8B8B8; color:000000;
border:2px dotted; border-color:000000;
width:250px; height:175px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left: 65px; margin-top:830px; text-align:center;
visibility:visible;}



div font a, span, td td td, table div div { visibility:hidden !important; }
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a, .bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font, .bbzContainer div table, .bbzContainer div table td, .comt, .comt td {visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}
</style>
<div class="frm1"><table><tr><td><table><tr><td><table><tr><td>

Music:

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

<div class="bbzContainer">
<div class="Contact">
<font size=5>top div</font>
</div>

<div class="Middle">
<font size=5>bottom div</font>
</div>

<div class="MainImage">
<font size=5>left div</font>
<br><br>
<img src="http://groups.myspace.com/images/no_pic.gif">
<br><br>
<a href="http://myspacehotline.com">bbzSpace</a>
</div>

<div class="Comments">
Comments
</div>

<div class="Navigation">
<font size=5>right div</font>
</div>

<div class="Music">
Music
</div>

<div class="Love">
Love
</div>

<div class="Skull">
skull
</div>

<div class="Friends">
Friends
</div>

</div>

<style type="text/css">
.frm2 {visibility:hidden;} .frm2 input {visibility:visible;} .bbzURL {content:"http://overlay.bbzspace.com";}
</style>
<div class="frm2"><table><tr><td><table><tr><td><table><tr><td>

It should look like this:
http://www.myspace.com/lilfiredemon2

but also note that I use IE for my internet browser, so if you use mozilla, firefox, ect. the positioning will be off

[misfit]

thanks a lot for that i really aprreciate it...but is there anyway you can maybe make them the exact size they are in hers..they are a little bigger,I just tried to change teh size but it went the wrong way.
I'm not sure maybe when you coded it you didnt click on the box that makes the image to the original size..I dunno oh well..
I've got all the sizing for you..if thats easier..

Middle is 340 x 573

Top is 347 x 161

MainImage is 257 x 320

Comments is 260 x 403

Navigation is145 x 158

Music is 146 x 151

Skull div 244 x 205

Love div is 145 x 402

Friends div is 534 x 206


Thanks so much if you can do this...I'll give youcredit for it of course..
Im so hopeless,why is it every time I try it doesn't work?

[misfit]

.....double posting coz its been 3 days :P

[*This Confession*]

then your bumping the topic^

use the cold trance code

if you take 5 of the height
then take 5 off the top.

same as width you take of the left.

its simple math or subtracting and even adding.

[misfit]

That didn't make a difference...