SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot m3avrck's Avatar
    Join Date
    Sep 2002
    Location
    Arlington, VA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When to use DIV or SPAN and CLASS or ID

    Hi everyone.

    I've been using CSS for a while, but just recently I was thinking more about it and I realized I don't know something that maybe central to CSS.

    When to use DIV instead of SPAN and when to use CLASS instead of ID.

    Any ideas? I know DIV throws the extra return in there, and ID is useful when using the DOM, but is there any other real distinction?

    Like for this code below, I'm trying to design the site without tables since it is an intranet site and I realized, should those SPANs be DIVs or vice versa? What about those classes, should they be IDs. Any ideas?

    Code:
    <div class="header">
    <span class="spacer">&nbsp;</span>
    <span class="title">Title</span>
    <span class="subtitle">Sub title</span>
    <div class="spacer">&nbsp;</div>
    </div>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can pretty much get away with anything you want. But in general, the differences are inline and block elements for SPANs and DIVs, and the number of times you use it (as well as JavaScript uses) for CLASS and ID.

    Searching the forum will turn up countless threads.

  3. #3
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off is span and div's in all honesty it does not matter, they are unstylized tags that have very little barring on the document itself. The only magor difference is that one (div) is a block level element and the other (span) is an inline element and even this can be changed with CSS.

    As for class and ID's, an ID must be a unique name to identify an element for use with Javascript whereas a class can be assigned to ultiple tags. as a general rule, unless your using Javascript, stick with classes and youll be fine.

    ie:
    BAD
    <a href="home" id="navigation">..
    <a href="about" id="navigation">..
    <a href="contact" id="navigation">..

    GOOD
    <a href="home" class="navigation">..
    <a href="about" class="navigation">..
    <a href="contact" class="navigation">..

    GOOD
    <a href="home" id="home">..
    <a href="about" id="about">..
    <a href="contact" id="contact">..

    as for your example. from what i make out of it, i would probably do something more like...

    <div class="header">
    <h1>Title</h1>
    <h2>Sub title</h2>
    </div>

    This way you are marking up your headings as headings. I would also use CSS to define the margins for the H1 and H2 tag to achieve the "spacer".
    Last edited by iTec; Oct 10, 2002 at 09:43.

  4. #4
    SitePoint Zealot m3avrck's Avatar
    Join Date
    Sep 2002
    Location
    Arlington, VA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The spacer was to get around a mozilla bug. But putting content above and below this, it allowed for the the background color to show properly.

    Or am I doing this wrong?

  5. #5
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by m3avrck
    The spacer was to get around a mozilla bug. But putting content above and below this, it allowed for the the background color to show properly.

    Or am I doing this wrong?
    can you post the css to go with that section you posted before?

  6. #6
    SitePoint Zealot m3avrck's Avatar
    Join Date
    Sep 2002
    Location
    Arlington, VA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    div.header{border-bottom:5px solid #669933;background:#e0e0e0}
    span.spacer{clear:both;font-size:6px}
    span.subtitle{
    float:left;
    background:transparent;
    color:#555555;
    font-size:1.2em;
    letter-spacing:.15em
    }
    span.title{
    padding-left:1em;
    padding-right:4em;
    float:left;
    background:transparent;
    color:#555555;
    font-size:1.4em;
    letter-spacing:.15em
    }


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
  •