Can I just add, I was convinced, but now back to where I originally stood, that is, I believe there are to many hacks that need to be applied to get the layout as you want it.
I might give the total CSS layout a rest for a while again ;-(( Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn > -----Original Message----- > From: Taco Fleur [mailto:[EMAIL PROTECTED] > Sent: Sunday, 7 December 2003 11:54 AM > To: [EMAIL PROTECTED] > Subject: RE: [WSG] Too Much Space.. > > > > 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/ > ***************************************************** > ***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
