I am finally learning to use divs with css instead of tables in html.
Since I am new to this I hope you don’t mind my ignorance. Fortunately my ignorance will be short lived.
When I set up a design structure of a page, what is the best way to create white space? In other words, do I create a padding with the divs like I would use cellspacing and cellpadding in tables? Or do I just position the divs where I want them to be? (Told ya I was new!) Also, (and I know I will be sorry for asking this :x), should I use empty divs as blocks to create white space between the divs, or should I just position the divs instead.
Positioning on the page depends on what you need, fixed, absolute, floated and relative positioning all have their place and can each be used with compatibility for even the most limited of browsers. But like with HTML it’s a case of using the right component for the right job to achieve the right effect.
The key thing to remember Another Designer is the importance of separating structure (HTML) from style (CSS) from behaviour (JavaScript), don’t bother embedding style within the HTML using element attributes as it increases the maintenance you’ll have to do (and it’s a waste of bandwidth). If your CSS and JavaScript are in separate files to the HTML, it’ll give you the best advantage to get things cached (thereby making stuff load faster) and you’ll also have the benefit of being forced to deal with targeting elements properly (for style using inheritance, specificity or selectors and behaviour using unobtrusive scripting).
Check the SP reference (http://reference.sitepoint.com/css) out for some useful pieces of information and perhaps find yourself a good modern CSS book!
Hahaha, I figured most people would think that, but I honestly don’t care - there is no excuse for it. And if it’s that big of a deal, I figure I can make a plain, boring version with a screenshot of the pretty, normal version.
Thanks Stevie D.
And am I correct in that divs can be altered with either inline styles such as
<div style=“color:#00CC00;”>The text is here</div>
<div style=“color:#000066;”>
Or the text is here and looks like this</div>" or external style sheets that are attached by a “class”? Are the external styles better to use?
There are three places you can specify style information.
(1) - in the document itself (inline styles), eg <div style=“color:#123123;”>
(2) - in the head of the document, in a <style>…</style> element (internal stylesheet), and referenced by, eg <div class=“whatever”>
(3) - in a separate .css file (external stylesheet), and referenced by, eg <div class=“whatever”>
The best way is (3). That means you set up one single stylesheet covering all pages in your site, and call it up from each and every page. Then you only need to define each style once, rather than keep repeating yourself on every page. First, it’s a lot less work to set up, and second, if you want to make any changes, you only need to make them once!
Remember too, keep in mind that using the div tables does not work in anything older than IE 8. Personally, I don’t care about that stuff - I would just leave a message saying that the user needs to update their browser) - but clients and particular jobs might dictate otherwise.
Also, if this is your first time using CSS, well, you’re in for a treat
There are some things that are going to be a bit different, but overall it’s very nice to use – as mentioned above, if you want to make a change, say, background/text/link colors, you only have to do that in one place rather than editing every single document.
I just recently learned how to use div tags instead of tables, and I learned a ton! You are correct you can use an inline style tag, but I would only use inline style tags if the div tags are specific to that one page. Using a an external style sheet will be a lot easier to update since it’s in one place. You should also look into using ID tags, not just classes. ID tags can only be used once per page, while classes can be use multiple times per page.
Absolutely positioning <div>s is likely to give you a headache - it can work, if you’re smart about it, but what’s more likely to happen is that you’ll create a layout that looks fabulous on your computer but falls over and breaks into a thousand pieces at a different font size or screen resolution, or any other of the thousand variables that can affect the display.
The best way to create space is to use margin and/or padding on the elements. ‘Padding’ is within the visual context of the element - ie, it creates space between the border and the content, and picks up the background colour/image of the element. ‘Margin’ is outside the visual context - ie, it surrounds the border, and is transparent.
If you set your padding and margins in ‘ems’ rather than pixels or other fixed units, they will scale with the page, so as people change the font size, the spacing stays in proportion to the text.
I don’t think the OP was planning on using anything as bleeding-edge as CSS tables - just the kind of ordinary CSS positioning and layout that has been around for a while.
[ot]
Personally, I don’t care about that stuff - I would just leave a message saying that the user needs to update their browser) - but clients and particular jobs might dictate otherwise.
Curious attitude - I would rather let everyone see my page rather than put up a barrier in front of a large chunk of them with a big sign saying “Mere mortal, you are not worthy to view my illustrious creation!”. Websites are there to be seen, and that means you should try to make sure they work for as many people as possible. If you want to exclude 20% of people by requiring IE8 then that’s your business, but it seems a strange way to go about things.[/ot]
Also, (and I know I will be sorry for asking this :x), should I use empty divs as blocks to create white space between the divs, or should I just position the divs instead. 
