strange background problem in home page.

[shakmbakm]

The background in my home page seems to be positioning itself at the top even though i have it set for middle in my css file. It is also only doing this on the home page and none others that use this css file. I can post the code if needed, thank you

[ralph.m]

I can post the code if needed, thank you

Preferably a live link. Nothing beats seeing the real thing.

[shakmbakm]

gotcha, here is the link http://superfunproductions.com/home.html you can see that its being cut off on the left side a bit i'm trying to fix that as well

[ralph.m]

Your original image has the leaves cut off on the left and a lot of empty space on the right, so you need to fix that first. Crop the original file to the leaves only, then save it for the web again.

[shakmbakm]

well i'm curious as to why it is doing this because this is the only page that it looks like this. On all other pages the background is centered.

[Paul O'B]

You don't have much content on the first page so the background is centered with the content as the body height depends on content.

You could set a min-height for html which will allow the image to sit in the center.

html{min-height:100%}

However on very long pages your image might not be visible if there is a lot of content so better to used background-attachment:fixed instead.

body{
background:url(images/leaves.png) no-repeat fixed 50%;
}

Now the image will be central whatever the content.

Note that at 400k that leaves.png is 10 times bigger than I would like to use for a background like that.

[shakmbakm]

it looks like that helped the leaves, I will look into making it smaller but i have to go through the boss. The facebook and twitter links are still behind the slideshow. Should the same thing be done for them?

[shakmbakm]

the header is being cut off as well and i'm not sure what is doing that as well as the buttons overlapping it.

[shakmbakm]

i fixed the button overlapping problem but now they are not centered in the lines.

[ralph.m]

Trying to align elements with a background image is fraught with difficulties, but as a quick fix, you could do this:

#mainMenu {margin-top: 18px;}

A better option would be to add a top and bottom 1px border to the UL and not have the lines in the background image.

[shakmbakm]

thanks a bunch, any idea why the header is cut off?

[ralph.m]

thanks a bunch, any idea why the header is cut off?

Yes, your container is 1000px wide, but your header2 image is 1080px wide, so because it's centered, 40px is hidden either end. Either trim the image to 1000px width, or do something like this:

url("../images/header2.png") no-repeat scroll 40px top transparent

Your UL is also set way too wide, so it's worth fixing that. Don't let any elements be wider than your container, or it will cause problems somewhere along the line.

[shakmbakm]

ah I see, I didn't catch that. Thanks so much for your help.

[shakmbakm]

it's strange that the twitter and facebook links have disappeared on the home page as well as the twitter ticker. They were stuck behind the slideshow some how but now they are not appearing at all. I suppose that looks better but they are supposed to be on the bottom.

[ralph.m]

Yes, because the slideshow is positioned absolutely, the other elements don't know it's there, and are thus sitting underneath. A better option that position: absolute on the #slides div would be

#slides {
  width: 800px;
  margin: 0 auto;
}

Then you'd also have to reposition the back and forward arrows. But the Twitter/ FB buttons will appear where they should again.

[shakmbakm]

hmm... that made the buttons appear but they were on the right side of the screen. It also looked like it lowered the slideshow or is that just my imagination? Since the buttons are absolute as well would it work to reposition them like this as well?

[shakmbakm]

I don't know why, but the arrows won't reposition. They don't seem to move what ever i do

[ralph.m]

I don't know why, but the arrows won't reposition. They don't seem to move what ever i do

Add position: relative to the #slides div, and then you can position them in relation to that with position: absolute.

[shakmbakm]

Derp of course, that's the one thing that didn't come to mind. Thank you.
Last thing is it moving down or is it just playing mind tricks on me?
The buttons are a bit to the right, I'm not sure why it's doing that because I have it at center now?

[ralph.m]

The #header div has a large height on it (not recommended to add heights) so it's pushing the slideshow down. Presumably that's the same as before.

Not sure what's moving the buttons, but you could code it better, anyhow. Firstly, don't use <center> as it's from the last century (a presentational element). Create a container div instead, and perhaps set the buttons to display: inline-block to center them. Also, rather than use <br>s, perhaps but the copyright line in its own div or a <p> to keep everything neat and nicely stacked.

[shakmbakm]

Thanks for the tips! Most of this was here when I started on the site, I inherited it form another person so sometimes I get confused.

[shakmbakm]

Right now it looks like its only through the html. So I think I would have to create a class connected to them before I could make a container.

[ralph.m]

Not sure what you mean. Start by replacing <center> with something like <div class="footer">.