June 30, 201214 yr An example of what I'm talking about could be the design of this site's layout, How is the DW and FW icons overlapping the menu bar? On top of that how is it when I right click view background it takes a smaller shape but when I exit it, it fits to the page? Is a scroll with page effect on? I'm trying to design a website similar to http://www.carowinds.com/,'>http://www.carowinds.com/, notice how the roller coaster and the two children fit beside the slider but when you view the background it shrinks dramatically to where you would think the slider couldn't fit in the middle. Any idea on how to go about achieving what I've outlined? Specifics on if it is the HTML or the CSS would be helpful too. I've already designed a background with menu bar I wish to use and when I sliced it for export to dreamweaver the slider and all fits into place but it doesn't fit to the entire page like http://www.carowinds.com/ Edited June 30, 201214 yr by SasukesRage
June 30, 201214 yr I think it is just: background: url('background.jpg') no-repeat center top #999999; The background image has been made so that it fits around the main container div. Then there is a header div which will have another background image in it with bits of the icons. Then probably another background image on the left side of the menu bar div. If you download Firebug for Firefox you have just inspect the page hover over the sections and it will give you the CSS and HTML code for the bit your hovering over.
June 30, 201214 yr Another way to do it: Overlapping objects are possible in CSS. A method to do it is by, creating two <div> in html which will be the overlapping object. Now to overlap them, CSS have a property called z-index. Bigger value = closer to us. A quick example: <style> #header{ z-index: 1; /* Set value to 1 because header will be at the bottom*/ } #fwlogo{ width: 100px; height: 100px; background-image: /*url of the icon*/ z-index: 2; /* To overlap the header */ } #fwlogo{ width: 100px; height: 100px; background-image: /*url of the icon*/ z-index: 3; /* To overlap the header */ } /*Search up CSS Rotation property aswell Use position: absolute to position the icons */ </style> <body> <div id="header">header stuff here</div> <div id="fwlogo"></div> <div id="dwlogo"></div> </body> </body>
June 30, 201214 yr Author I think it is just: background: url('background.jpg') no-repeat center top #999999; The background image has been made so that it fits around the main container div. Then there is a header div which will have another background image in it with bits of the icons. Then probably another background image on the left side of the menu bar div. If you download Firebug for Firefox you have just inspect the page hover over the sections and it will give you the CSS and HTML code for the bit your hovering over. Thank you very much, I felt it was something simple I was looking over, I will get firebug and try and apply the instructions you have given me to my design in dreamweaver!
June 30, 201214 yr Author Another way to do it: Overlapping objects are possible in CSS. A method to do it is by, creating two <div> in html which will be the overlapping object. Now to overlap them, CSS have a property called z-index. Bigger value = closer to us. A quick example: Thank you very much, I'm going to try this as well if the first method Marcelc doesn't work out for me.
Create an account or sign in to comment