Top image covering sidebar

[ModernRevolutions]

So here is my website: http://www.modernrevolutions.net. But on smaller resolutions or if you actually make the browser window smaller, it moves the top image to make it the center of your window, however for some reason it actually starts to cover the sidebar. I've tried adding:

z-index:0; to the header div code and even adding
z-index:100; to the sidebar code. But it didn't work. Here is a screenshot of what I am talking about: http://i52.tinypic.com/rh34u9.jpg. Can someone please help me? Thanks!

[ModernRevolutions]

Anyone? It doesn't seem difficult but im not the brightest one when it comes to codes

[ModernRevolutions]

Anyone have ANY ideas? D:

[deathbycheese]

I can't seem to duplicate the problem. Got a screenshot?

[deathbycheese]

how about if you set the image to be the background of your "header" div rather than an image within the div?
Also try specifying an exact height in the CSS for that div.

[ModernRevolutions]

Well I already have a background for that div, its the repeat-x background image. Also, there is a screen shot in my first post. As you can see its covering have of the "Search" header

[deathbycheese]

try specifying an actual height for the image. Oh, and z-index:-1 on your header div might help if you don't want the picture to be it's background.

[ModernRevolutions]

I did try setting a height and also tried the -1 z index, still nothing D:

[auntnini]

Oh, boy! It's hard to see what is what because so much stuff is in there. Why are all your internal site references ABSOLUTE URLs?

I tried <!-- commenting out the big image --> and noticed HEADER has a % width and other elements do not. At one point when reducing the window size, the links cover up the Search side bar. Maybe getting a CLEAR: BOTH style or <br clear="all" /> in there would prevent that overlap.

I'd create a WRAP div to encompass ALL the content and give it a width: 95%; min-width: 800px; max-width: 1000px; (or some such) and do the same with the image and other content -- such as done at http://www.gerigeans.com to shrink the image in proportion to window size. Kaley.jpg is 800px wide; it could be background-image for WRAP.

Alternatively,if you can give up #header background-image: url(kaleyRepeat.jpg); or make it a PNG-24 with alpha, have html { margin: 0; padding:0; background: #dedede url(Kaley.jpg } no-repeat center 10px; } and make body, wrap, #header { background: transparent: }

[deathbycheese]

I did try setting a height and also tried the -1 z index, still nothing D:

Did you apply the -1 z index to the image or your header div?

[ModernRevolutions]

auntnini: I am so confused lol don't know what an absolute URL and don't know anything about wrap divs :/

deathbycheese: I dont really know how to add a z-index to a image code :/

[deathbycheese]

That's good, because I was hoping you were applying it to the div. Meanwhile, I'll see what I can do with ur code. It may need a teensy bit of adjustment... stay tuned.

dbc

Oh, have you tried reducing the font size of your nav and search text?

dbc

got it! You have position:relative on .sidebox, but not on #side. It works if you add position:relative on your #side div.

Let me know if this works!

dbc

[ModernRevolutions]

it worked! thanks!!!

[deathbycheese]

Great! Glad I could help.

dbc