Hi I am new to css and div tags and trying to get a grasp of the concept. My question is if I already have a container for my page as an app div. Is it possible to use lets say three app divs for a background image <top> image of clouds <middle> filler color auto expanding <Bottom>land I tried to position an app div behind my main container and it is always to big for the browser window and makes you have to scroll. Would I have to Create a background container and place the three divs inside of it so that the middle would automatically increase in height? The above code is just for the top part of the background.
The way I'd approach that is the flat filler color and BOTTOM land image I'd place on body. body { background:#8EF url(images/land.png) bottom center repeat-x; } Code (markup): Gets you a 'sky' color and the land in place and tiled at the bottom of the page. For the clouds, I would create a div to apply that to and place it IMMEDIATELY after <BODY> but before any content. <body><div id="clouds"></div> then all you need to do in your CSS is: #clouds { /* Height and margin size should equal height of tiled image. Using a negative margin reduces this element's 'flow size' to zero, letting our content 'ride over' it without having to dick with absolute positioning or z-index. */ height:100px; margin-bottom:-100px; background:url(images/clouds.png) top center repeat-x; } Code (markup): You'll notice I align it top/center. This in theory should make lining up any elements if you want the background to show through a bit easier. It seems a bit counterintuitive at first to put the thing at the bottom of the page first, but because body is the only element you can rely upon to scale properly it's the best choice.
SOund like it will work. I have tried every possible configuration using app divs and I don't think you can do it with them the way I was trying to. My other plan was to attach a div to the bottom of the content container and give it a lesser z-index then the body. I am curious now that you mentioned it however is there zomething wrong with using the z-index that I should know about?
It's just a pain in the ass to keep track of - especially when child elements are based off their parent and cannot override a 'uncle/aunt' element. For example if line-height is set to 1.2em: <div style="z-index:1; margin-bottom:-1.2em;"> <div style="z-index:50; background:#CCC;">Test1</div> </div> <div style="z-index:2; background:#8C8;">Test2</div> Code (markup): Test 2 will ALWAYS appear OVER test1, becuase test1's parent is z-index:1 - the z-index on the inner element only works for it's siblings, not it's parents. Thing is, if you understand how position:relative always depth-sorts over non-positioned elements, you can achieve what is desired thus: <div style="margin-bottom:-1.2em;"> <div style="position:relative; background:#CCC;">Test1</div> </div> <div style="background:#8C8;">Test2</div> Code (markup): In that version test1 will always render over test2 - and it's less code to boot! I have rarely if ever needed z-index in a layout - people often dive for it a bit too quickly.