Centering a scrolling text box in HTML

[PWaite]

Please can somone help. I have copied a scrolling text box (from a free web-site). It is excellent for displaying numerous 'clickable' items.

 

But I cannot get it to centre on the html page. It was defaulting to the left edge of the page, but I have managed to move it over nearer to the centre. It still looks awful though.

 

Please take a look: News

 

I believe that it is because I have got javascript embedded in the html.

 

I have centred it but then the text within the text-box pushes over to the right so that you cannot see it all!

 

I'd appreciate some help. Thanks.

 

Paul

[ctaylor2]

Hi PWaite

 

You can centre content by amending the CSS for that element to add 'margin: 0 auto' and remove any other positioning:

 

#pscroller2 {

background-color:lavender;

border:1px solid black;

height:26px;

left:450px;

margin:0 auto;

padding:3px;

}

Edited January 9, 2009 by ctaylor2

[PWaite]

Thanks for that.

 

But it did not work.

 

Is it because I need to change the "left: 450px" properties?

 

Thanks for your reply.

 

Paul

[ctaylor2]

Sorry, yes you need to delete 'left: 450px.'

[PWaite]

Thanks for that. (Sorry I don't know your name.)

 

But it still doesn't work.

 

So i have put it back in.

 

I have tried lots of things (that I've seen on various web-sites (inc' W3 schools)). Even html centre - but that centres the text-box - but not the text within.

 

Have you any other ideas?

 

Thanks in anticipation.

 

Paul

[ctaylor2]

Hi Paul

 

How are you adding this box to your page? What Content Management System are you using?

 

Chris

[PWaite]

I added it by puting their code in the head and body (see my web page).

 

I'm using FrontPage (although we are thinking of changing to Joomla).

 

Thanks,

 

Paul

[ctaylor2]

Hmmm.

 

I'm using a plug-in for firefox called Firebug which allows me to play around with the css on a site and I seem to have the box centred on the screen fine - could you replace this #pscroller2 section with this code in the header (I've commented out what I don't think you need):

 

#pscroller2 {

background-color:lavender;

border:1px solid black;

height:26px;

/*left:450px;*/

margin:0 auto;

padding:3px;

/*position:absolute;*/

width:240px

margin: 0 auto;

}

[PWaite]

Thanks again for your replies.

 

However I have put the code in as you suggested.

 

It is now positioned at the left edge of the page - and I have left it like that for you to see.

 

Any other ideas?

 

Thanks in anticipation of your patient replies.

 

Paul

[ctaylor2]

Ah, think it might be an IE6 bug, looks fine in firefox (see below)

 

http://img241.imageshack.us/img241/4223/screenshotln0.th.jpg

 

Can you try changing what I gave you to this:

 

 

#pscroller2 {

background-color:lavender;

border:1px solid black;

height:26px;

/*left:450px;*/

margin:0 auto;

padding:3px;

/*position:absolute;*/

width:240px

margin: 0 auto;

display: inline; /*sometimes fixed ie6 bugs*/

}

 

Are you using ie6 to view your site?

 

Chris

[PWaite]

Hi Chris

 

Thanks for all of you help.

 

I tried your last line of code and it didn't work.

 

I feel better now that it seems to be an ie bug - I thought that it was me.

 

I'm using ie 7 to view - I was using firefox - but it doesn't display all of my tables within my web-pages properly.

 

Do you think that I could get the scroller into a table cell somehow to put it in the correct place within the page?

 

Thanks again.

 

Paul

[ctaylor2]

Sorry I can't sort this for you.

 

To be honest one of the main problems is that the site is rather bloated with bad code and isn't very semantically designed (not criticising you btw, this is the kind of code generated by front page).

 

Have a look at the number of validation errors it generates!: [invalid] Markup Validation of http://www.bws.wilts.sch.uk/News/News.html - W3C Markup Validator

 

As the styling isn't seperated from the content these kind of errors can be a reoccurant pain in the backside I'm afraid

 

You could try a table cell but I've not coded table based layouts before so I'm not sure where to start, but again it's bad design practice and I would really recommend it.

 

I'll try and have another look at it on monday for you - I'm off soon to get my weekend started!

[mossj]

ways to center in css is put it in a span container and then position it

 

fix its size, then left it 50% the take half of its size away (not sure how, i think you use margin-left or padding-left with neg values). A quick google search should pull up instructions.

[srochford]

Chrome and Safari are both showing it right aligned; IE7 is centring it.

 

Don't really want to criticise the web site because the content basically looks pretty good, but do you *really* want scrolling text? How well will it work for someone using a screen-reader (and even if you think no-one using your school website has a visual impairment, DDA means that you ought to be making reasonable adjustments for them).

[PWaite]

Chris

 

Thanks for all your time on this. I knew that FrontPage added spurious code but I didn't realise it was that much. At some point in the near future I plan to re-write the site in Joomla. But for now I'll just remove the scroller as it looks bad off-centre, and I'll also try to get rid of all of the errors. Thanks again. Paul

[ctaylor2]

No probs mate