z-index vs. fixed

[andyjoe81]

So I’m almost done converting my first photoshop mockup (I can’t believe I didn’t do my drafts there for all my other websites!) for a wordpress site. Right now the draft has some remaining issues. In Safari some things look a bit off but not so much in Firefox. I haven’t even looked at the site on IE yet, but I know there are going to be some issues with my excessive webkit-radius divs and png files. You can check it out here: http://olivetreemusicstudio.com/newdraft/

But what I’m mostly concerned about and can’t seem to figure out is how am I going to deal with my layers? Two fixed divs are acting just right except I want them behind some relative divs… but if I simply change them (left sidebar and header) to relative, I don’t think the current effect will work. Any ideas as to how to get the tree picture and the clouds to go behind the left sidebar and heading without losing the current layout?

Thanks so much for your help!

~Andy

Here’s my code for index.php:

Code:

Username:

Password:

Login

Blog Title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Recent tweets
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

[andyjoe81]

Here’s my mockup!

[img]http://www.olivetreemusicstudio.com/newdraft/images/mockup2.jpg[/img]

[Makeshift]

http://browsershots.org/
hope that helps checking cross-browser.

you can set the z-index on the two png files to -1

[andyjoe81]

Hey folks, I’m only a little ways into actualizing the psd mockup in code. I just didn’t want to go too much further until I resolved the issue of my tree and clouds showing up in front of the divs. My trouble is, if I make it relative and give it a z-index, it has been disappearing, perhaps behind my repeat x background image? I do I make it relative without losing it or having it not line up right?

Please don’t trouble yourself with all the other issues in my site (like browser compatibility) besides what I’m asking about… its a given that I’m a novice at this and I’m heavily leaning on Chris’s three step tutorial on wordpress theme making to get this job done. My apologies if you have to sift through much bad code to get to the root of my problem. I did run the validator and I’ve done most of what it’s told me to do, but there may still be issues.

Right now all I want to do is get the tree and the clouds behind the divs but in front of my background image.

[andyjoe81]

Thanks Virtual. Sorry that my lack of knowledge is keeping me from asking questions that can be answered. I’m still a bit confused but I’ll read those articles, hopefully figure out what is making this look different than how I want it to look in any browser. Hypothetically what I’m trying to pull off will be possible though, I’m hoping. Thanks again everyone!

[Author]

Posts