SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    divs,classes,ids etc what is order

    Struggling with what should be a fairly elementary concept with css design.

    I understand that a div is a container and in my css I note them as

    #divname {
    style;
    }

    I have some divs that I would like all of the content formatted the same so I create a div as a container and wrap it round content and use the div to set the style of the content.

    I then apply a class to the div such as left and right or menu and header and use the class to position the div. Like below.

    .classmenu {
    float: left;
    }

    I think I'm just confusing myself with the basic layout and reasons of this but cannot find a simple explanation.
    Last edited by handyman103; Aug 17, 2007 at 07:42.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's easy to get confused as there aren't really any guidelines to this although I'd probably suggest the following rules.

    1 - Wherever possible try and style the tag itself. Whether this be the body, h1, p, ul etc, you can sometimes get away without needing to use a container or applying an ID/class because you can apply it directly to the tag.

    2 - I'd usually use an ID for a specific section of part of the page that needs to be identified. header, navigation, content, container, footer, etc are all things that I've used in the past but certainly isn't limited to these. The only rule that you MUST stick to is that you cannot duplicate ID's, i.e. you can only apply the same ID once on the page.

    3 - Where there's something that I want to reuse, I'll use a class, this may be for things like .error, .hidden, .confirmation, .smallformfield etc. You can apply as many as these as you like.

    The only other suggestion I'd make to your question is not to use positional or presentational text to describe the id or class. If you call something #blue and you or a client later decide this would look better in green then your CSS and code will have meaning that doesn't make sense. Instead call it something like .information.

    The same goes for positional elements, you can change this using CSS but having divs called #left or #right might not make sense later so instead think of using a name for the purpose of these div's like #navigation, #content, #search etc.

    Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that helps.

    So do I apply style to id or to class?

    Also what does the # and the . in the css mean?

    is # id and . class?

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the style attribute is only used if you want to apply CSS inline which isn't usually a good idea. For example.
    Code:
    <div style="color: #FFF; background-color: #000;">Here's my header</div>
    This wouldn't really have any benefit over using the font tag as you'd still have to go through each page if you wanted to change this.

    However, using ID's or classes you can apply the same styles but once in your CSS.

    HTML
    Code:
    <div id="header">Here's my header</div>
    CSS
    Code:
    #header {
      background-color: #000;
      color: #FFF;
    }
    The same method would apply if you were using a class but it would be a period/fullstop in front.

    HTML
    Code:
    <div class="header">Here's my header</div>
    CSS
    Code:
    .header {
      background-color: #000;
      color: #FFF;
    }
    Or alternatively you may want to apply styling to a specific HTML element which can be useful for things like this

    Code:
    p {
      margin-bottom: 15px;
    }
    body {
      background-color: #CCC;
    }
    You're correct with your understanding of # and . within CSS.

    # = ID's
    . = Classes

    Off Topic:


    If the header in the example was a heading then obviously an h1, h2 etc would semantically be correct, however I'm assuming that the header div would be the part of the page that would contain a background image, strapline introduction type information so may or may not include an h1.... that'd be a different matter for discussion though

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if you can use a class or an id which is the best to use or are they interoperable?

  6. #6
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you plan to re-use the styling eg on the <p> tag, use class otherwise you will only be able to use <p> once in your document.

    for divs i use id... you are less likely to use a div more than once

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's unique to the page then I'd use ID. If it's something that you're going to have to reuse on the page then you'll need to use class as multiple ID's are invalid.

    Some people may argue that they use class all the time and never bother with ID's to avoid confusion which is a perfectly valid argument and is down to personal preference.

    The only time I'd argue that is that ID's can be useful for skipping to a certain part of the page using <a href="#idname"></a> but don't think there are any other advantages and I'd put it down to personal preference.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys, Interesting tip about using div id's as anchors never noticed that before.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by handyman103 View Post
    Cheers guys, Interesting tip about using div id's as anchors never noticed that before.
    No worries, yeah it can be useful for a long page of frequently asked questions for example, where you have the questions listed at the top.

    You could then apply an ID to each of the <h2>'s that have the question and answer further down the page and use that at the top in order to skip to that part of the content.

    You can obviously also use it for accessibility by skipping menu's without the need to stick any extra code in. Assume you have a div with an id="content", you'd then just need that link to use <a href="#content">Skip to content</a>.

    Hope that gives you a better understanding

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aside from the fact that IE6 doesn't support it, I'd still argue that using ID's would be of more benefit.

    Using an ID to describe the purpose of a container makes the code easier to read without bloating the code with unnecessary comments.

    I'd also argue that using that method actually increases the CSS more than what a simple ID or class would do to the HTML.

    I do think that some selectors have their uses but going to the extent that you've gone through there seems a bit overkill despite being impressive

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm all for clean and minimal markup and the HTML certainly looks nice and tidy so I wasn't trying to belittle the work you'd done on this

    I certainly think that the different selectors will certainly have their uses once IE6 can safely be dropped (which will be some time yet) but I think this example is a little over the top.

    I'd probably still use an ID on the main container div's to identify the header, navigation, content, footer and other sections of the page, maybe things like search?

    I think that using selectors within main sections would certainly be beneficial instead of using classes on everything but thought this example was over-complicating things slightly.

    Maybe it's just a case of getting out of the mind set that I'm in though as I do like the idea of having no extra markup in the HTML, it just seems to make it much more difficult to interpret the CSS..... try coming back to an old project a few months down the line or try and solve someone's problem when they post on here without a single ID or class to help out?

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mommy

    Code:
    h1+div h2,h1+div+div h2,h1+div+div+div h3{border-top:10em solid #ffffff;}
    Very very confused reading that, looks impressive though.

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I don't think it's confusing when you take a look at one or two examples and the page you provided above is quite simple to follow but when you start to look at a complex page or a site with a few templates, the CSS would be difficult to read or for someone else to come along afterwards and add to it or modify it.

    I know this is slightly going off the topic of the original post now but I'd be interested to see what opinions other people have on the subject? Is it the future and I should be thinking differently in the same way that switching from tables from CSS was changing a mindset, or is it over-complicating the CSS for the sake of simplifying the HTML?

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question for you guys, If I wanted a css layout coding to meet my design and also a style sheet for presentation, what would be the cost I should be looking at. FYI I think that all4nerds layout is almost exactly what it will end up as but with a wider rh column and deeper footer and header.

    This is the design (as it stands) http://www.trial.mlweb.co.uk/purple/image6.html

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    what would be the cost I should be looking at
    For some reason, we're not allowed to discuss prices on the forums. You can send a Private Message to a CSS developer that you like and ask them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •