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!

[fixtatik]

CODE

.twitter div { float:left; }

CODE

<div class="twitter">
  <div>
    twitter feed
  </div>
  <div>
    twitter feed
  </div>
  <div>
    twitter feed
  </div>
</div>

[purelygangster]

For some reason I'm still getting the same problem of the twitters stacking up.

Here's a screen shot and the coding I'm using:

click to enlarge

CODE

<style>

.mygen { Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url(http://img132.imageshack.us/img132/1215/bamk.jpg);}

</style>

<style> body { margin-top: 1000px; } .tsgbbannercode {
position: absolute; top: 0;
width: 1000px;
text-align:center;
margin-top: 0px;
margin-left: -455px;
left: 49%; }</style>
<div class="tsgbbannercode"><img src="http://img132.imageshack.us/img132/3339/pgr.jpg" border="0" /></a><br />

<a href='http://www.msplinks.com/MDFodHRwOi8vaW1nMzUuaW1hZ2VzaGFjay51cy9teS5waHA/aW1hZ2U9bXlzcGFjZWdlbnM2NzY2NzM4ODEwLmdpZg=='><img src='http://img35.imageshack.us/img35/9700/myspacegens6766738810.gif' border='0' alt='Image Hosted by ImageShack.us' /></a>

<div class="twitter">
<div>
<center><div style="width:176px;text-align:center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=10027263&type=user&id=15868070" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=10027263&type=user&id=15868070" quality="high" />
</object></div>
<div>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=10027263&type=user&id=15868070" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=10027263&type=user&id=15868070" quality="high" />
</object></div>
<div>

<div style="width:176px;text-align:center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=10027263&type=user&id=15868070" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=10027263&type=user&id=15868070" quality="high" />
</object><br /><a style="font-size: 10px; color: 9900FF; text-decoration: none" href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vRGpTYWludA=="></div>
</div>
</div>
<br />
<br />
<img src="http://img15.imageshack.us/img15/6664/24736826.jpg" border="0" />

<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy"><img src="http://img15.imageshack.us/img15/6316/homevke.jpg" border="0" /></a>

<img src="http://img15.imageshack.us/img15/6664/24736826.jpg" border="0" />

<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0zNTU2MjQ1NzM="><img src="http://img15.imageshack.us/img15/6614/addusg.jpg" border="0" /></a>


<img src="http://img15.imageshack.us/img15/6664/24736826.jpg" border="0" />

<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYyJmZyaWVuZElEPTM1NTYyNDU3MyZNeVRva2VuPWRjNDk2OGZhLThhYWMtNDdiMC05ODJmLTk2O
k1YjQyNzlkNg=="><img src="http://img15.imageshack.us/img15/220/message1a.jpg" border="0" /></a>


<img src="http://img15.imageshack.us/img15/6664/24736826.jpg" border="0" />

<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM1NTYyNDU3MyZN
VRva2VuPTllMzdkYjBiLTZiODItNGNlZS1hYTA1LWZhZmExNjQ5OTlkMg=="><img src="http://img15.imageshack.us/img15/4402/commentunt.jpg" border="0" /></a>


<img src="http://img15.imageshack.us/img15/6664/24736826.jpg" border="0" />

Reason for edit: Please use codebox tags and thumb images. Thanks - TJ

[fixtatik]

did you add the CSS code to your style sheet?

[purelygangster]

Yes it didn't make a difference :/

[fixtatik]

the code you gave after you did it only had the HTML, not the CSS. you need to add this between your <style> tags:

CODE

.twitter div { float:left; }

you'll probably also have to specify a width for ".twitter"

[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...

[purelygangster]

got it :) now all i need to do is fix the values so they line up in a row rather than all over lol

[Mikeplyts]

yeah, all you really need to do is have the value of the top: properties the same and mess around with the values of the margin-left: properties.

[Mickey]

Topic closed & moved.