Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Im testing out CSS and all the cool things one can do with it(inspired by glyakk's CSS tutorial). Im in need of some answers or some more tutorials on how things work. Heres a few questions that I have:

    1. Whats the difference between <div> and <span> tags and where should one use the one to the other?

    2. In a div tag, what is the difference between 'id'and 'class'?

    3. In a CSS file, I see when you specify the style's name theres either a dot(.) or a hash(#) or nothing infront of the name. Whats the difference or why is it there?

    4. Last question... Ive made two "boxes" in CSS. Can I put the one over the other? Has this goto do with Z-indexes?

    You dont have to answer the questions if you dont want to. If you know of a site that has these answers or other info, please direct me. Thanks

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    oky doky... i'll take a stab at this

    1. there isn't much difference between a div and a span... both can be used to add structure to documents (means using div and span instead of table). the one difference that i can point out is that div's create line breaks (br) as oppose to span which doens't.

    2. id can be used only once as oppose to class which can be used multiple time in you html.

    3. in you css file a . is used to determine a class and a # is used for id

    this link - http://www.w3schools.com/css/css_syntax.asp - might help you with the class/id stuff... just scrolll down a bit 'til you hit "class selector" and "id selector"

    4. not sure about this one... i rarely used z-indexes but... try it... you'll see what it does

    hth
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Thanks for the help. Im going to read up on it and see what other questions I will come up with..... :-)

  5. #4
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Ok, I got another question. I read up on the class and id attribute. I understand the class attribute. Makes sense. But the id? not make no sense to me.

    another thing, whats the better tag to use? div or span? does span also have id and class attributes? Do they do the same as div attributes?

    (Man, i ask alot of questions....)

  6. #5
    Member
    Join Date
    Apr 2004
    Location
    UK
    Posts
    46
    Member #
    5821
    the ol' class and ids

    Hi there,

    Classes can essentially be applied more than once, while ids can only appear once in a webpage.

    So for eg., you can set an id to the top header section containing a site logo (say #topheader) because there is only one of these in a webpage, while you can set a class defining BOLD which can be use throughout the page like on different words (say .makeBold).

    Hope this makes sense...

    min8
    www.minimal8.co.uk - minimalist in style

  7. #6
    Member
    Join Date
    Apr 2004
    Location
    UK
    Posts
    46
    Member #
    5821
    oh, forget the other question...

    Oh, regarding the divs vs. span tags, you can use both...

    I generally prefer divs for general site layouts (i.e. #topheader, #navbar, #maincontent, #footer) while occasionally splash the odd span if required only (e.g. put a span tag with a different colour inside the main menu navbar section to hightlight the webpage the user is on).

    So in this sense, the divs i use go with ids while spans generally come with class. This is just my general approach and way of working and is not an absolute must!

    Once you get the feel of using these tags and greater familiarity with CSS, you'll develop your own way of working. I try not to use too many divs and spans and bloat up the markup...

    min8
    www.minimal8.co.uk - minimalist in style

  8. #7
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Lets see if I have this correct....

    So if I make a <div id="header"> at the top of my page, I cannot use the "header" CSS style anywhere else on the page. Is this what you trying to say?

  9. #8
    Member
    Join Date
    Apr 2004
    Location
    UK
    Posts
    46
    Member #
    5821
    Yes!

    You got it!...
    www.minimal8.co.uk - minimalist in style

  10. #9
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    1. There actually is a big difference between the two.. although not that apparant. They are both ment to 'section' off your markup for various reasons, and neither adds any substance to your document. But their differences start in the type of content you want to section off. Lets say you have a form on your page. You could section off that part using a <div>
    HTML Code:
    <div>
      <form action="form.php" method="get">
        <input type="text"/>
        <input type="password"/>
        <input type="submit"/>
      </form>
    </div>
    A span is different, It allows you to section off inline elements like text in a paragraph.
    HTML Code:
    <p>
    This is text inside of a paragraph. I could section off <span>this part</span> to maybe change its font, or size, or maybe its position inside the paragraph.
    </p>
    So there are vast differences on how both handle padding, margins, borders, positioning, floats, etc.. so their basic concept is the same, but their application is very different.

    2 and 3. For practical pourposes Karinne is correct. There is a more fundimential differances but its more of a logistics issue than something that will affect how you use them.

    4. Yes you would use z-index to do this.. however it only works on already positioned elements.


    To answer your following question..

    Yes you may use class or id in span tags just like div tags.. in fact you can use the class or id attribute in basicly ANY tag. For practical pouposes you could use only classes and never worry about id, or even in most cases only id's and no classes. However I do not reccomend either since that is not how either is supposed to be used. As karinne said you are supposed to use ID only once and class may be used multiple times on a single page. The reason is because ID is ment to identify an unique part/section of your markup where class is used to describe many at once. Think of it like this, Class is like ethnic background, it defines aspects like language, location, phycical features, etc.. where as id is like somebody by name, it pin points a specific person. So I could 'theorically' write a class for all french people since many share the same characteristics. However if I wanted to pin point a specific person like the late Jacques Cousteau, I would use id.

    Such as in our example above you could give the div for our long-in form an id of 'login' to set it apart and make it unique.
    HTML Code:
    <div id="login">
    ..
    ..
    </div>
    What this will do is identify this block of your mark up as a unique element in your page. You are unlikley to have multiple login sections on your site. On the other hand class is ment to describe different elements with similar characteristics. Take for example our paragraph example above..
    HTML Code:
    This is text inside of a paragraph. I could section off <span class="highlight">this part</span> and <span class="highlight">this part</span> and maybe change the background color to yellow to give the impression that it is highlighted.
    </p>
    Now there is no connection between class and span or div and id. Those just happen to be convinient examples.

    I hope this helps clear things up, even if seems like I cant stop typing!!!!

    Note: Typing too much can make you respond late for posts..


  11. #10
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Thanks glyakk for the help. You definitly sound like the CSS legend here at WDF.

    Im going to play around with CSS some more and break it and fix it till I get it right and fully understand it! thanks for the help.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com