hey guys just wanted to know if im heading in the right dirrection here...
i have up untill now built table based websites but i have currently taken the plunge into pure CSS, i have spent about a week just taking notes and reading tutorials on this topic and im getting my head round it slowly
..
the thing i keep tinking im using to many div's lol, basicly i seem to have a sea of div tags, maybe it just looks strange to me right now because im used to to seing a maze of nested tables but should i be using div's for all design aspects??
as a good example lets take a left hand nav, the nav has a background made from 3 differnt img's to make up the nav box (top, mid*main bg*, bottom) then obviously you have the links, should i be using all div's here and nesting the div's to get this effect or am i best using a table here? (although that really seems to defeat the object of the "pure CSS" somewhat
i have searched the web for pure CSS sites to get some idea on this but not many designers seem to be going all CSS just yet, so am i just worring to much or am i missing somthing and need to read for another week
tnx for your input guysOriginally posted by madmax
the thing i keep tinking im using to many div's lol, basicly i seem to have a sea of div tags, maybe it just looks strange to me right now because im used to to seing a maze of nested tables but should i be using div's for all design aspects??
as a good example lets take a left hand nav, the nav has a background made from 3 differnt img's to make up the nav box (top, mid*main bg*, bottom) then obviously you have the links, should i be using all div's here and nesting the div's to get this effect or am i best using a table here? (although that really seems to defeat the object of the "pure CSS" somewhat
Lots of div's are ok, so long as they aren't being used unnecessarily. For example, use h1-6 tages in place of divs for headers and the likes. Rather than using a bunch of divs for your nav, use a list (good article here (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) on this). It is good to practise semantecs right from phase one. If you use good semantecs, you should never have to use a <br /> tag.
-DanYou are well on your way to becoming one of the "enlightened" ones.
First of all, you are going to want your markup to be as lean as possible. This means that you do not want to use any more divs than is necessary. Once you learn the intricacies of CSS, you will be able to clean up your markup a bit by using things such as decendent selectors (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors">http://www.w3.org/TR/REC-CSS2/selector. ... -selectors</a><!-- m -->)...
Take a look at the following links for some great examples of CSS at work:
<!-- m --><a class="postlink" href="http://www.cssvault.com/">http://www.cssvault.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.webstandardsawards.com/">http://www.webstandardsawards.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m -->
Additionally, a great place to learn what's going on in the standards-compliance world is through blogs. You might want to check out my personal blog (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/">http://www.ryanbrill.com/</a><!-- m -->), and the sites linked to in my blogroll. Some of the blogs are excellent resources, and the information (and innovation) they contain is priceless. Most of the top names in CSS-based design have their own personal blogs which are extremely useful.
I find that one of the best ways to learn CSS is simply by looking through the source code of sites. Obviously you'll want to be sure the source code is worth learning from, so be sure to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) the code first.Originally posted by Daniel T
If you use good semantecs (sic), you should never have to use a <br /> tag.Where did you come up with that? You shouldn't need to use multiple <br />s, but a <br /> is simply what is used to add a line break. Semantically, I see absolutly nothing wrong with using them.Originally posted by pyro
Where did you come up with that? You shouldn't need to use multiple <br />s, but a <br /> is simply what is used to add a line break. Semantically, I see absolutly nothing wrong with using them.
OK, maybe one is OK, but i'd still prefer to use zero myself.So, you'd be opposed to this:
<address>
Rick Evans<br />
89 Park Place<br />
San Diego California, 78234
</address>
seems perfectly correct (semantically) to me.I meant one consecutive <br /> tag. Late night. No caffiene. This happens.
Originally posted by Daniel T
OK, maybe one is OK, but i'd still prefer to use zero myself. How on earth would you make a line break, then?Originally posted by pyro
How on earth would you make a line break, then?
I'd prefer not to, actually. The only line breaks I ever need are when I want a new paragraph, in which case I'd close and open a <p>.Originally posted by Sam
<address>
Rick Evans<br />
89 Park Place<br />
San Diego California, 78234
</address>
That guy's never going to get his mail... Wrong ZIP.Tnx guys thats cleared up a lot and from what daniel says on using the H1-6 and p tags im heading in the right direction ...
a big thx to pyro for those links they have helped a ton with layout together with other stuff...
although i seem to be having a few problems with a part of my layout, i have uploaded a example gif to give u guys a better idea of what im rambling on about here...
i have the header up and no problems liquid in all resolutions except 640/480 wich is easy t fix, but when i come to the nav/curve and fade bar all hell breaks loose
..
i actualy have it done right now but if i go into 640 res i get a small scroll bar (no problem BUT) if i scroll right the fade bar does not render to take the rest of the page beyond the scroll bar..
if i set it to 100% it takes 100% of the browser width NOT the 100% of the available space after the deduction of the nav width in px so thats a no no... any ideas on this one?
i have up untill now built table based websites but i have currently taken the plunge into pure CSS, i have spent about a week just taking notes and reading tutorials on this topic and im getting my head round it slowly
..the thing i keep tinking im using to many div's lol, basicly i seem to have a sea of div tags, maybe it just looks strange to me right now because im used to to seing a maze of nested tables but should i be using div's for all design aspects??
as a good example lets take a left hand nav, the nav has a background made from 3 differnt img's to make up the nav box (top, mid*main bg*, bottom) then obviously you have the links, should i be using all div's here and nesting the div's to get this effect or am i best using a table here? (although that really seems to defeat the object of the "pure CSS" somewhat
i have searched the web for pure CSS sites to get some idea on this but not many designers seem to be going all CSS just yet, so am i just worring to much or am i missing somthing and need to read for another week
tnx for your input guysOriginally posted by madmax
the thing i keep tinking im using to many div's lol, basicly i seem to have a sea of div tags, maybe it just looks strange to me right now because im used to to seing a maze of nested tables but should i be using div's for all design aspects??
as a good example lets take a left hand nav, the nav has a background made from 3 differnt img's to make up the nav box (top, mid*main bg*, bottom) then obviously you have the links, should i be using all div's here and nesting the div's to get this effect or am i best using a table here? (although that really seems to defeat the object of the "pure CSS" somewhat
Lots of div's are ok, so long as they aren't being used unnecessarily. For example, use h1-6 tages in place of divs for headers and the likes. Rather than using a bunch of divs for your nav, use a list (good article here (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) on this). It is good to practise semantecs right from phase one. If you use good semantecs, you should never have to use a <br /> tag.
-DanYou are well on your way to becoming one of the "enlightened" ones.
First of all, you are going to want your markup to be as lean as possible. This means that you do not want to use any more divs than is necessary. Once you learn the intricacies of CSS, you will be able to clean up your markup a bit by using things such as decendent selectors (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors">http://www.w3.org/TR/REC-CSS2/selector. ... -selectors</a><!-- m -->)...
Take a look at the following links for some great examples of CSS at work:
<!-- m --><a class="postlink" href="http://www.cssvault.com/">http://www.cssvault.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.webstandardsawards.com/">http://www.webstandardsawards.com/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m -->
Additionally, a great place to learn what's going on in the standards-compliance world is through blogs. You might want to check out my personal blog (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/">http://www.ryanbrill.com/</a><!-- m -->), and the sites linked to in my blogroll. Some of the blogs are excellent resources, and the information (and innovation) they contain is priceless. Most of the top names in CSS-based design have their own personal blogs which are extremely useful.
I find that one of the best ways to learn CSS is simply by looking through the source code of sites. Obviously you'll want to be sure the source code is worth learning from, so be sure to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) the code first.Originally posted by Daniel T
If you use good semantecs (sic), you should never have to use a <br /> tag.Where did you come up with that? You shouldn't need to use multiple <br />s, but a <br /> is simply what is used to add a line break. Semantically, I see absolutly nothing wrong with using them.Originally posted by pyro
Where did you come up with that? You shouldn't need to use multiple <br />s, but a <br /> is simply what is used to add a line break. Semantically, I see absolutly nothing wrong with using them.
OK, maybe one is OK, but i'd still prefer to use zero myself.So, you'd be opposed to this:
<address>
Rick Evans<br />
89 Park Place<br />
San Diego California, 78234
</address>
seems perfectly correct (semantically) to me.I meant one consecutive <br /> tag. Late night. No caffiene. This happens.
Originally posted by Daniel T OK, maybe one is OK, but i'd still prefer to use zero myself. How on earth would you make a line break, then?Originally posted by pyro
How on earth would you make a line break, then?
I'd prefer not to, actually. The only line breaks I ever need are when I want a new paragraph, in which case I'd close and open a <p>.Originally posted by Sam
<address>
Rick Evans<br />
89 Park Place<br />
San Diego California, 78234
</address>
That guy's never going to get his mail... Wrong ZIP.
Tnx guys thats cleared up a lot and from what daniel says on using the H1-6 and p tags im heading in the right direction ...a big thx to pyro for those links they have helped a ton with layout together with other stuff...
although i seem to be having a few problems with a part of my layout, i have uploaded a example gif to give u guys a better idea of what im rambling on about here...
i have the header up and no problems liquid in all resolutions except 640/480 wich is easy t fix, but when i come to the nav/curve and fade bar all hell breaks loose
..i actualy have it done right now but if i go into 640 res i get a small scroll bar (no problem BUT) if i scroll right the fade bar does not render to take the rest of the page beyond the scroll bar..
if i set it to 100% it takes 100% of the browser width NOT the 100% of the available space after the deduction of the nav width in px so thats a no no... any ideas on this one?