www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: <div style> v.s <div id>

Hybrid View

  1. #1
    Join Date
    Apr 2003
    Posts
    853

    Question <div style> v.s <div id>

    Hello..I'd appreciate it if someone could take a few seconds of their valuable time to answer my inquiry.

    I am in the process of making a personal site using an old site of mine as a template.

    As I was arranging columns I was wondering what type if <div> tags are better to use..such as
    PHP Code:
    <div id="left" style="left: 327px; top: 9px; width: 323px; height: 138px"
    or perhaps

    PHP Code:
    <div class="centerCol" style="center: 78px; height: 455px; left: 208px; top: 190px; width: 523px"
    Or does it even matter?


    Thank You greatly
    Last edited by Dark Dragon; 11-13-2005 at 12:25 PM.

  2. #2
    Join Date
    Dec 2003
    Location
    Waardamme, Belgium
    Posts
    121
    I'm not sure what your question is.
    'id' is used for a single instance (mostly as an object in javascript), while 'class' is used for a group of objects, to give them all the same layout.

    For instance
    Code:
    <h1>Normal heading with default formatting</h1>
    <h1 class='a'>Heading with specific formatting</h1>
    <strong>Normal emphasis</strong>
    <strong class='a'>Emphasis with specific formatting</strong>
    The style definition for a would be for instance another color, another font, ...

    In your example, top and left are relative to the normal place where the div would have started.
    Quid Quid Latine Dictum Sit, Altum Viditur
    Thank you webdeveloper.com for providing these nice backlinks:
    Fotografie | Home Server (no need to click, it's for spiders )

  3. #3
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    It always makes me wonder why some approach a
    content-separate-from-style type of site as if they
    were trying to re-create a tabular layout...not saying
    that's what you're doing but many are.

    Anyway, get to know block-level vs. inline tag behaviors
    and specifically how to alter them with CSS. It seems
    you're just starting out, since as mdoigny pointed out,
    using top:value; left:value; etc. is of no use without a
    position:relative; [or absolute or fixed, etc.] property.

    Remember with positioning, it's easiest to use the 'natural'
    flow as much as you possibly can. Floats / clearing is usually
    pretty good - ditto for using % instead of px on certain major
    elements for a more fluid layout. Relative posit. means rel. to
    where it'd *normally* be. Absolute removes it altogether from
    the flow and sets it according to browser window - not always
    a great trait.

    Using inline styles: <tag style="allroperty; valueairs;">
    is okay when you want something to be unique from those
    styles you've set elsewhere - in an internal or external style
    sheet.
    [Again, class="" is for many that will share the same styles,
    id="" is for one unique instance of them.]

    Have fun,
    El
    F-fox 2.0 :: US :: el design site :: 768 kbps :: WIN

  4. #4
    Join Date
    Apr 2003
    Posts
    853
    Thank You

    So what I gather is that I should have stuck with the <div style> then.

    I prefer to stick to CSS and HTML format so <div style> seems to be a better choice.

    Actually I asked because I wanted clean code that also allows my site to be read on most browsers.

    I am not good with hand-coding..it just isn't my area so I use templates from other sites I made.....so I am not sure what is meant by "content separate from style".

    I guess I am just confused...thank you anyways.

  5. #5
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    Okay, sorry about that...
    Guess 'content sep. from style' means coding the html content as is - without inline styles or deprecated tags/attributes. Selecting tags that will best fit their contents and keeping all appearance-related coding in a separate .css file [external] that is linked to the .html page in the head section.

    Someone else may help to clarify ;-)

    El
    F-fox 2.0 :: US :: el design site :: 768 kbps :: WIN

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    The best practice is to use external stylesheets.

    Two big benefits:
    browsers will cache them
    you can separate style from content, which has a banefit that you can make major changes to your layout without modify the X/HTML.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  7. #7
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    It is far better to place the CSS in an external style sheet or block rather than inline; regarding ID it is a unique identifier and has slightly more power than a class.

    Typically you'd use the id for a few main areas and class for the minor areas.

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    To bring together what Robert Wellock and Kravvitz are saying:

    1. Use an ID when a style will occur once on multiple pages.

    2. Use a class when a style will occur more than once on multiple pages.

    3. Define the IDs and classes in an external style sheet so the browser can cache the file, and that style information doesn't have to be downloaded with each page.

    4. Use inline styles, i.e. <div style="foo: blah;">, when a style is unique to one tag on one page.

    Also, IDs take precedence over classes in style sheets. Inline styles take precedence over any CSS declaration in any external style sheet or embedded style sheet.

  9. #9
    Join Date
    Apr 2003
    Posts
    853
    So <div id> it is.


    Ok. Then here is a question that contains even more stupidity than the first one.

    How do I make an external CSS sheet and how do I apply it.

    So far what I have been doing is making my index page then using it as a template for the rest of the pages..merely switching text and images as needed...which..come to think of it, of it may not be too helpful for what I plan to do.

    Oh..please forgive my rudeness..thank you to all who have responded.

  10. #10
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    External CSS files are plain text, just like HTML, except the file names end in .css. CSS files ONLY contain CSS rules. No HTML. Linking to CSS files is easy too. Its done using two methods, both of which get placed in the HEAD of your HTML document.

    HTML Code:
    <link rel="stylesheet" type="text/css" media="screen" href="url/to/stylesheet.css">
    The above method allows a style sheet to be downloaded by 4.0 and newer browsers. Netscape 4.x has a quirk where it ignores the above tag completely because of the media attribute. If you want a style sheet to be read by ALL 4.0 and newer browsers, use the above HTML tag and omit the media attribute and value.

    The second method is using the @import rule.

    HTML Code:
    <style type="text/css" media="screen">
    <!--
    @import "url/to/another/stylesheet.css";
    -->
    </style>
    Browsers 5.0 and newer will download the style sheet using the @import method. Using a combination of LINK and @import style sheets, you can feed simple style sheets to 4.x browsers and more complex style sheets to 5+ browsers. Browsers 5.0 and newer will read the LINK style sheet and the @import style sheet. Advanced CSS 1.0 and 2.0 styles can be put in the @import style sheet, while commonly supported CSS 1.0 styles can be placed in the LINK stylesheet.
    Last edited by toicontien; 04-04-2006 at 12:02 AM.

  11. #11
    Join Date
    Nov 2005
    Posts
    22
    Hi Robert Wellock! I know its a v late reaction but i m a new joiny to this forum nad I must say i hv solved many of my problems by just goin to the replies of the queries posted here. My question goes directly to u. Hw is ID more powerful than Class as u hv stated in yr reply? I hv wondered many times but hv found no reply till now. I would be highly delighted if I get a reply!!!

  12. #12
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,736
    Quote Originally Posted by swatisharma
    Hw is ID more powerful than Class as u hv stated in yr reply?
    Simply put this is because of the cascade order. Every element is scored and styles are applied based on these scores.

    Here's the basics
    HTML Code:
    Selector           |      Specificity
    -----------------------------------
    Universal selector |      0,0,0,0
    element identifier |      0,0,0,1
    class identifier   |      0,0,1,0
    id identifier      |      0,1,0,0
    embeded style      |      1,0,0,0
    Specificity values are sorted in left to right presedence; hence containing eight element identifiers, (0,0,0,8) has a lower specificity then a single class identifier (0,0,1,0).
    Last edited by bokeh; 12-14-2005 at 06:47 AM.

  13. #13
    Join Date
    Apr 2003
    Posts
    853
    Umm..ok..but how do I make the stylesheet itself?
    Do I just write out the CSS code I want and save it in notepad?

    Sorry if this sounds silly to you but I never learned any of this in college nor did I ever get a clear picure of how to do it.

    Once again I thank you for your efforts.

  14. #14
    Join Date
    Oct 2005
    Posts
    22
    That's what I usually do. Do a search web search on "CSS Tutorial" and you can find some good lessons what walk you through the basics.

  15. #15
    Quote Originally Posted by Dark Dragon
    Umm..ok..but how do I make the stylesheet itself?
    Do I just write out the CSS code I want and save it in notepad?

    Sorry if this sounds silly to you but I never learned any of this in college nor did I ever get a clear picure of how to do it.

    Once again I thank you for your efforts.
    Or... Search for a CSS EDITOR, such as TopStyle

    "It's a small world, but I still wouldn't want to paint it."
    ---Steven Wright

    Jay on SurvivalRing
    Blog On!

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Posting Permissions

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



Recent Articles