INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Positioning Twitter box?

Positioning Twitter box?

(OP)
Hello

I have a page still in the making here:

Link

I was hoping to narrow that Twitter box and have it right-aligned so that it is about an inch from the right-hand side, consistent with right spacing here: Link and not left-aligned as it is at the moment.

I have nothing that conditions the Twitter code, only

CODE -->

<!--start twitter-->

Twitter widget code

<!--end twitter--> 

How would I best position that Twitter box that holds the Tweets and narrow it, please? Is that done within Twitter itself or would I use a <div> of some kind?

Thank you.

Blueie

RE: Positioning Twitter box?

Quote:

Twitter itself or would I use a <div> of some kind?

Probably. However there is only one "kind of <div>" that being the <div> element itself.
A <div> is merely a block level container for other elements that will, if left 'unstyled' create a 100% wide 'block' with a line break above and below the content of the <div>.

What it appears you require, could be accomplished using floating and margins.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Positioning Twitter box?

You need to wrap the widget in a tag you can control and then use CSS.

CODE

<div id="my_twitter_widget">
  <!-- widget code -->
</div>

div#my_twitter_widget {
    float:right;
    margin-right:???px;
    width:???px;
} 
Though I have no idea how twitter works and if it is a fluid design based on its containing element?

What does the twitter API say?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: Positioning Twitter box?

(OP)
Hello Chris

Thank you for your reply.

Something like this (I am only guessing those dimensions for now until I can see it in page):

CODE -->

CSS

 .floatright  {
  float: right;
  margin: 300 100 200px 600px;
 }

HTML

 <div class="floatright" width="200" height="600"

Twitter widget code here

</div> 

Thanks again.

RE: Positioning Twitter box?

(OP)
Hello 1DMF

Thanks for your reply.

The Twitter documentation refers to styling the widget itself - background colour, etc.

The code that I have posted...does that look reasonable. It looks similar to what you8 have kindly posted except I have used class and you have used ID.

Is that right?

RE: Positioning Twitter box?

sure, class, id either is fine.

Though you usually use a class when you want to apply it to more than one element.

A class floatright implies you could float any element to the right by applying the class, but you have specific margins applied to that class, that you might not want to apply to another element that you want to float right.

So to me it's not very semantic, but hey use what ever floats your boat (or div winky smile )

you also missed some units off your margins, you missed the end of the div enclosure and you also have some width / height settings inline with the element.

If you used a unique identifier for that particular object, you are better off using all CSS.

CODE

CSS

 #my_twitter_widget  {
  float: right;
  margin: 300px 100px 200px 600px;
  width: 200px;
  height:200px;
 }

HTML

<div id="my_twitter_widget">
Twitter widget code here
</div> 

That way you don't need to alter the HTML if you want to adjust it, you simply alter the CSS.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: Positioning Twitter box?

(OP)
That looks a lot better - more as I wanted it:

Link

I have a better idea of what I am doing now, thanks to you!

I'm grateful!

Blueie

RE: Positioning Twitter box?

No problem. Glad you got it working.

(not sure why you want such a large left margin, I'm sure you have your reasons)

You might want to consider moving all that <style> code to an external CSS file.

Design / Content separation will help you departmentalise the components of the page.

Have fun smile

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close