floating div thing help (lol myspaz)

[Midget]

so here is my myspace (http://www.myspace.com/ant2oo4)

and i want to put a last.fm widget right under the music player on the right

the code for the widget is this:
<style type="text/css">table.lfmWidget20070629000838 td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidget20070629000838 tr.lfmHead a:hover {background:url(http://panther1.last.fm/widgets/images/en/header/chart/weeklyartists_regular_grey.png) no-repeat 0 0 !important;}table.lfmWidget20070629000838 tr.lfmEmbed object {float:left;}table.lfmWidget20070629000838 tr.lfmFoot td.lfmConfig a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/grey.png) no-repeat 0px 0 !important;;}table.lfmWidget20070629000838 tr.lfmFoot td.lfmView a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/grey.png) no-repeat -85px 0 !important;}table.lfmWidget20070629000838 tr.lfmFoot td.lfmPopup a:hover {background:url(http://panther1.last.fm/widgets/images/en/footer/grey.png) no-repeat -159px 0 !important;}</style>
<table class="lfmWidget20070629000838" cellpadding="0" cellspacing="0" border="0" style="width:184px;"><tr class="lfmHead"><td><a title="ant2oo4: Weekly Top Artists" href="http://www.last.fm/user/ant2oo4/charts/?charttype=weekly&subtype=artist" target="_blank" style="display:block;overflow:hidden;height:20px;width:18 4px;background:url(http://panther1.last.fm/widgets/images/en/header/chart/weeklyartists_regular_grey.png) no-repeat 0 -20px;text-decoration:none;"></a></td></tr><tr class="lfmEmbed"><td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="184" height="140" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab%23version=7,0,0,0" style="float:left;"><param name="bgcolor" value="999999" /><param name="movie" value="http://panther1.last.fm/widgets/chart/9.swf" /><param name="quality" value="high" /><param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="type=weeklyartistchart&amp;user=ant2oo4&amp;theme=grey&amp;lan g=en" /><embed src="http://panther1.last.fm/widgets/chart/9.swf" type="application/x-shockwave-flash" name="widgetPlayer" bgcolor="999999" width="184" height="140" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="type=weeklyartistchart&amp;user=ant2oo4&amp;theme=grey&amp;lan g=en" allowScriptAccess="sameDomain"></embed></object></td></tr><tr class="lfmFoot"><td style="background:url(http://panther1.last.fm/widgets/images/footer_bg/grey.png) repeat-x 0 0;text-align:right;"><table cellspacing="0" cellpadding="0" border="0" style="width:184px;"><tr><td class="lfmConfig"><a href="http://www.last.fm/widgets/?widget=chart&amp;colour=grey&amp;chartType=weeklyartists&amp; user=ant2oo4&amp;chartFriends=&amp;from=code" title="Get your own widget" target="_blank" style="display:block;overflow:hidden;width:85px;height:20 px;float:right;background:url(http://panther1.last.fm/widgets/images/en/footer/grey.png) no-repeat 0px -20px;text-decoration:none;"></a></td><td class="lfmView" style="width:74px;"><a href="http://www.last.fm/user/ant2oo4/" title="View ant2oo4's profile" target="_blank" style="display:block;overflow:hidden;width:74px;height:20 px;background:url(http://panther1.last.fm/widgets/images/en/footer/grey.png) no-repeat -85px -20px;text-decoration:none;"></a></td><td class="lfmPopup"style="width:25px;"><a href="http://www.last.fm/widgets/popup/?widget=chart&amp;colour=grey&amp;chartType=weeklyartists&amp; user=ant2oo4&amp;chartFriends=&amp;from=code&amp;resize=1" title="Load this chart in a pop up" target="_blank" style="display:block;overflow:hidden;width:25px;height:20 px;background:url(http://panther1.last.fm/widgets/images/en/footer/grey.png) no-repeat -159px -20px;text-decoration:none;" onclick="window.open(this.href + '&amp;resize=0','lfm_popup','height=240,width=234,resi zable=yes,scrollbars=yes'); return false;"></a></td></tr></table></td></tr></table>

so, i think that i need to create a floating div element with the above code inside, setting the x&y position to just under the music player

so far i've tried:
<div style="position:relative; top:100px;
margin-left:400px;"> widget code </div>
but it just gets stuck inside the white box containing my friends and comments... i think this is because that box is a div itself and i'm putting the code underneath that code

i've tried putting it above the comments div but it gets stuck behind the main bit of the profile... the same thing happening if i put it above all of the code in the layout

sooooo... i know this is probably a long shot, but does anyone know what else i can try?

doesn't matter, sorted it out... somehow

[Timmeh]

Try lowering the z-index?

My profile is here (http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=1750315) created entirely from floating divs (bar the comments and friends). If you want the code, see source or I'll give you it :)

[Midget]

ahhh that sounds good, however i haven't got a clue how to do it

will i have to set z-indexes for the two other divs in the profile, relative to this new one?

at the moment i'm using:
<div style="position:relative; top:28px;
margin-left:520px;"> widget </div>
so what would i add to it?

(p.s i like your profile :D)

[edit]
i tried setting position as absolute, which worked perfectly, however it somehow prevented any of my details (picture, gender, about me, music etc) from working

*quick repost before i waste timmeh's time :p*

sorted it out now... all the other divs had z indexes so i just had to set it to absolute and give it a higher z index :D

thanks!

[the architect]

where can i learn to do this floating div stuff? i'm fairly good with html, but i've pretty much avoided divs, i won't lie

[Scuffles]

Have a play round with this sample for fun :P


<div style="width:100px; height:100px; background-color:#FF0000; position:absolute; left:100; top:100; z-index:2;"></div>
<div style="width:100px; height:100px; background-color:#00FF00; position:absolute; left:150; top:150;z-index:1;"></div>


Plus, I always find w3c tutorials useful:

http://www.w3schools.com/dhtml/dhtml_css.asp

(Hope this helps)

[Midget]

just do what scuffles said really, they're pretty simple

most of the attributes are just things you'd use anywhere else, such as height, colours etc apart from the position attribute and the z index

for the position thing, i know/think that relative means it'll change position according to the other divs around it, absolute means it'll sit where you put it no matter what, fixed means it will scroll down the page as you scroll, but not exactly sure what static means

for the z-index, it's just basically, the lower the number, the lower the layer is, so if you have two divs with z indexes of 1 and 2, 1 will be underneath 2

i'm not completely sure about all this though, so don't take it as fact :p

[the architect]

now when you create divs, how do you put things in like the comments and friends below. what sort of code do i need to make the box that's usually in the top left. e.g. when you change your default picture, it reflects it on the profile

[Midget]

<div class="comments" style="width:500px; position: absolute; top:700px; left:50%; right:50%; margin-left:-400px; z-index:7; background-color:FFFFFF;"><div style="margin-left:20px;"><div style="margin-bottom:10px; margin-left:10px;"><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm 0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzJmZyaWVuZGlkPT g5MDE5NDk3"><b>View All Friends</b></a> | <a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLmxpc3RhbGwmZnJpZW5kaWQ9ODkwMT k0OTc="><b>View Blog</b></a></div><table><tr><td><table><tr><td>
that's the code for the comments div on my profile... it includes your top friends and comments

you'll have to replace the links at the end with your own, since those links go to my friends and blog :p

[the architect]

okay, that helps a lot midget thanks :-D but what about for the default picture? i can't find anything about that anywhere

[Midget]

nah i don't know about that either, it seems to be built into the flash profile thing i have

[Mr Salek]

As this thread seems to be getting some attention, does anyone mind if I raise an issue with my div profile? I made another thread about it but it's kinda dying.