Some help implementing my twitter

JHDS / 2009-03-02 06:14:01   

Hi people,
I'm using the HTML Twitter badge (not to be confused with the twitter plugin)

You can see how i've implemented so far HERE

I created a div class called "top" which is the white strip along the top, this is where i want to implement my twitter as you can see and wanted to contain the div id's.

However I cant get it right, I want the little birdy image fist then the update followed by the "| follow me on twitter" link, but it needs to all be in one line. As you can see it's putting the little birdy and the follow me on twitter link underneath.

I've edited the index.php file and added some styling so could anyone who's feeling in a helpful mood have a snoop about using firebug and tell me what i'm doing wrong.

Feel free to let me know what to remove or add to my stylesheet.

Many thanks, appreciate any help.

JHDS / 2009-03-02 06:15:53   

If it's any help this is the code i added to my index.php file about the menu and container....

  1. <div class="top">
  2. <div id="twitter_div">
  3. <ul id="twitter_update_list"></ul><a  id="twitter-link" style="display:block;" href="http://twitter.com/Hardsy"><img alt="Twitter icon" src="http://www.hardsydesignstudio.co.uk/files/images/icon_twitter.png"/>follow me on Twitter</a>
  4. </div>
  5. <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
  6. <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Hardsy.json?callback=twitterCallback2&count=1"></script>
  7. </div>
JHDS / 2009-03-02 06:16:33   

And these are the following these i've added to my style.css file....

  1. #twitter_div {
  2. float: left;
  3. margin-left: 20px;
  4. padding: 5px 0;
  5. }

ul#twitter_update_list {
display: inline;
float: right;
}

li {
list-style-position:inside;
list-style-type:none
}

arsondpi / 2009-03-02 09:25:00   

add/change this css:

  1. .top {
  2. background:#fff;
  3. height:auto;
  4. position:fixed;
  5. top:0;
  6. width:100%;
  7. z-index:99;
  8. }
  9. #twitter_div, a#twitter-link {
  10. float:left;
  11. margin-left:10px;
  12. padding:5px 0;
  13. }

and change your html into:

  1. <div class="top">
  2. ¬†¬†¬†¬†<a  id="twitter-link" href="http://twitter.com/Hardsy"><img alt="Twitter icon" src="http://www.hardsydesignstudio.co.uk/files/images/icon_twitter.png"/></a>
  3. ¬†¬†¬†¬†<div id="twitter_div">
  4. ¬†¬†¬†¬†¬†¬†¬†¬†<ul id="twitter_update_list"></ul>
  5.     </div>
  6. ¬†¬†¬†¬†<a  id="twitter-link" href="http://twitter.com/Hardsy">follow me on Twitter</a>
  7. ¬†¬†¬†¬†<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
  8. ¬†¬†¬†¬†<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Hardsy.json?callback=twitterCallback2&count=1"></script>
  9. </div> 

As you can see I changed the order of your objects in your html.
When I don't position items (absolute, fixed, relative etc) and use them as normal inline elements I tend to have a structure similar to what I want to see on screen - example: birdy first, javascript second...

I don't know if this is bad practice but it works - someone else can add to all this (having said that, this is not an Indexhibit issue - it's css).

Edit: I've changed the code to produce the structure you're after (bird-twitter update js - follow me on twitter)...

JHDS / 2009-03-02 16:17:51   

Thanks very much, i'm going to give it a go shortly.
Regards

This thread has been closed, thank you.