1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

How to stop banner from extending too far to the right at different resolutions

Discussion in 'HTML & Website Design' started by Obie18, Feb 16, 2012.

  1. #1
    I've had no luck getting a fix for this at the Invision forum, so I'm going to try my luck here.

    I was testing out my forum at different resolutions and was disappointed to find that the banner/logo sticks out to the right in everything except a resolution of 1152 x 864.

    This is what I get at most resolutions.

    overlap.jpg

    This is what I want in all resolutions.

    [​IMG]

    According to the boffins at Invision, I won't be able to achieve the effect I want unless I resize the banner/logo. But isn't there a way to code it so that it simply stretches and contracts when necessary, just as the body of the forum does?

    Many thanks!

    P.S. I'm not permitted to post a link to my forum at this stage; however, you'll find it at: thechristianidentityforum dot net slash testaroonie
     
    Obie18, Feb 16, 2012 IP
  2. adityamenon

    adityamenon Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #2
    This is probably because your logo is 1021px wide. If you use code to stretch the image according to the resolution, it will appear stretched and ugly.

    One easy solution might be placing this CSS in your relevant template file:
    div#header{background-color:#000; text-align:center;}
    Code (markup):
    It makes the header have a black background and brings the image to the center, and since your image is dark, it will appear like it has stretched throughout.

    This is a quick fix solution though, if you post your template file here, maybe someone can help you do it better...
     
    adityamenon, Feb 16, 2012 IP
  3. Obie18

    Obie18 Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for that fast reply.

    I'll give your suggestion a try.

    This is the template that contains the relevant code.
     

    Attached Files:

    Obie18, Feb 16, 2012 IP
  4. Obie18

    Obie18 Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I fixed the problem. I chopped about a third off the right-side of the image, then added a black background, as adityamenon suggested, and that was it.
     
    Obie18, Feb 22, 2012 IP
  5. adityamenon

    adityamenon Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #5
    Cheers! Glad to know you could figure it out :)
     
    adityamenon, Feb 22, 2012 IP