See, absolute positioning is a waste of code in this case. Just apply it as a background image to the header, make the header tall enough to show all of it, then use a negative margin to 'ride up' the content over it. No need to futz with z-index, absolute positioning or any of the other things that are notorious for causing headaches. This would make the sidebar gradient a bit tricky, but if you set it to only repeat-x and position the top of it down the page, it should be fine.
It flattens instantly, and acts like a normal PNG. But if you open the same file in Fireworks, you still can edit it. Unless, you edit it in some other program, AND save it back to xxx.png, then Fireworks can't open it.
You have a small typo in your code, causing it to not validate. I am sure that the OP noticed when attempting to use it, yet I thought it worth while to post so others can benefit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> <title> </title> </head><body> <div id="containter"> <h1> Generic Business <b></b> </h1> <ul id="topMenu"> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">About Us</a></li> </ul> <div id="sideBar"> <address> 0800 234 5678<br /> <span>info@genericbusiness.com</span> </address> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Case Studies</a></li> </ul> <!-- #sideBar --></div> <div id="content"> <h2 class="home"> Welcome to<br /> <span>GenericBusiness.com</span> </h2> <h3>Looking for a way to do stuff</h3> <p> Our stuff could be the right solution for you. We can provide... blah blah blah </p> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <!-- #content --></div> <div id="footer"> © Generic Business 2008 | Address 1, Address 2, City POSTCODE | 0800 234 5678 | www.genericbusiness.com | info@genericbusiness.com <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Also, is there any reason why you choose to wrap the address details in a <div>, why do I never see <address> being used? Nick
It is a non-standard format. Technically it's saved as a "Fireworks PNG", and when its opened by programs that don't support this...which is mostly all of them, it will be flattened. However, there is also a normal PNG option in Fireworks, but as you said, that will be automatically flattened.
Nick, he's not wrapping the address in a div, but because it needs to share a parent with the ul, so Crusty here saw that whole chunk of page as a sidebar (div id="sidebar"). I use address quite a lot. I guess it was meant originally only for web content addresses, but I use it for actual postal addresses all the time... I also just used it for something I almost used a list for, but found it a sequence rather than a list (a name-email pair, then telephone number, twice). It's a block, and by default is italic in browsers (dunno why). You have to put your line breaks in manually-- and this is okay, as it's a line break that's really part of the content. Prolly other people don't use address for the same reason I don't use acronym... too lazy to read up on what it is and just use other elements like p or span or lists... which isn't quite correct, semantically.
Man i feel stupid. I´ve had few designs that i couldn´t make because of the header image came too down, and had to redesign the header. So stupid so stupid... So it´s ok to use negative margins? I´ve always thought that´s a no no. As i´ve said before, i learn something everyday from css. And now i´ve learned again! Love this forum <3
Uhm, while there is a typo (containter?!?) it would NOT cause it to not validate - since the opening div is still valid, the closing tag is still valid, the only part that wouldn't match is a COMMENT. A mismatched comment would NOT cause it to fail validation. It's not a web address (well, the first half at least isnt'), so the ADDRESS tag is inappropriate according to the meanings set forth by the W3C. Using a tag for something it doesn't mean is semantically incorrect (see wrapping an image that is not in text-flow in a paragraph tag - difference between a plate and a smiley). The W3C themselves relegated the tag to someplace you'd never see anyone use it - kind of like MENU. We have a perfectly good list tag called MENU, it's been deprecated in favor of unordered lists because... uhm... Reading the specification... uhm... Yeah. Pretty much I don't use address because the 'meaning' isn't what's useful on a modern website... Though to be honest I don't think that makes a lot of sense either. There are times on things like ADDRESS, DIR and MENU I am tempted to ignore the W3C recommendations. Some people get confused on how negative margins work, and as such use them wrong/incorrectly. Most of the time it's that they fail to understand the difference between 'flow' and 'render'. I separate in my mind an elements 'box' into two separate boxes - flow and render. A flow box is used to determine how big the object is in flow - the render box is how big it is rendered on the screen, and they are NOT the same thing. (these are my own terms for this). Increasing or decreasing the margins changes the size of the 'flow box' - width and padding effect the render box. Absolute positioning removes the item from flow, relative positioning (when used with top, left, right and bottom) moves the 'render box' without moving the flow box. (which can be used to your advantage for making quick and simple dropshadows http://battletech.hopto.org/html_tutorials/eightcorners/template.html ). At least, that's how I keep track of it in my head. I find negative margins easier and more reliable than floats in a LOT of situations (label/input pairs for example) and can be really powerful when combined with floats (the zero "flow width" column tricks). On the Y axis negative margins are simple - The big thing to remember is how to handle depth sorting without resorting to z-index. Normal elements (position:static) flow one atop the other in 'flow order', and position:relative elements inherently render over normal ones. If you want the content area to render over the header, just make sure that your content area is set to position:relative. On the X axis it gets a bit more complicated due to the effect on page-flow, but some layouts (fluid three column non-table) are impossible without them. Have a look at this page of mine, it explains how the most common type of three column fluid center DIV layouts works. http://battletech.hopto.org/html_tutorials/3coldiv/template.html This javascript form validation demo of mine also makes use of negative margins instead of floats to position the inputs next to the labels. http://battletech.hopto.org/html_tutorials/formValidate/ Even my non-image rounded corners demo uses negative margins to 'pull in' the side elements. http://battletech.hopto.org/html_tutorials/rounded_css_borders/ ... and these all work from IE 5.5 through 7, FF, Opera and Safari. (though the 100% min-height seems to be broken in Opera 9.51)
I was in the bookstore Saturday, and saw Ian Lloyd's HTML reference book, and was just flipping through to see what could possibly be so great about it, and found lots of deprecated stuff... including <menu> which blew my socks off. We had a <menu>?? Then what the...? I didn't buy the book, but I was glad I saw a few interesting deprecated elements. I never saw the reason to use Address with "web addresses" or "author addresses" cause frankly, I never see anyone put such information on a web page, except maybe Jukka Korpela and guys with pages that look like that. Just like I feel I'm perfectly in my right to use a Definition List for the results (returned to the user) of a filled-in submitted form, or any other word-pair with relations of some sort, I also have no problem using Address for... addresses. Like, real ones, where using Address beats out using a P or a bunch of spans or some weird sh*t. Duh, did I just misread the code or what? I could've sworn I didn't see th contact div, just the sidebar div. Sorry Nick, disregard what I'd said.
Yeah and everyone CORRECTLY told him he'd have to start out with a "clean" image first-- you can do all the code with the crappy image, but then when you're cutting out the stuff like the puzzle piece, it'll look like crap because what he posted is artifacted, watermarked and small.
Slice the jigsaw piece and make it a background image and there is no need to place with z-index or make it transparent