Need help? Check out our Support site, then


Border around header image in Twenty Eleven

  1. Hi! I would like to add a white border/frame around my header image and the menu bar. I managed to insert a white margin inbetween them and on the left of both, but then the image and the menu bar moved to the right, outside of the page. The coding I was using was

    #access {
    margin-left:10px;
    margin-right:10px;
    background:none repeat scroll 0 0 #dadac3;
    }

    and

    #branding img {
    margin-left:10px;
    margin-right:10px;
    margin-bottom:-2px;
    }

    I tried to solve the problem by reducing the width of the image and the menu bar to about 98.5 %, but then when I zoomed in on the page the image/menu bar didn't adjust properly... Looked as if the left margin of 10px was fixed and pushed the image/menu bar to the right.

    I would be very thankful for some help on this :-)

    The blog I need help with is himmelveis.com.

  2. I checked http://himmelveis.com/ and it looks like you were able to get this sorted on your own using CSS something like this:

    #branding img {
    width:98.1%;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:-1px;
    }
    
    #access {
    width:98.1%;
    margin-left:10px;
    margin-right:10px;
    background: #dadac3;
    }

    Sorry I didn't see your request sooner, and if you need any further help, please post another reply.

    Cheers.

  3. Hi! Yes, I solved the problem temporarily by setting the width to 98.1%. But there is a problem when I zoom in a lot on the page - then the image and menu bar are "pushed" to the right and out of the white sheet. So technically my solution isn't optimal... Is there anything I can do about this? Thanks :-)

  4. But there is a problem when I zoom in a lot on the page - then the image and menu bar are "pushed" to the right and out of the white sheet.

    Try using percentages for the left and right margins instead of pixels, like this:

    #branding img {
    width:98%;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:-1px;
    }
    
    #access {
    width:98%;
    margin-left:1%;
    margin-right:1%;
    background: #dadac3;
    }
  5. Great! That did it! Now the image and menu bar adjust properly. Looks so much better. Thanks again, designsimply ;-)

  6. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic