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?
<div id=\"blog-header\"> <p> Blog Title </p> </div>
<div id=\"main-content-text\">
<div id=\"post-picture\"><IMG SRC=\"images/post-picture.jpg\"></div> <p>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</p> <p>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</p> <p>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</p> </div> </div> <div id=\"sidebar-right\"> 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.</p>
On Firefox (Mac) the site does not look like your mockup and you have scroll bars. The tree and clouds are where the sign up form is, so if you put a negative z-index on them they disappear behind the header. In IE7 and 8 something else happens.
I think you need to get your layout set up the way you want it in all browsers before you attempt anything else.
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.
Let me just qualify what I said in my previous post.
On Firefox (Mac) the site does not look like your mockup and you have scroll bars. The tree and clouds are where the sign up form is, so if you put a negative z-index on them they disappear behind the header. In IE7 and 8 something else happens.
I think you need to get your layout set up the way you want it in all browsers before you attempt anything else.
While I understand that you are learning, it is almost impossible for us to respond with a proper answer being that your present code shows different layouts for each browser, so we actually need to find a solution for each browser. That is because the coding is wrong, which is why I suggested you get your layout how you want it in the major standards compatible browsers, Firefox, Safari, Chrome. IE is another kettle of fish, although IE8 almost behaves itself. Once your layout appears correctly in the major browsers it becomes much easier to debug IE and from there find a solution for your z-index problem.
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!
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:
http://www.olivetreemusicstudio.com/newdraft/images/mockup2.jpg
hope that helps checking cross-browser.
you can set the z-index on the two png files to -1
I think you need to get your layout set up the way you want it in all browsers before you attempt anything else.
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.
While I understand that you are learning, it is almost impossible for us to respond with a proper answer being that your present code shows different layouts for each browser, so we actually need to find a solution for each browser. That is because the coding is wrong, which is why I suggested you get your layout how you want it in the major standards compatible browsers, Firefox, Safari, Chrome. IE is another kettle of fish, although IE8 almost behaves itself. Once your layout appears correctly in the major browsers it becomes much easier to debug IE and from there find a solution for your z-index problem.
I also think from the title that you are mixing up positioning and z-index. Read these
http://www.barelyfitz.com/screencast/ht ... sitioning/
http://www.w3schools.com/Css/pr_pos_z-index.asp