Positioning Twitter box? 1

[Blueie]

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

<!--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

 

[ChrisHirst]

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

 

[1DMF]

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

<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

 

[Blueie]

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):

CSS

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

HTML

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

Twitter widget code here

</div>

Thanks again.

 

[Blueie]

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?

 

[1DMF]

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 ;-) )

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.

 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

 

[Blueie]

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

 

[1DMF]

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

"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