Taco,
Apologies for the length of this. We can go offlist with this if people
want.
Start off by doing it all one step at a time. Don't try to dump your content
into divs and assume it will happen. Here is a method I'd use:
1. Looking for containers
--------------------------
look at your design or layout (before you made the move to full CSS) and
work out the main containers on your page.
2. names
--------------------------
these containers will become your divs, so you should think of names for
them that have semantic meaning. Eg. topbanner, nav, content, container
If they are unique to a page, use id's rather than classes as specificity
may come into play later on. ID's have more weight than classes.
3. position method
--------------------------
work out the positioning method for each of the divs. Will the overall div
sit in the center of the viewport or line up with the left? Work out whether
any items can be floated or have to be absolutely positioned. Avoid absolute
positioning if possible - a long explanation would be needed to explain why,
but it will affect footers, centering and even printing in N6 and N7.
If unsure, ask the list about which methods they would use to position each
element. This is probably the hardest step as experience comes into play
4. html code
--------------------------
drop these empty divs onto a new page. So you end up with something like:
<div id="container" >
<div id="banner" >
</div>
<div id="nav" >
</div>
<div id="content" >
</div>
<div id="footer" >
</div>
</div>
5. Drop in content
--------------------------
Drop in some basic representational text for each container - keep it simple
at this stage. You are not trying to lay the page out, just sort out
positioning.
6. Color the divs
--------------------------
style each div with a different background colour and an outline color:
#banner
{
border: 1px solid #000;
background-color: #ddd;
}
This will allow you to see how the pages are looking and how divs are
interacting.
7. Test
--------------------------
Look across as many browsers as you can to see if the positioning models are
working - especially if you scale in and out the viewport. Make sure you are
aware of your doctype as this will affect the range of IE's. You don't have
to use standards compliance mode, but you should be aware of it and its
effect on page elements.
8. refine the positioning
--------------------------
Refine positioning methods until you get something that looks like what you
are after.
9. style the containers and content
--------------------------
Now, assuming you have the containers in the right spot, you can start
styling the content inside them.
Use as few classes as possible. You should be able to style any element
inside one of the containers using descendant selectors.
eg:
#banner {}
#banner h1 {}
#banner p {}
#banner ul {}
#banner ul il {}
#banner a:link {}
Etc.
10. test again across browsers
--------------------------
Gotta keep doing it at each step! I have two machines in front of me all the
time (mac and windows) with 12 different browsers - makes it all much easier
to fix bugs quickly. There is also Browser Cam - the ultimate test tool.
11. old browsers
--------------------------
look at your site in older browsers (mainly NN4) and remove styles that
cause problems. Pay attention to margins as NN4 freaks about them.
To hide stuff from these styles, place them in an advanced style sheet and
import it using @import
<style type="text/css" media="screen">@import
url(/stylesheets/floatutorial.css);</style>
12. read a few tutorials
--------------------------
There are three different CSS layout tutorials in the sites below. They take
you through each step at a time. They are basic but can be added onto to
suit your needs:
http://css.maxdesign.com.au/floatutorial/index.htm
http://css.maxdesign.com.au/selectutorial/index.htm
There is also css-discuss:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://css-discuss.incutio.com/?page=TwoColumnFloat
Heaps of good stuff there...
Does this all make sense? It should give you a start. The key point is to do
each step and then test. Don't try and build a page in one hit.
Feel free to contact me off list if you are ready to throw your computer out
the window. The first few CSS layouts are hell, the rest get easier.
: )
Russ
listmum
>
> OK, I am convinced.... It's time to gracefully not please the older browsers
> with eye candy...
>
> So I started converting the table layout into divs.
> Guess what! It looks like a mess, I must not fully understand the concept
> yet.
>
> http://development.developer-exchange.com/test.cfm
>
> It starts out fine, then the #menuTop does not show the top and bottom
> border
> The #attentionContainer I really can't get any to look like before, I was
> able to get the 3 divs lined up next to each other, but there is no border
> showing for the #attentionContainer
>
> Then I tried
> #attentionContainer a
> {
> some stuff here
> }
>
> And it just wouldn't do anything for the "a" elements within the context of
> #attentionContainer
>
> Then the text runs through the menu.
>
> I haven't gone any further than this...
>
> Come on you got me started, now don't let me down ;-))
>
>
> cheers
>
> Taco Fleur
> Tell me and I will forget
> Show me and I will remember
> Teach me and I will learn
>
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
