My css skills are weak and I need help.
The alignment of my web site content is all over the place depending on which browser I use. It is more close to what I want in Firefox using a mac.
My url ishttp://www.socialmediafanpages.com/bol/
I wanted the background image to fill the window.
I found this background alignment code
background: url(images/background01.jpg) no-repeat center center fixed;
It seemed to work better than putting the background image inside of a div which did not fill the window.
The main problem is that content should line up below the logo of the man kneeling.
In one browser it may be to the far right
In one browser it may be two inches below the logo.
I need to know how to make it be very close to the same regardless of the browser.
I am sure that I must be coding incorrectly
What are some suggestions?
The content is supposed to line up with the background. The top left of the nav bar should be right under the logo. In some browsers the nav bar and content are too low or to far to the left of the logo.
The graphic designer made an complex background and Im trying to may the content align properly in all browsers. I am not having success in doing it.
DELETE align=”center” to both divs and delete the first div, make sure to delete it’s closing tag at the very bottom. We will resolve centering with CSS, YAY :)
Your HTML should look like this
So how to do it? You can remove all declarations for #wrapper
width: 730px;/*the width of your content*/
margin: 0 auto;
I set the position to relative so you can specify a top pixel adjustment relative to the body tag. This says 0 margin top and bottom and 50% both left and right which means you’ve got a centered div if you specify it’s width.
Now for the background image:
background: #26598e url(images/background01.jpg) no-repeat top center;
What I changed, I set a default color so the bottom has no white.
changed center center fixed to top center because you want the logo to stay up. Although I would recommend you separate the logo and the background.