Wrong position menu after background image added
-
I recently created a new background for my site and included a top banner as part of it. I uploaded the background and while I was logged in, the site previewed as correctly. After I logged out, the menu of the site appeared off place in both Firefox and Internet Explorer, in two different computers.
Please see images below:
Correct position while logged in:
Wrong position after logging out with Firefox:
Wrong position after logging out with Explorer:
Why is this happening?
The blog I need help with is: (visible only to logged in users)
-
Never put a header image in the “body” selector. Take your browser window and make it narrower and then wider. Notice how the background image stays put but the blog moves back and forth over it?
Make a background image off your existing header image that is 5px wide and however tall it needs to be and replace your existing image you have in “body” and set it like this:
background:url("URL of new repeating background") repeat-x scroll left top #FFFFFF;Next take a copy of the original header image and crop it to just the width of the .col-full area (940px) (header and background for nav tabs centered). Insert that as a background declaration in #header (with no-repeat scroll transparent. You will have to adjust some other heights, widths and padding/margins to get things aligned.
-
I think I may have explained it the wrong way. I created a background image which includes the blue top in it. I wanted this blue section to work as the header. The way I loaded this background image was through the background tab under the appearance tab. then things happened the way I described.
So, you are advising I create another image that looks the same as the blue section, but that is only 5 pixels wide with the same height the current one has. Then load that image into the CSS with the code above?
Then follow the other steps you provided?
-
I created the 5px image and inserted it as you said with the code looking like this:
body {background:url(“http://lh3.ggpht.com/_ESuZ33-CDG0/TLMyumY1E_I/AAAAAAAABBQ/eM-ibkf0bKI/Fill%20in.jpg”) repeat-x scroll left top #FFFFFF;
font:14px Serif;
line-height:1.5;
color:#000000;
}I made the other image and inserted it as a background declaration and the code looked like this:
#header-image img {background:url(“http://lh6.ggpht.com/_ESuZ33-CDG0/TLM0yRVNbeI/AAAAAAAABBY/GUP3NnZnyjk/centeredheader.jpg”) no-repeat scroll transparent;
border:0 solid #efefef;
clear:both;
}Is this correct? Because the blue background color header did not show up on preview and the menu appeared right justified. Overall, it did not appear as I intended. I must have done something wrong.
I’ll appreciate any other help!
-
I’ll have to work with your images a bit and then post the code I come up with here. Give me a few hours since I’m in the middle of something.
-
OK, first off get rid of these from your custom CSS as they are not needed.
body { background-image:none; } body { background-color:#FFFFFF; }Next, add or modify the stuff I have below in your custom CSS.
body { background:url("http://lh3.ggpht.com/_ESuZ33-CDG0/TLMyumY1E_I/AAAAAAAABBQ/eM-ibkf0bKI/Fill%20in.jpg") repeat-x scroll left 15px transparent; } #description { margin-left:11px; width:400px; } #header { background:url("http://lh6.ggpht.com/_ESuZ33-CDG0/TLM0yRVNbeI/AAAAAAAABBY/GUP3NnZnyjk/centeredheader.jpg") no-repeat scroll left -42px transparent; position:relative; } #pagenav { margin-left:208px; } #content { padding:0 205px; } .site-title a:link, .site-title a:visited { visibility:hidden; } .col-full { margin:0; }The whole site has to be “tied” to the left margin to keep page elements aligned and in correct relation to each other.
-
I think I got all the changes I made in the above, but if things don’t look right let me know and I’ll take a look.
Also, the CSS preview does not work consistently, so if you make changes and they don’t show up, force reload the preview page and that will usually make the changes appear.
-
Hello,
I added the code you provided me with and the result of the changes is this:
while I was logged in.
Then I logged out and it appeared like this:
And this is the appearance on another computer:
The first two images are from a laptop with wide screen, while the third is from a regular 4:3 screen. Don’t know if that has anything to do with the things being out of place.
Can anything be done to make it look aligned?
Thanks for the help!
-
The below works when I use firebug in Firefox. Since I don’t have the CSS upgrade right now I can’t test logged in and logged out, and I also don’t have Windows so all I can test in in Mac, but this works for me.
The way that you’ve included the background for the nav in the header image is likely to make things difficult. Perhaps hallluke will see this thread later and come up with better fix than I have. He has more CSS experience.
The problem with doing the nav background the way you have is that if someone increases or decreases their font size in their browser everything is going to be thrown off, not to mention that different browsers are going to render things slightly differently which means that the alignment between the nav and the nav text is always going to be a problem.
body { background:url("http://lh3.ggpht.com/_ESuZ33-CDG0/TLMyumY1E_I/AAAAAAAABBQ/eM-ibkf0bKI/Fill%20in.jpg") repeat-x scroll 0 15px #FFFFFF !important; } #header { background:url("http://lh6.ggpht.com/_ESuZ33-CDG0/TLM0yRVNbeI/AAAAAAAABBY/GUP3NnZnyjk/centeredheader.jpg") no-repeat scroll left -42px transparent; left:-200px; padding:45px 0 0; } .col-full { margin:0 210px; } .site-title a:link, .site-title a:visited { visibility:hidden; } #pagenav { float:left; left-margin:208px; } #topsearch { float:right; } #description { margin-left:-200px; width:400px; } -
As the site stands now, the menu bar is not below the website’s name, but off to the right. How can I put it back to where it was so it does not look off place?
-
-
- The topic ‘Wrong position menu after background image added’ is closed to new replies.
WordPress.com Forums 