+ Post New Thread
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
Web Development Thread, Centering a scrolling text box in HTML in Coding and Web Development; Please can somone help. I have copied a scrolling text box (from a free web-site). It is excellent for displaying ...
  1. #1

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Unhappy Centering a scrolling text box in HTML

    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

  2. #2
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    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;
    }
    Last edited by ctaylor2; 9th January 2009 at 11:10 AM.

  3. #3

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Centre Scroller

    Thanks for that.

    But it did not work.

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

    Thanks for your reply.

    Paul

  4. #4
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    Sorry, yes you need to delete 'left: 450px.'

  5. #5

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Centering scroller

    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

  6. #6
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    Hi Paul

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

    Chris

  7. #7

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Centre Scroller

    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

  8. #8
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    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;
    }

  9. #9

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    scroller centering

    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

  10. #10
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    Ah, think it might be an IE6 bug, looks fine in firefox (see below)



    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

  11. #11

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    centering scroller

    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

  12. #12
    ctaylor2's Avatar
    Join Date
    Nov 2008
    Location
    Bolsover
    Posts
    20
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0
    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!

  13. Thanks to ctaylor2 from:

    PWaite (12th January 2009)

  14. #13
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    52
    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.

  15. Thanks to mossj from:

    PWaite (12th January 2009)

  16. #14

    Join Date
    Aug 2005
    Location
    London
    Posts
    3,156
    Thank Post
    116
    Thanked 529 Times in 452 Posts
    Blog Entries
    2
    Rep Power
    124
    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).

  17. Thanks to srochford from:

    PWaite (12th January 2009)

  18. #15

    Join Date
    Jan 2009
    Posts
    7
    Thank Post
    3
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    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

SHARE:
+ Post New Thread
Page 1 of 2 12 LastLast

Similar Threads

  1. html/ js help
    By strawberry in forum Web Development
    Replies: 2
    Last Post: 10th October 2008, 12:13 PM
  2. HTML Help
    By Shrimpersfan in forum Windows
    Replies: 6
    Last Post: 25th April 2008, 01:56 PM
  3. Replies: 14
    Last Post: 12th September 2007, 10:13 AM
  4. Scrolling text software for pc?
    By kfq61 in forum Windows
    Replies: 5
    Last Post: 25th April 2007, 12:34 PM
  5. Scrolling Bulletin Board
    By robinhood in forum Windows
    Replies: 7
    Last Post: 27th September 2006, 04:36 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •