WordPress.com

1. bodillabrun
   Member
   Mar 19, 2012, 7:25 PM

   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. designsimply
   Staff
   Mar 28, 2012, 12:47 AM

   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. bodillabrun
   Member
   Apr 1, 2012, 2:35 PM

   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. designsimply
   Staff
   Apr 3, 2012, 12:13 AM

   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. bodillabrun
   Member
   Apr 3, 2012, 12:55 PM

   Great! That did it! Now the image and menu bar adjust properly. Looks so much better. Thanks again, designsimply ;-)

6. designsimply
   Staff
   Apr 3, 2012, 12:57 PM

   Cheers :)

Topic Closed

This topic has been closed to new replies.