Positions?

[Sir SpemzR]

No this isnt about sex haha...
Well I currently design myspaces for people and I need help
with the position coding for the DIVs....

If i leave the code to...

<div style="width: auto; height: auto; [B]position: absolute;[/B] top:745px; left:-315px; background-color: transparent;">
</div>

when ever i make my safari window smaller the DIV flows with the size of
the window and removes it from the position its suppose to be in

I want it so it will stay where i put it and even if i make the safari window
smaller it will still stay in its designated position....

help please...
thank you,
Mario

 

[angelwatt]

It may be getting effected by the parent elements that div is inside. I don't see anything wrong with the code you provided, but other code on the page could effect it.

 

[Sir SpemzR]

could it be the coding for my background image that doesnt allow it to shift?

<style>
body{background-image:url("IMG GOES HERE");
background-attachment:fixed;}
</style>

and for those who dont understand my problem here are some screen shots
first one is how its suppose to look...second is the problem

 

[angelwatt]

The background isn't an issue. I'm not sure where div you're working on is located within the page. With the width being set to auto it'll adjust its size so the content fits on screen. Giving it a fixed width may help some. The content also seems to be centered, which allows it to move some. I'd likely have to look at the actual page to see what specific CSS would help. I may take a closer look later.

 

[Sir SpemzR]

The background isn't an issue. I'm not sure where div you're working on is located within the page. With the width being set to auto it'll adjust its size so the content fits on screen. Giving it a fixed width may help some. The content also seems to be centered, which allows it to move some. I'd likely have to look at the actual page to see what specific CSS would help. I may take a closer look later.

Feel free...the url is

myspace.com/itsamesupamario

 

[angelwatt]

Applying it to the div directly is a bit hard. I did come up with a piece of CSS though that moves those divs to about the right spot.

table.blurbs table td {
 position: absolute;
 top: 120px; left: 575px;
}

You'll need other tweaks, but it may be a decent starter piece. I hate MySpace's setup and HTML structure. Such headaches for this kind of thing.

 

[Sir SpemzR]

well they are all different DIVs for example

one DIV is the persons name
another is their pictures
another its their gfs pic

do i apply it to each one?

 

[angelwatt]

do i apply it to each one?

As I remember from adding CSS to MySapce, the CSS I provided would just be in a general spot, not applied to a particular div tag. The div tags you're adjusting are inside the td tag that the CSS selector I gave effects. So no, not to each one. This will apply to all currently, though you may apply additional CSS to each div to get more control on placement.

 

[Sir SpemzR]

<div style="width: auto; height: auto; position: absolute; top: -45px; left:-350px; background-color: transparent;">
<img src="" /> 
</div>


<div style="width: 240; height: 300; position: absolute; top:60px; left:-315px; background-color: transparent;"><img src="">
</div>

<div style="width: auto; height: auto; position: absolute; top:90px; left: 15px; background-color: transparent;">
<center><font color="white">First off, please maximize your<br />internet window<br />Thank You.<br /><br />18 Years Old.<br />Discovering what is out there after high school.<br /><br />Hopefully attending FIDM this fall to get my A.A. in Graphic Design.<br /><br />I <font color="red">♥</font> Design and Photography<br />(They are my passions and<br />I actually know what I'm doing)
</div>

<div style="width: auto; height: auto; position: absolute; top:415px; left: 145px; background-color: transparent;">

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmlzZWVwaG90b2Rlc2lnbi5kZXZpYW50YXJ0LmNvbQ=="></a>
</div>


<div style="width: 795; height: auto; position: absolute; top:335px; left: -335px; background-color: transparent;"><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD0zODc4NTk2NzM="></a>

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=387859673"></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD0zODc4NTk2NzM="></a>

<a href="http://www.msplinks.com/MDFodHRwOi8vczI1LnBob3RvYnVja2V0LmNvbS9hbGJ1bXMvYzc0L05pZ2dlckxvdmVzQ2hpY2tlbi8/YWN0aW9uPXZpZXcmY3VycmVudD1ibG9jay0zLnBuZw==" target="_blank"></a>
</div>



<div style="width: 350; height: 378; position: absolute; overflow:auto; text-align:justify; top:465px; left: 85px; background-color: transparent;"><p style="white-space:nowrap;">
<img src="" />

<img src="" />

<img src="" />

<img src="" />

<img src="" />

<img src="" />

<img src="" />

<img src="" />

<img src="" />
</div>


<div style="width: auto; height: auto; position: absolute; top:415px; left: -315px; background-color: transparent;">
<img src="" />
</div>

<div style="width: auto; height: auto; position: absolute; top:445px; left: -130px; background-color: transparent;"><font color="white">This is my girlfriend Jennifer.<br />Been together for over 2.5 years<br /> and going strong. I love her and<br /> care for her so much, and  know <br />she feels the same exact way. <br />She has completely made me a<br /> better person.<br /> I Love You Baby.<br /> JCME
</div>

<div style="width: auto; height: auto; position: absolute; top:745px; left:-315px; background-color: transparent;">
<img src="" />
</div>

This is all the coding i have for the DIVs nothing else defines them
every other coding i have is to hide things like the contact tables
and what not

 

[Cerebrus' Maw]

I'm not sure if this will work. (Funnily enough, I work in the opposite fashion of try to make things flow nicely is a user makes their window smaller....)

but

if you surround your entire content above with:

<div style="position:relative; width:100%; height:100%;">
##Your content above###
</div>

Again, not sure...

 

[Sir SpemzR]

Didnt work out
made everything about 1000px lower
and still shifted over when i made the window smaller

I'm not sure if this will work. (Funnily enough, I work in the opposite fashion of try to make things flow nicely is a user makes their window smaller....)

but

if you surround your entire content above with:

<div style="position:relative; width:100%; height:100%;">
##Your content above###
</div>

Again, not sure...

 

[Cerebrus' Maw]

hm, try this (not sure how this will affect your other content, hopefully it will put in line breaks!!)

<div style="width:2000px; overflow:scroll;">
##your content###
</div>

 

[Sir SpemzR]

nothing.

would any of this be affecting my DIV?

<style>embed, object {position:absolute; top:495px; left:50%; margin-left: 0px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>

<style>

body{background-image:url("");
background-attachment:fixed;}

</style>

<style>
.extendedNetwork {display:none;}
.latestBlogEntry {display:none;}
</style>

<style>td.text table {position:relative; top: -20px;}td.text table table {position:static;}</style>
<p>

<style>.a {MySpaceGens.com - hide your comments} .friendsComments {display:none;}</style>

<style>
.contactTable {display:none;}
</style>

<style>.userProfileURL { display:none; }


 table table table td { 
  background-color:Transparent; 
 } 

</style>


<style>
.mygen { Created using MyGen 2.5 - www.mygen.co.uk }

.mygen { Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
	background-color:transparent;
        }


</style>




<style>
.mygen { Created using MyGen 2.5 - www.mygen.co.uk }


.mygen { Miscellaneous Properties }
tr {background:transparent;}
body table div font a, body table div div {visbility:hidden;}
body table table div font a, body table table div div {visibility:visible;}
</style>


<style>
.profileInfo { display:none; }
</style>


<style>
.userProfiledetail { display:none; }
</style>


<style>
.r{}
.orangetext15{display:none;}
</style>

<style>.friendSpace { display:none; }</style>

 

[Mal]

First thing I see there is that you've got a bunch of < style> tags where one would work (all of that should be in one < style> tag in the head of your document), and there's a < p> tag thrown in there that shouldn't ever be in the same area of your document as a < style> tag. Try fixing that and see if it helps.

jW

 

[Not Available]

From those screenshots, am I the only one who thinks the image which floats around is not included in the wrapper, which should have the proprieties margin: 0 auto; width: 800px;? If it is included, it's never happened to me to give such an error. Maybe post both your HTML and CSS?

 

[m3kilpat]

Your site does not render correctly at all in firefox. Your main content is all the way to the left and I cannot see it. It is fine in IE though. You may want to change the way you laid it out and use divs instead of tables because tables suck. If you just had a "content" div and put everything else inside it this would be very easy to accomplish.

 

[angelwatt]

Your site does not render correctly at all in firefox. Your main content is all the way to the left and I cannot see it. It is fine in IE though. You may want to change the way you laid it out and use divs instead of tables because tables suck. If you just had a "content" div and put everything else inside it this would be very easy to accomplish.

This is a MySpace page. He can't really control the content too much. It only allows adding some style and some tags. Getting rid of the table layouts is impossible.

 

[Sir SpemzR]

Your site does not render correctly at all in firefox. Your main content is all the way to the left and I cannot see it. It is fine in IE though. You may want to change the way you laid it out and use divs instead of tables because tables suck. If you just had a "content" div and put everything else inside it this would be very easy to accomplish.

they are DIV, i dont know tables much..
i dont get it, theres almost no way to make a myspace
look good in all browsers since they all read it differently

i ended up making the black transparent area its own DIV
(pulled it from the background image psd) and now it floats
with all the content....

C&C anyone?

 

[m3kilpat]

This is a MySpace page. He can't really control the content too much. It only allows adding some style and some tags. Getting rid of the table layouts is impossible.

There is [was] a way to hide everything that is there and basically create anything you want over top of it. I did this a few years back but really couldn't help you achieve this now. I'm not sure if they changed how it works since then.

 

[angelwatt]

There is [was] a way to hide everything that is there and basically create anything you want over top of it. I did this a few years back but really couldn't help you achieve this now. I'm not sure if they changed how it works since then.

Not sure if that's the case either, but I remember there was guidelines that said you weren't allowed to remove/hide the ads on the page, so getting rid of everything wouldn't be completely allowed (if even possible). Moot point though.

 

[m3kilpat]

I just went back to look at it. I had the main content area overlayed but the top banner was still there. It looks like crap now so I guess things have changed a little. This is pretty much a meaningless post.