Hi all , I am currently designing a site in xhtml/css within Dreameaver and was wondering if in my scenario i SHOULD use Absolute Positioned DIVS ...... The site was designed in Photoshop and sliced into 3 parts (header/body/footer), these 3 slices i want to line up perfectly within dweaver , all inside a container div. I would assume on this occasion i would use Absolute ??? but not entirely sure!! Would i use relative Divs and floats...if so how the hell do you do that !!! (lol) Also .. slightly off subject, should i use em or px for my font sizes ... i tried ems , but even at 1em size the text was rather large on the screen ?!?! many thanks !!!
Ooooh issues... Generally, position absolute sucks for general page layout because web sites aren't print. The font sizes change, the content increases and decreases, etc. Position: absolute takes stuff out of document flow-- those elements don't see the page, and the page doesn't see them, so nothing will react to each other. This is usually the source of major issues. Your goal is pretty hard-- you want to line everything up pixel-perfect in every browser? Heh, good luck. You usually have to fake it to get everyone to go. Using sliced images will make your job harder than having styled divs/elements/whatever since then you really DO need to be pixel-perfect. The times I use position: absolute are: When I need to position something small and usually rather insignificant which NEEDS to be in a certain position relative to its parent-- for instance, a decorative image that I can't have as a background image which needs to sit right on a corner of a box that won't ever expand, or something which must be positioned in the middle and always cover everything that may move up under it and cannot be positioned another way-- for instance, when I use image replacement in a span in an H1. <h1><span></span>Name of site and logo</h1> The h1 here is set to position: relative so the positioned child (the span) knows where to move to. The span is set to an absolute position (relative to its parent, the h1) so that basically the image that the span is holding is ALWAYS in the same place, covering the text of the h1. Sometimes position:absolute is used for faking position: fixed in IE6. Usually what you want is to let the page simply sit in the document flow-- since aboslute positioning doesn't let the page's parts react to each other, you get wierd overlapping you don't want. A page where everything remains in flow reacts to itself-- a div filled with content expands as the content grows, and will push a footer further down. This is usually what you want. Floats are their own issue and you should read up as much as you can find about them before trying to use them-- they are easily one of the most frustrating ideas for page layout when you're new. DW will not teach you how to use them : ) As for px vs em-- pixel use is generally frowned upon as in IE, anything set to pixels (an absolute unit) cannot be resized for those who need help reading. This is especially true for web builders who have this messy love-affair with microscopic text--- okay, it looks better design-wise, but only a child with 20/20 vision can read it! However, sometimes (such as when text is sitting over an image or sits in a menu where re-sizing can break the page) px is better-- so make sure then that you've got a large enough size. Em's seem too look really huge on IE6 and 7. It's something to do with their calculations. 1em (or 100%, same thing) is supposed to mean the "default" font size, which has long been assumed to be 16px. Well, that's apparently true for IE in default but other browsers have other defaults. So, there's a trick to using em's. Most people set the font in the body and start at 80% (or .8em) and set whatever size they want in the rest of the page in ems. You may see older examples with font size being 62% or something-- that's using the old (and incorrect) assumtion that all browsers' defaults are 16px. The 80% thing gets better results. Somewhere on another forum there was a discussion precisely about IE making em's larger than their px equivilants... not sure if I can find it again.
thanks very much for the info , a lot to digest but very helpful !! could you possibly take a look at the code for my site (XHTML/CSS) and tell me if it looks right ???? and the CSS :
First, I thought IE7 could see png's fine so you'd only want to target IE6 with maybe an .htc access file or something like whatever.hover does? Okay, I don't have whatever images you're thinking of, but I built your page and then I made my version of it. There was no #navigation in the code so I stuck one in. You're using absolute positioning for the large boxes instead of letting the document flow do all the work for you : ) Chances are, if you're abso-positioning a large div of one kind or another, then you're using it for the wrong reasons. Here is your page, with ugly colours to show the different parts: http://stommepoes.nl/Tests/slimboyfatz/slimboyfatz.html And here's mine, with the extra of a header h1 using a child span with absolute positioning: http://stommepoes.nl/Tests/slimboyfatz/slimboyfatz2.html I used a float instead of abso-po to put the navigation in just about the same place as you had it. I centered the <a> text using both height (as the a's are now blocks cause I floated them left anyway) as well as line-height. It is really great for when you have background images on menus. Also, I used a pixel size so I could set the line height to be exactly the same as the pixel-height of #nav. I've set all heights of navigation in em's before, and it's usually okay but sometimes text-enlarge wrecks everything or IE6 pukes or whatever. The main is the next container, so I had it clear all the floats, which is always a good idea. The text "div" is inside the #main div so, I just let everything do what it does naturally, and used margins and padding to set the position to where i wanted it. I could not have really used margins and paddings to move the h1 span (well, I think I could, but it's harder). You can move the span's image by setting left and top coords-- the h1 stays in place and the whole page ignores where the span sits, cause it's no longer part of the page as far as everyone is concerned. Also, you had z-index on everything. There's a flow idea here too: anything you don't state a position on is "static" by default, which means the z-index is like 0. Or 1, I forget. Anything positioned relative and moved goes up by one. Anything floated sits generally above that (watch a block element spanning across a div with a float next to it-- the float will sit on top of it naturally (which is why when you have something next to a float with a width of 100%, give it a margin on the side so it can't slide under the float)), and absolutely positioned things sit on the very top-- so instead of explicitly stating a z-index, you can often get away with just positioning them first-- use z-index when two things are naturally on the same level and one needs to overlap another. Hope this gives you a better idea-- also, try no to set heights on text. In IE6, the box containing the text WILL grow to accomodate the growing text, but that's a bug and none of the other browsers will do that. The growing (or TEXT-ENLARGED) content will simply either flow over the bottom edge OR will disappear depending on how you set everything up. So if there was a bottom border, or a background colour, the text will spill out over it and look bad. Let the divs grow as needed, and they will naturally push the stuff beneath them further down (like a footer, or other divs).
thanks for all the great advice , i have played around with the code and (hopefully) refined it some more ... here is a link to the test page http://www.firstbasedesign.co.uk/index_test.html you can check out the CSS by viewing it at WC3 with their validator (but im pretty damn sure you knew that lol) thanks again !!