Twitter Top Banner (band myspaces) Options

[purelygangster]

Hey there :) So I've been trying to design a custom myspace layout. I've got everything cool, but I would like to add multiple twitter boxes as a top banner. Every time I try to add the though, the twitters do not line up next to each other, but on top of each other. I was wondering if anyone could give me a direct code or help to explain how to build one, specifically, how people say to put them in div containers.


Thanks!

[Mikeplyts]

You could also try doing it the old fashion way.

Add this in your CSS:

CODE

<style>
.twitter01 {
position:absolute;
top:###px !important;
_top:###px !important;
left:50% !important;
_left:50% !important;
margin-left:-###px !important;
_margin-left:-###px !important;
width:###px;
height:###px;
}
</style>

Replace the ### with your own values until you get it just right. Note: In the margin-left: property, that minus sign moves the div more to the left and without the minus sign, it moves more to the right (depending on the value you input). Don't worry about the properties with an underscore ( _ ) before them, that's just so that it'll work in IE too. Edit the width: and height: properties with the same width and height of your twitter box.

Now add this in your HTML:

CODE

<div class="twitter01">
YOUR TWITTER BOX CODE GOES HERE
</div>

Replace the filler (YOUR TWITTER BOX CODE GOES HERE) with the code for your twitter box. Then hit Save Changes and check it out. Keep messing with the CSS values until you get it just how you want it.



For more twitter boxes, just keep adding and defining div classes in your CSS, like this:

CODE

<style>
.twitter02 {
position:absolute;
top:###px !important;
_top:###px !important;
left:50% !important;
_left:50% !important;
margin-left:-###px !important;
_margin-left:-###px !important;
width:###px;
height:###px;
}
.twitter03 {
position:absolute;
top:###px !important;
_top:###px !important;
left:50% !important;
_left:50% !important;
margin-left:-###px !important;
_margin-left:-###px !important;
width:###px;
height:###px;
}
.twitter04 {
position:absolute;
top:###px !important;
_top:###px !important;
left:50% !important;
_left:50% !important;
margin-left:-###px !important;
_margin-left:-###px !important;
width:###px;
height:###px;
}
</style>

and so forth..

Then, go back in your HTML, and just add the <div> tags in there with the class like so:

CODE

<div class="twitter02">
YOUR TWITTER BOX CODE GOES HERE
</div>
<div class="twitter03">
YOUR TWITTER BOX CODE GOES HERE
</div>
<div class="twitter04">
YOUR TWITTER BOX CODE GOES HERE
</div>

and etc...