Re: [WSG] Too Much Space..
> Don¹t feel bad! Using a basic table grid for layout and everything else via > CSS is not evil - it is completely acceptable. However, it is just not as > pure as full CSS (from the "removing presentation from content" point of > view). Zeldman would call this "hybrid" layout. It is still a long way > better than nested tables, font tags and invalid code. Russ makes a good point here and I just thought I would that using tables for actual tables is not evil either. That is, in fact, what they were originally for and still allow critical data formatting (such as numbers in rows and columns) to be maintained for non-CSS browsers. The "evil" is in using tables for page layout (as opposed to presenting tabular content). It's also important to remember that in a devolved content management model that the content creator is not likely to use DIV for tables of numbers/information as they are not likely to have the tools or skills available. Gary Menzel Web Development Manager IT Operations Brisbane -+- ABN AMRO Morgans Limited Level 29, 123 Eagle Street BRISBANE QLD 4000 PH: 07 333 44 828 FX: 07 3834 0828 If this communication is not intended for you and you are not an authorised recipient of this email you are prohibited by law from dealing with or relying on the email or any file attachments. This prohibition includes reading, printing, copying, re-transmitting, disseminating, storing or in any other way dealing or acting in reliance on the information. If you have received this email in error, we request you contact ABN AMRO Morgans Limited immediately by returning the email to [EMAIL PROTECTED] and destroy the original. We will refund any reasonable costs associated with notifying ABN AMRO Morgans. This email is confidential and may contain privileged client information. ABN AMRO Morgans has taken reasonable steps to ensure the accuracy and integrity of all its communications, including electronic communications, but accepts no liability for materials transmitted. Materials may also be transmitted without the knowledge of ABN AMRO Morgans. ABN AMRO Morgans Limited its directors and employees do not accept liability for the results of any actions taken or not on the basis of the information in this report. ABN AMRO Morgans Limited and its associates hold or may hold securities in the companies/trusts mentioned herein. Any recommendation is made on the basis of our research of the investment and may not suit the specific requirements of clients. Assessments of suitability to an individual?s portfolio can only be made after an examination of the particular client?s investments, financial circumstances and requirements. * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Hi James, I am probably lost, why would it matter what width the viewport is, if you only care about having a box aligned to the <2please_james>centre that is 80% wide? Hi, Was referring to centering a fixed width box - can't really do this with a variably size viewport and right/left set to a percentage. Auto will fill in the blanks for you there. e.g: original, for instance -800px--- --auto---600px-auto-- -800px--- --10%640px--10%-- on resize: 1000px--- --auto---600px-auto-- 1000px--- --10%800px--10%-- HTH russ weakley wrote: "ode to poo" with centred container: http://www.maxdesign.com.au/jobs/poo2.htm Why poo? Good question. Maybe something to do with a 3 year old child that is hassling me as we speak. :) Russ I thought it was because poo floats? sorry, just thought I'd raise the bar a bit there, sorry if I've trodden in it... ahh ok I'll stop now. Cheers James * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Aaah that kind of poo! http://www.maxdesign.com.au/jobs/poo2.htm gave me a 404 Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn > -Original Message- > From: russ weakley [mailto:[EMAIL PROTECTED] > Sent: Sunday, 7 December 2003 7:01 PM > To: Web Standards Group > Subject: Re: [WSG] Too Much Space.. > > > "ode to poo" with centred container: > http://www.maxdesign.com.au/jobs/poo2.htm > > Why poo? Good question. Maybe something to do with a 3 year > old child that is hassling me as we speak. :) > > Russ > > > > > > Cheers Russ, > > > > Now a > > Around it and it won't work? > > > > Anyway, I let you guys get back to work and see if it all > might make > > sense when I sleep over it... > > > > PS. Just curious is poo another word for kakka, i.e. sh^t? Or just > > something out of the blue. > > > > Taco Fleur > > Tell me and I will forget > > Show me and I will remember > > Teach me and I will learn > > > > > >> -Original Message- > >> From: russ weakley [mailto:[EMAIL PROTECTED] > >> Sent: Sunday, 7 December 2003 6:05 PM > >> To: Web Standards Group > >> Subject: Re: [WSG] Too Much Space.. > >> > >> > >> Try this: > >> http://www.maxdesign.com.au/jobs/poo.htm > >> > >> Modify as required > >> Russ > >> > >> > >>> Is there anyone on this list who can easily put together > a 3 column > >>> layout? Hold on, there is more. All 3 columns need to be > >> 33% (or come > >>> to 100%) > > * > The discussion list for http://webstandardsgroup.org/ > * > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Oops. A flaw in the version I just sent below. Ignore. Teach me to do too many things at once. :( Russ > "ode to poo" with centred container: > http://www.maxdesign.com.au/jobs/poo2.htm > > Why poo? Good question. Maybe something to do with a 3 year old child that > is hassling me as we speak. :) > > Russ > > >> >> Cheers Russ, >> >> Now a >> Around it and it won't work? >> >> Anyway, I let you guys get back to work and see if it all might make sense >> when I sleep over it... >> >> PS. Just curious is poo another word for kakka, i.e. sh^t? Or just something >> out of the blue. >> >> 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/ *
Re: [WSG] Too Much Space..
"ode to poo" with centred container: http://www.maxdesign.com.au/jobs/poo2.htm Why poo? Good question. Maybe something to do with a 3 year old child that is hassling me as we speak. :) Russ > > Cheers Russ, > > Now a > Around it and it won't work? > > Anyway, I let you guys get back to work and see if it all might make sense > when I sleep over it... > > PS. Just curious is poo another word for kakka, i.e. sh^t? Or just something > out of the blue. > > Taco Fleur > Tell me and I will forget > Show me and I will remember > Teach me and I will learn > > >> -Original Message- >> From: russ weakley [mailto:[EMAIL PROTECTED] >> Sent: Sunday, 7 December 2003 6:05 PM >> To: Web Standards Group >> Subject: Re: [WSG] Too Much Space.. >> >> >> Try this: >> http://www.maxdesign.com.au/jobs/poo.htm >> >> Modify as required >> Russ >> >> >>> Is there anyone on this list who can easily put together a 3 column >>> layout? Hold on, there is more. All 3 columns need to be >> 33% (or come >>> to 100%) * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Hi Ben, I'm sure I will not use anything else but table less layout WHEN it clicks, I just hope it clicks soon ;-)) > Don't give up on it - once it clicks, you'll never taint your > code with layout tables again! > > The following isn't really structured, more a collection of > statements: > > Don't attempt to force the CSS into recreating the > restrictive confines of a table layout. CSS layouts do > require a fundamental change in thinking, Is there an easy way trying to get a grasp of what that fundamental change in thinking is? > but the freedom you > have is incredible. Cross-platform / cross-browser support is > exceptional for practically all the things you need to do. > It's good for most things you want to do, and then there's > the fun in pushing the boundaries for things you'd like to do. > > Now, not to fob you off or suggest the wise words of a bunch > of losers who have nothing better to do on their weekend than > work aren't helpful... but have you seen the css-discuss > Wiki? http://css-discuss.incutio.com/ I'll have a peek! > And I think Russ' tutorials are fantastic: > http://css.maxdesign.com.au/ Yeah they are agreat and helped me out a lot. Cheers * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Cheers Russ, Now a Around it and it won't work? Anyway, I let you guys get back to work and see if it all might make sense when I sleep over it... PS. Just curious is poo another word for kakka, i.e. sh^t? Or just something out of the blue. Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn > -Original Message- > From: russ weakley [mailto:[EMAIL PROTECTED] > Sent: Sunday, 7 December 2003 6:05 PM > To: Web Standards Group > Subject: Re: [WSG] Too Much Space.. > > > Try this: > http://www.maxdesign.com.au/jobs/poo.htm > > Modify as required > Russ > > > > Is there anyone on this list who can easily put together a 3 column > > layout? Hold on, there is more. All 3 columns need to be > 33% (or come > > to 100%) > > > > * > The discussion list for http://webstandardsgroup.org/ > * > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
Hi Taco, Don't give up on it - once it clicks, you'll never taint your code with layout tables again! The following isn't really structured, more a collection of statements: Don't attempt to force the CSS into recreating the restrictive confines of a table layout. CSS layouts do require a fundamental change in thinking, but the freedom you have is incredible. Cross-platform / cross-browser support is exceptional for practically all the things you need to do. It's good for most things you want to do, and then there's the fun in pushing the boundaries for things you'd like to do. As with anything, proficiency comes with experience. You have a tremendous wealth of information available to shortcut your learning. You don't need to jump straight in at CSS Zen Garden level (where all the designers have probably been working with CSS for a few years now). My first intro was Rob Chandanais' Layout Reservoir at http://www.bluerobot.com/ Consider building a few dummy sites to test out things, rather than feeling pressured with client deadlines looming over you. Now, not to fob you off or suggest the wise words of a bunch of losers who have nothing better to do on their weekend than work aren't helpful... but have you seen the css-discuss Wiki? http://css-discuss.incutio.com/ And I think Russ' tutorials are fantastic: http://css.maxdesign.com.au/ Anyway, I've got to get back to work :) Cheers, Ben -Original Message- > > 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 ;-(( * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Try this: http://www.maxdesign.com.au/jobs/poo.htm Modify as required Russ > Is there anyone on this list who can easily put together a 3 column layout? > Hold on, there is more. All 3 columns need to be 33% (or come to 100%) > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
> Imagine floats as being similar to the old align="right". > > For example, you have a block of content and an image. If you > want the image to align right beside the content it must be > before the content. It's starting to sink in a bit now > Floats work in exactly the same way. To quote: > "Block level elements above a floated element will not be > affected by it. However, elements below will wrap around the > floated element" > http://css.maxdesign.com.au/floatutorial/intro> duction.htm OK got that one now. Cheers. > Block level element above a floated element > ignore the floated element: > http://css.maxdesign.com.au/floatutorial/intro> duction16.htm > > > Block level element below a floated element > is affected by the floated > element: http://css.maxdesign.com.au/floatutorial/introduction17.htm > > Makes sense? > Russ > > > > The thing that also gets me is, it's just not logical > sometimes, like > > I have 2 columns, 1. Navigation > > 2. Content > > If I have them in that order I can say to the Navigation > "float: right" and > > all works fine, but if I have them in the following order > > 1. Content > > 2. Navigation > > And I say "float: right" it is positioned on a new line, I > just don't see > > what the difference is? > > * > The discussion list for http://webstandardsgroup.org/ > * > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
> Relaxed after seeing Cabin Fever? Isn't that the one with the
> mulleted
> kid who bites a lawyer?
Yeah with the flesh eating virus.. I wasn't relaxed for to long, I'm already
stressed again.
Is there anyone on this list who can easily put together a 3 column layout?
Hold on, there is more. All 3 columns need to be 33% (or come to 100%)
I was thinking something like the following which I can't get to work
#testContainer
{
width: 100%;
}
#testContainer div
{
width: 33%;
border: 1px solid black;
display: inline;
}
Column 1Column 2Column 3
And I tried
dd
dd
dd
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Too Much Space..
I did some funky float stuff here: http://my.spamtrap.net.au/join/howitworks/ content is floated to the right and has a fixed width. Inside content is another right floated box with a quote in it. Because of content's fixed width, navigation moves up as its width is less than container width minus content width. If I wanted to put content on the left and nav on the right, I could float : left; on content, float : right; on nav. Cheers James russ weakley wrote: Imagine floats as being similar to the old align="right". For example, you have a block of content and an image. If you want the image to align right beside the content it must be before the content. Floats work in exactly the same way. To quote: "Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element" http://css.maxdesign.com.au/floatutorial/introduction.htm Block level element above a floated element ignore the floated element: http://css.maxdesign.com.au/floatutorial/introduction16.htm Block level element below a floated element is affected by the floated element: http://css.maxdesign.com.au/floatutorial/introduction17.htm Makes sense? Russ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Taco Fleur wrote: The thing that also gets me is, it's just not logical sometimes, like I have 2 columns, 1. Navigation 2. Content If I have them in that order I can say to the Navigation "float: right" and all works fine, but if I have them in the following order 1. Content 2. Navigation And I say "float: right" it is positioned on a new line, I just don’t see what the difference is? Relaxed after seeing Cabin Fever? Isn't that the one with the mulleted kid who bites a lawyer? Anyway... In the first example you are floating navigation to the right of its containing box. Content will then move up to its left and flow around it if the height exceeds Navigation. Float affects boxes (eg Content) below the floated box, which is why adding float to Navigation when it is below Content will have no affect. Add another Content box below Nav to see what I mean. You need to float Content to the left. Better yet, float Navigation to the right and Content to the left, then place a clear:both block under them. To see how float affects surrounding content, alter the width of navigation in the first example and see what happens to Content... Once you have succeeded in floating guff around the page, you can then set up other stylesheets and do it completely differently just for the hell of it... :D Which is why it's not good to say "leftblock" as sooner of later it may appear on the right or bottom of the page. Cheers * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Imagine floats as being similar to the old align="right". For example, you have a block of content and an image. If you want the image to align right beside the content it must be before the content. Floats work in exactly the same way. To quote: "Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element" http://css.maxdesign.com.au/floatutorial/introduction.htm Block level element above a floated element ignore the floated element: http://css.maxdesign.com.au/floatutorial/introduction16.htm Block level element below a floated element is affected by the floated element: http://css.maxdesign.com.au/floatutorial/introduction17.htm Makes sense? Russ > The thing that also gets me is, it's just not logical sometimes, like I have > 2 columns, > 1. Navigation > 2. Content > If I have them in that order I can say to the Navigation "float: right" and > all works fine, but if I have them in the following order > 1. Content > 2. Navigation > And I say "float: right" it is positioned on a new line, I just dont see > what the difference is? * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
I love what you guys are saying and I see the benefit of it TOTALLY. I took a break, went to see a movie (Cabin Fever), I am now relaxed and will try again.. With tables it's just so easy, you see the design and you can create it, with CSS it sort of mix and match, and like James said difficult because it renders different in each browser. So you need to understand each browser. The thing that also gets me is, it's just not logical sometimes, like I have 2 columns, 1. Navigation 2. Content If I have them in that order I can say to the Navigation "float: right" and all works fine, but if I have them in the following order 1. Content 2. Navigation And I say "float: right" it is positioned on a new line, I just dont see what the difference is? Anyway, things like that just get my blood boiling because I want to understand it and I need to see the logic of it all before I can understand it..;-) Taco Fleur Tell me and I will forget Show me and I will remember Teach me and I will learn > -Original Message- > From: russ weakley [mailto:[EMAIL PROTECTED] > Sent: Sunday, 7 December 2003 2:10 PM > To: Web Standards Group > Subject: Re: [WSG] Too Much Space.. > > > Don¹t feel bad! Using a basic table grid for layout and > everything else via CSS is not evil - it is completely > acceptable. However, it is just not as pure as full CSS (from > the "removing presentation from content" point of view). > Zeldman would call this "hybrid" layout. It is still a long > way better than nested tables, font tags and invalid code. > > The aim of this group is to help people move *towards* web > standards. There is no black or white, just a gradual progression. > > The more I post today the more I sound like a fortune cookie. Russ > > > > > > 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 > > > > * > The discussion list for http://webstandardsgroup.org/ > * > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
There is no spoon Seriously, though we've all had trouble getting the tableless layout just right - mainly because of the different ways that user agents render the box model. It can be quite difficult to get boxes to sit snugly against each other especially with multi-column layouts. When is a box not a box? When it's being rendered by IE. Ben B's presentation at the meeting before last about how IE renders the box model is worth taking a look at again (I think it's in a Russorial somewhere). Aside from getting the layout just right, I've found the big benefit of moving away from tableless layouts is the "div" layout's extensibility and "objectabiliity". Basically a TD cell can't exist outside of a whereas a div can exist of it's own accord or as a descendant of any other number of objects and can be positioned anywhere on the page. The example I can give are my reseller sites.. I can do one stylesheet per site that presents the single codebase (used by all) to match the parent reseller site - using floats, positioning, display etc and other guff. It makes good business sense as well as I can whip out a new site in about a day. Cheers James russ weakley wrote: The more I post today the more I sound like a fortune cookie. Russ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
Don¹t feel bad! Using a basic table grid for layout and everything else via CSS is not evil - it is completely acceptable. However, it is just not as pure as full CSS (from the "removing presentation from content" point of view). Zeldman would call this "hybrid" layout. It is still a long way better than nested tables, font tags and invalid code. The aim of this group is to help people move *towards* web standards. There is no black or white, just a gradual progression. The more I post today the more I sound like a fortune cookie. Russ > > 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 > * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
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:
> >
> >
> >
> >
> >
> >
> >
> >
> >
>
> 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.
&
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:
>
>
>
>
>
>
>
>
>
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/
*
Re: [WSG] Too Much Space..
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:
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
@import
url(/stylesheets/floatutorial.css);
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
>
>
RE: [WSG] Too Much Space..
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
> -Original Message-
> From: russ weakley [mailto:[EMAIL PROTECTED]
> Sent: Sunday, 7 December 2003 7:53 AM
> To: Web Standards Group
> Subject: Re: [WSG] Too Much Space..
>
>
> > I had a look at the themaninblue.com and wow, that is
> seriously some
> > brilliant work, but I was not able to make any sense out of the
> > lay-out, I wish I could.. And what would be the minimum
> browser that
> > would work in? I mean that is just perfect for the audience of his
> > website, but what about an audience that has browsers ranging from
> > ie3, ns3 and up?
> >
>
> Hi Taco,
>
> themaninblue.com is a brilliant site (welcome to the list,
> Cameron), and has a great write-up on Simon's (American)
> blog: http://jessey.net/blog/2003/dec/#e01a
>
> Regarding older browsers like ie3, nn3...
>
> The old theory was that you coded the hell out of every page
> until it was locked and exact in every browser on earth. The
> downside is that this method does not take into account other
> user agents such as screen readers, text browsers, hand
> helds, printers and possible the most important, search bots.
>
> The more recent theory is that you code for standards
> compliant browsers and then allow the layout to fail
> gracefully in older and older browsers. The code is lean, so
> in the oldest browsers (like IE3 and NN3) this will appear is
> simple content - with no style. This works well, as long as
> you start with good, clean semantically correct markup.
>
> Who wins? You can provide clean content to a wider variety of
> user agents. You can also specifically target printers. But
> most importantly (from a commercial sense), Google loves it.
> Like free beer in a pub!
>
> : )
> Russ
>
> *
> The discussion list for http://webstandardsgroup.org/
> *
>
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Too Much Space..
> I had a look at the themaninblue.com and wow, that is seriously some > brilliant work, but I was not able to make any sense out of the lay-out, I > wish I could.. And what would be the minimum browser that would work in? I > mean that is just perfect for the audience of his website, but what about an > audience that has browsers ranging from ie3, ns3 and up? > Hi Taco, themaninblue.com is a brilliant site (welcome to the list, Cameron), and has a great write-up on Simon's (American) blog: http://jessey.net/blog/2003/dec/#e01a Regarding older browsers like ie3, nn3... The old theory was that you coded the hell out of every page until it was locked and exact in every browser on earth. The downside is that this method does not take into account other user agents such as screen readers, text browsers, hand helds, printers and possible the most important, search bots. The more recent theory is that you code for standards compliant browsers and then allow the layout to fail gracefully in older and older browsers. The code is lean, so in the oldest browsers (like IE3 and NN3) this will appear is simple content - with no style. This works well, as long as you start with good, clean semantically correct markup. Who wins? You can provide clean content to a wider variety of user agents. You can also specifically target printers. But most importantly (from a commercial sense), Google loves it. Like free beer in a pub! : ) Russ * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] Too Much Space..
> I noticed in your Stylesheet definitions that on hovering > over the element you change your margin and padding from > 3 pixels to 2. I'd say that's probably what is moving your > text around there. Yeah, I played around with that, if I did not have anything in there or any other value then I have now it was even worse. So still not sure what the issue is there, anyone? > >the tables, I won't do away with those just yet no no no ;-)) > WUSS! Heh - CSS is so much easier than "table hacks" .. Have > you taken the Selectorial yet? I haven't yet, I probably will get to that at some stage. But for now it's not only that I think the table hacks are easier, it's also because I *think* it works in more browsers than working with CSS lay-out. (wrong/right)? I had a look at the themaninblue.com and wow, that is seriously some brilliant work, but I was not able to make any sense out of the lay-out, I wish I could.. And what would be the minimum browser that would work in? I mean that is just perfect for the audience of his website, but what about an audience that has browsers ranging from ie3, ns3 and up? > (http://css.maxdesign.com.au/selectutorial/) > It lays down > some basic skills on creating CSS-based layouts. > > To fix the nav buttons on the right side in the mainbody > area, try using relative instead of absolute positioning, or > just increase the left margin. Thanks, I'll have a look at it, I did notice those when I looked at it in Netscape. > Good work Taco! Thanks, it's a start ;-)) > Ryan > -- > "Heck with kids - standards are our future." > Webmaster, http://www.theward.net > > > - Original Message - > From: Taco Fleur > To: [EMAIL PROTECTED] > Sent: Saturday, December 06, 2003 4:57 AM > Subject: [WSG] To much space.. > > On http://development.developer-exchange.com I have a "A" > element that has to much space on the bottom, I can't figure > out why, anyone? Also the text moves on mouse over, I'd like > it to not move on hovering over it. The offending text is > within the gray area 3 TDs > > PS. its all still a mess and needs cleaning up, I am finally > trying to move a bit more to CSS, except the tables, I won't > do away with those just yet no no no ;-)) PPS. any other > pointers that you might be able to give is appreciated. > > Thanks, > 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/ > * > * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Too Much Space..
I noticed in your Stylesheet definitions that on hovering over the element you change your margin and padding from 3 pixels to 2. I'd say that's probably what is moving your text around there. >the tables, I won't do away with those just yet no no no ;-)) WUSS! Heh - CSS is so much easier than "table hacks" .. Have you taken the Selectorial yet? (http://css.maxdesign.com.au/selectutorial/) It lays down some basic skills on creating CSS-based layouts. To fix the nav buttons on the right side in the mainbody area, try using relative instead of absolute positioning, or just increase the left margin. Good work Taco! Ryan -- "Heck with kids - standards are our future." Webmaster, http://www.theward.net - Original Message - From: Taco Fleur To: [EMAIL PROTECTED] Sent: Saturday, December 06, 2003 4:57 AM Subject: [WSG] To much space.. On http://development.developer-exchange.com I have a "A" element that has to much space on the bottom, I can't figure out why, anyone? Also the text moves on mouse over, I'd like it to not move on hovering over it. The offending text is within the gray area 3 TDs PS. its all still a mess and needs cleaning up, I am finally trying to move a bit more to CSS, except the tables, I won't do away with those just yet no no no ;-)) PPS. any other pointers that you might be able to give is appreciated. Thanks, 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/ *
