SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru D-flyer's Avatar
    Join Date
    Jan 2001
    Location
    Near a computer
    Posts
    782
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Where to put <div> ?

    Hi there,

    I am now using CSS to put a website together (and it must be NN4 compatibel ). But i was wondering where to define the <div>'s, i.e. should i do it between the <body> tags like:
    Code:
    <div id="test" 
    style="position:absolute; 
    width:94; 
    height:13;
     z-index:22; 
    left: 150; 
    top: 302; 
    visibility: visible;">
    <img src="img/blah.gif" width="94" height="12"></div>
    or should i do it between <style> tags, like
    Code:
    #test {
    position:absolute; 
    width:94; 
    height:13; 
    z-index:22; 
    left: 150; 
    top: 302; 
    visibility: visible;}
    and in the body use:
    <div id="test"><img src="img/blah.gif" width="94" height="12"></div>


    Which one is the better approach and why???

    Thanks in advanced,
    D.

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the best approach is to keep your styles in an external css, linked to your page. this is particularly useful if you've got many different pages using the same div style: if they're all just using the style defined in the CSS, and at a later stage you decide to change the dimensions of the div, you only need to edit one single CSS file, rather than having to go through all your pages and change the style definitions.

    if using an external CSS is not an option, then i'd opt to have the style definitions in a <style> block rather than mixed in with the div tag...just to keep things separated (even if it is within the same document).
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The second is the better approach, especially when you learn how to take advantage of the 'cascade' so you will not have to define everything for each element separetly.
    Something even better when you use the same style in many pages is to use external stylesheets.

    In the examples you gave above you forgot to add the 'px' at the end of your numbers. (e.g width:94px , not just width: 94).It might still work with most browsers, but it is not correct.

    Also, you can add the style directly to the 'img' tag, although this might not be compatible with NS4

  4. #4
    SitePoint Guru D-flyer's Avatar
    Join Date
    Jan 2001
    Location
    Near a computer
    Posts
    782
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnks redux,

    Sounds pretty cool/dynamic/obvious to
    keep your styles in an external css
    but i didn't think of it, thnks for that.

    In my case i have indeed pages with the same div style, i got three page designs with some layers (div's) in the same place and some on different places.

    Q1: As i understand it, i can define all div's in a external style sheet and a page will only read/use the one you call within the <body> tags, right?

    Q2:How about the competibility with NN4 any obvious pitfalls to consider?

    Q3: Uhum, a very dumb question, uhum .... am i now using/doing DHTML?

    Thanks 7 for pointing out "px". So i need to make clean code, like xml, nice tidy and everything named.

    D.
    Last edited by D-flyer; Jan 28, 2003 at 02:45.

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by D-flyer

    Q1: As i understand it, i can define all div's in a external style sheet and a page will only read/use the one you call within the <body> tags, right?

    Q2:How about the competibility with NN4 any obvious pitfalls to consider?

    Q3: Uhum, a very dumb question, uhum .... am i now using/doing DHTML?
    A1: you can define as many styles as you want, but you'll only see anything if you use them on your page...so yes

    A2: hmmm...not sure, might have to install it myself and give it a try

    A3: no. DHTML is basically when you've got a page using CSS which is manipulated via javascript...i.e. a script on the client-side making changes to elements' styles (e.g. changing a div's visibility attribute)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    SitePoint Guru D-flyer's Avatar
    Join Date
    Jan 2001
    Location
    Near a computer
    Posts
    782
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redux,

    About A3, isn't that a little bit double. I mean it sounds like "styling the style" or am i missing something?

    D.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It's not really "styling the style" as you say, it's more of just changing the style when needed. For example, if somebody puts invalid information in a form field, you can change the field's text from black to red, in order to let the user know that the information is invalid. This is accomplished through Javascript manipulating styles, also known as DHTML.


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
  •