Twitter widget stuck in upper left corner


#1

Hello. I’m using CSS to format a site. I’d like the twitter feed to be positioned basically in the middle of the page. No matter what code I add, the widget is stuck above another widget on the page. I’m rather confused why.

Here’s the CCS code:

.twitter-timeline {
   position: absolute
   left: 550px;
   top: 300px;
   width:300;
   height: 200;
}

and the widget:

<div class="twitter-timeline" 'href="https://twitter.com/BradNoeMusic" data-widget-id="678692419626401792">Tweets by @BradNoeMusic</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>         
</div>

Anything obvious you can see?

I haven’t published the page yet, but intend to soon.

thanks for your help.
Pamela


#2

I see the widget code didn’t post. When I get the page up, I’ll post the link.


#3

http://www.pameladevine.com/brad_noe_calendar1366x768.html


#4

You need to use the code markup to make the code visible (either use the </> in the editor, or surround the code blocks with backticks) - I fixed that for you.


#5

Hi Pamela,

Best guess here is just that you need to set the z-index of your widgets appropriately to get the stacking you want: Try z-index: 10 on the .twitter-timline selector, and z-index: 20 on the widget you want to appear over it.

(Also, note that you’re missing px units on your width/height in the example above, that will result in the widget appearing at its default 520px/600px dimensions.)

Hope that helps,

Ben


#6