SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    7
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    CSS: Adjusting header size

    How do I adjust the header size to fit n any screen resolution?

    This is the website: http://nelsonnaibert.com.br/

    Hope you can helo me.

    Thanks a lot!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Even on small screens, the header link is still set to:

    Code:
    .header-title {
    display: block;
    width: 997px;
    height: 400px;
    background: url(http://nelsonnaibert.com.br/wp-content/uploads/2013/02/NNaibert_Header9.gif) no-repeat 0 0;
    text-indent: -9999em;
    margin: 0 auto;
    }
    and you still have that big background image. You could switch to a different image, or change its size with background-size, although that's a new property that doesn't work on older browsers.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    7
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Even on small screens, the header link is still set to:

    Code:
    .header-title {
    display: block;
    width: 997px;
    height: 400px;
    background: url(http://nelsonnaibert.com.br/wp-content/uploads/2013/02/NNaibert_Header9.gif) no-repeat 0 0;
    text-indent: -9999em;
    margin: 0 auto;
    }
    and you still have that big background image. You could switch to a different image, or change its size with background-size, although that's a new property that doesn't work on older browsers.

    Thanks again for your help, Ralph. As you can see, I'm a begginer and I'm having some trouble with this header. When I replace width in pixels for 90%, there's no way to align header and menu n the center of the page and, as you've mentioned, I still have the big background image.

    Since the beggining, I wanted to have the white background associated to the main column and not as a background image, but didn't know how to do that. Is that really a solution? If so, how can it do that?

  4. #4
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,493
    Mentioned
    943 Post(s)
    Tagged
    14 Thread(s)
    Hi @laurabd ;
    We're trying out a new product at SitePoint to help people fix broken CSS in real-time. Your problem looks like one that we could easily help you fix on the spot.
    One of our CSS experts is online now and ready to help if you're interested in giving it a try.

    Edit: I'm removing the link to the product while we fine tune and develop further. Will keep you posted.
    Last edited by HAWK; Feb 26, 2013 at 21:30.

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    7
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Even on small screens, the header link is still set to:

    Code:
    .header-title {
    display: block;
    width: 997px;
    height: 400px;
    background: url(http://nelsonnaibert.com.br/wp-content/uploads/2013/02/NNaibert_Header9.gif) no-repeat 0 0;
    text-indent: -9999em;
    margin: 0 auto;
    }
    and you still have that big background image. You could switch to a different image, or change its size with background-size, although that's a new property that doesn't work on older browsers.


    Finally I could solve the background issue, but still having trouble with the header image. Which would be the correct setting?

    Thanks!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by laurabd View Post
    still having trouble with the header image
    You can use a different background image at each break point, sized to fit, and serve it up via @media rules.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,493
    Mentioned
    943 Post(s)
    Tagged
    14 Thread(s)
    Hey @laurabd ;
    We're running another test of our live CSS problem solving product.
    If you want to utilise our experts to get your site sorted out immediately, you can check it out here http://codefix.sitepoint.com/

  8. #8
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    7
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Now everything's working great. Thanks again for your enormous patience!

  9. #9
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,493
    Mentioned
    943 Post(s)
    Tagged
    14 Thread(s)
    Quote Originally Posted by laurabd View Post
    Now everything's working great. Thanks again for your enormous patience!
    Glad to hear it.


Bookmarks

Posting Permissions

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