First of all, thanks for your step by step guide.
> 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.
Believe it or not that's what I did. I tried to look at divs as I looked at
tables when doing the design.
> 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.
Currently doing so.
> 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
I seem to get the positions right, but just the minor details as stated in
my previous email I can't get right.
Also some other stuff like the top navigation, I (stole) the code from
maxdesign, but it appears to play up in Netscape, surely it's something I
did wrong but can't get my head around it.
> 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>
Currently doing so.
> 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.
Currently doing so.
> 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.
Currently doing so.
> 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.
Currently doing so.
> 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...
I'll dive into the tutorials you suggested, see if it will help me get a
better understanding of what is currently wrong.
> 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.
Makes, sense, and basically that's how I normally tackle my design.
> 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.
You'll wish you never said this, I easily get to the point of throwing the
thing out of the window, so you might want to keep your communication
channel open exclusively for me ;-)) (joking ofcourse)
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
