Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy keep a fixed div centered on window resize??

    OK so I've got a header/banner thats 2000x100 px - 2000px width to ensure the header will always be visible regardless of what resolution your monitor is. At the moment I've got the header as the background of a div in fixed position to get rid of the scroll bars, but I want it to always be centered when the window is resized, How do I do this?

    Heres a test I did:

    http://www.polygoncube.co.uk/test/headertest2.html

    I want the 'HEADER TEST' text to always be centered when you resize the window.

    Thanks in advanced

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Make your width: 100%

    Welcome in advance

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Welcome to CF!

    This is an over-complicated way that can be applied to different scenarios. I dont know how useful it will be though..

    You can do it with two backgrounds. One that is attached to the <body> and one that is attached to the div#apDiv1.

    This method also guarantees that someone who does have a resolution over 2000px still gets a complete header.

    Repeat the green part down the x-axis.
    Code:
    body {
    background:url("green-part") repeat-x top;}
    Then the div#apDiv1 can center the black part over the green part.
    Code:
    #apDiv1 {
    background:url("black-part") center top no-repeat;
    height:100px;
    margin:0 auto; <---centers
    width:1000px; <---new width for the black part
    }
    http://www.bluerobot.com/web/css/center1.html
    If i was of any help, dont forget to click the 'thank' button =]

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OMG changing it to 100% did the trick! cant believe it was just that lol. thanks so much that was driving me up the wall but doing that would mean if someone had a resolution over 2000px then the header would stretch to fit it? though dont think that would matter anyway.

    thanks ch4sethe5un that sounds like a good way, though that header test was just block colours the green has no actual relevance, the final thing will be one long image so with your method I guess you would see the seams, but I still wanted to know how to do it so thanks anyway lol

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by daxilic View Post
    thanks so much that was driving me up the wall
    Been there.


  •  

    Posting Permissions

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