Jump to content

Aligment Problem?


GaGa
 Share

Recommended Posts

I`m using a twitter jquery plugin to get the latest tweets inside a div and i want to add " follow us on twitter " under the tweet but i can`t do this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<title></title>	<style>	.tweet {  font-family: Georgia, serif;  font-size: 1.1em;  color: #085258;  width:237px;  padding:10px 0 0 60px; }    .tweet .tweet_list {	   background:  url(../images/twitter_bg.png) no-repeat scroll 0 100%;	   height:179px;	-webkit-border-radius: .5em;	list-style-type: none;	margin: 0;	padding: 0; }		.tweet .tweet_list li {		width:180px;	  overflow: auto;	  line-height: 1.5;	  padding: 8px 5px 5px 30px; }	  	  .tweet .tweet_list li a {		color: #0C717A; }			.tweet .tweet_list .tweet_even {	  background-color: #91E5E7; }	 		  </style><script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><script type="text/javascript"  src="scripts/jquery.tweet.js"></script><script type='text/javascript'>	$(document).ready(function(){		$(".tweet").tweet({			username: "sitepoint",			join_text: "auto",			count: 1,			auto_join_text_default: "we said,",			auto_join_text_ed: "we",			auto_join_text_ing: "we were",			auto_join_text_reply: "we replied to",			auto_join_text_url: "we were checking out",			loading_text: "loading tweets..."		});	});</script>	</head><body><div class="tweet">			<h4> latest tweets </h4>			<!-- latest tweets here -->			<a href="#">follow us on twitter</a>			</div></body></html>

this is a screenshot 37200970030am.pngthis is my code but i don`t know why ? when the plugin gets the tweets the anchor tag appears above it instead of under it ? so how can i solve this ?

Link to comment
Share on other sites

I'm not a javascript expert but I will give this a try.The tweet information is being inserted as the last "child" of <div class="tweet">. (In other words it is going just before the </div> tag.)I see two fairly simple approaches to solving this problem. The easy (but not too elegant way) is to modify the HTML.<div class="tweet"> <h4> latest tweets </h4> <!-- latest tweets here --> <a href="#">follow us on twitter</a> </div>becomes:<div id="twt"> <h4> latest tweets </h4> <span class="tweet"> <!-- latest tweets here --> </span> <a href="#">follow us on twitter</a> </div>You then have to modify the CSS accordingly. (This change will mess with background and formatting of the <div>.) This change should put the tweets as the last child (in this case the only child) of the <span class="tweet"> element. The other approach would be:1) Using the DOM, store the information for <a href="#">follow us on twitter</a> in a javascript variable. 2) Remove the anchor information from the parent <div class="tweet">.3) Apply your javascript routine to provide the <!-- latest tweets here -->4) Append DOM to return the <a href="#">follow us on twitter</a> to a child of the parent <div class="tweet"> after the "latest tweets"The first solution requires that you have to play with the CSS a bit but it should be fairly simple to implement. The second option is great if you are comfortable with Javascript and the DOM but do not wish to change your CSS.My answer is more of a guide than a solution. If you need more help feel free to ask.

I`m using a twitter jquery plugin to get the latest tweets inside a div and i want to add " follow us on twitter " under the tweet but i can`t do this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<title></title>	<style>	.tweet {  font-family: Georgia, serif;  font-size: 1.1em;  color: #085258;  width:237px;  padding:10px 0 0 60px; }    .tweet .tweet_list {	   background:  url(../images/twitter_bg.png) no-repeat scroll 0 100%;	   height:179px;	-webkit-border-radius: .5em;	list-style-type: none;	margin: 0;	padding: 0; }		.tweet .tweet_list li {		width:180px;	  overflow: auto;	  line-height: 1.5;	  padding: 8px 5px 5px 30px; }	  	  .tweet .tweet_list li a {		color: #0C717A; }			.tweet .tweet_list .tweet_even {	  background-color: #91E5E7; }	 		  </style><script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><script type="text/javascript"  src="scripts/jquery.tweet.js"></script><script type='text/javascript'>	$(document).ready(function(){		$(".tweet").tweet({			username: "sitepoint",			join_text: "auto",			count: 1,			auto_join_text_default: "we said,",			auto_join_text_ed: "we",			auto_join_text_ing: "we were",			auto_join_text_reply: "we replied to",			auto_join_text_url: "we were checking out",			loading_text: "loading tweets..."		});	});</script>	</head><body><div class="tweet">			<h4> latest tweets </h4>			<!-- latest tweets here -->			<a href="#">follow us on twitter</a>			</div></body></html>

this is a screenshot 37200970030am.pngthis is my code but i don`t know why ? when the plugin gets the tweets the anchor tag appears above it instead of under it ? so how can i solve this ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...