SitePoint Sponsor

User Tag List

Page 3 of 6 FirstFirst 123456 LastLast
Results 51 to 75 of 136
  1. #51
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peach View Post
    Do you think an empty div is worse than wrapping 4 divs around a heading?
    No, I'm not that much of a zealot.
    Although I think 4 empty divs is equally bad as 4 wrapping divs.
    Birnam wood is come to Dunsinane

  2. #52
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Consistency is the Hobgoblin of Little Minds..." - Ralph Waldo Emerson

    I just love when people get worked up about this stuff... always a good for a morning laugh! D)

  3. #53
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peach View Post
    I do remember something about putting " " in empty structural elements, or empty table cells... back in the days of ie5.5 maybe.
    IE automatically hides empty <td> cells as 'normal' browsers do not hide them. If you want to show empty cells in IE, it is then people usually use &nbsp;.

    For browsers other than IE you can do this to hide empty cells:
    empty-cells: hide;

    IE of course will not read this declaration.

    Also, browsers other than IE automatically have a default setting of empty-cells: show;

  4. #54
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kburb23 View Post
    "Consistency is the Hobgoblin of Little Minds..." - Ralph Waldo Emerson
    And as computers have exceeding Little minds indeed, we need to be consistent when we tell them what to do.

    The difficulty of working with computers is just exactly that it is so hard for humans to think down to their level. If you are unwilling to do that then working with computers is not for you...
    Ed Seedhouse

  5. #55
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I think wrapping anything inside is a div is not semantic, but more often than not it's necessary.

    Code:
    <div id="events">
      <h3></h3>
      <p></p>
    </div>
    
    <div id="news">
      <h3></h3>
      <p></p>
    </div>
    #news is not semantic in its nature because it has no structural value. Personally, I feel it would be more semantic to do the below. However, the below has positioning limitations.

    Code:
    <h3 class="events"></h3>
    <p class="events"></p>
    
    
    <h3 class="news"></h3>
    <p class="news"></p>
    I think creating a relationship through class names is more semantic and results in less mark-up. However, the reality is that this approach is most times not practical when it comes to floating groups of information.

    Nesting tags inside one another hold little contextual value in themselves so all markup is really not semantic if you think about it. We nest tags to group related information in order to style it. Really, those group are not needed from a contextual standpoint, therefore, I feel they are not semantic. However, they its necessary given the technology.

  6. #56
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    I think wrapping anything inside is a div is not semantic, but more often than not it's necessary.

    Code:
    <div id="events">
      <h3></h3>
      <p></p>
    </div>
    
    <div id="news">
      <h3></h3>
      <p></p>
    </div>
    #news is not semantic in its nature because it has no structural value. Personally, I feel it would be more semantic to do the below. However, the below has positioning limitations.

    Code:
    <h3 class="events"></h3>
    <p class="events"></p>
    
    
    <h3 class="news"></h3>
    <p class="news"></p>
    I think creating a relationship through class names is more semantic and results in less mark-up. However, the reality is that this approach is most times not practical when it comes to floating groups of information.

    Nesting tags inside one another hold little contextual value in themselves so all markup is really not semantic if you think about it. We nest tags to group related information in order to style it. Really, those group are not needed from a contextual standpoint, therefore, I feel they are not semantic. However, they its necessary given the technology.
    Divisions usually save the 'developer' from the redundant class name 'use' as well as being 'used' structurally as a container for the block of code.

    I think the 'correct' naming convention gives them a 'semantic' purpose, or at least helps the 'developer' almost in a sense 'index' chunks of related information.

    Code:
    <div id="current-events">
    	<h2>Current Events</h2>
    	
    	<div id="news">
    		<h3>News</h3>
    		<p>...</p>
    	</div>
    	
    	<div id="events">
    		<h3>Events</h3>
    		<p>...</p>
    	</div>
    </div>

  7. #57
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Tommy
    My comment may perhaps be interpreted the wrong way. It was meant with a chuckle.
    Yesh, so was mine : ) I just happen to know you're an Opera fan.

    I just hate smilies for some reason. : ) is ok. Maybe too old-school?

  8. #58
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only type of use of the div element that is correct is #header #main #footer etc.

  9. #59
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peach View Post
    The only type of use of the div element that is correct is #header #main #footer etc.
    Would you care to add a motivation for that rather strong and surprising statement?

    A div is any sort of 'division' of a page: a group of elements that constitute a unit that is separate from other units. That's all.
    Birnam wood is come to Dunsinane

  10. #60
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    #header and #footer are visual therefore, they aren't semantic either. The #main is really the body tag talking semantics. Every wrapping div placed on a page is not semantic because the information within can exists without it. Proximity plays a larger role in grouping related information than wrapping elements do. Wrapping elements serve no contextual purpose to the viewer. The viewer groups related information through proximity rather than whether the element is contained in another element. The only purpose wraps serve are to make life easier isolating multiple elements. They aren't semantic in the least. However, they are necessary.

  11. #61
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    #header and #footer are visual therefore, they aren't semantic either.
    I disagree. A header is something that comes before something else (e.g. HTTP headers), while a footer is something that comes after something else. There's a strong coupling to visual presentation – you rarely see a header anywhere else than at the top of the document – but that doesn't mean they're not semantic.

    Quote Originally Posted by oddz View Post
    The #main is really the body tag talking semantics.
    No, the body element comprises all the visible content of the document: header, footer, sidebars, advertisements, articles, images, …

    #main indicates the main part of the content (probably excluding header, footer, sidebars, advertising, etc.)

    Quote Originally Posted by oddz View Post
    Every wrapping div placed on a page is not semantic because the information within can exists without it.
    A div that wraps around a group of other elements is semantic, because it indicates that those elements belong together in a stronger way than they belong to other parts of the document.

    Quote Originally Posted by oddz View Post
    Proximity plays a larger role in grouping related information than wrapping elements do.
    Okay. How does the following indicate that B and C are a structural unit, i.e., have a closer association than A and B or C and D?
    Code:
    <p>A</p>
    <p>B</p>
    <p>C</p>
    <p>D</p>
    Compare to this:
    Code:
    <p>A</p>
    <div>
      <p>B</p>
      <p>C</p>
    </div>
    <p>D</p>
    Quote Originally Posted by oddz View Post
    Wrapping elements serve no contextual purpose to the viewer.
    You seem to be confusing structure and semantics with presentation.
    Birnam wood is come to Dunsinane

  12. #62
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not that I think Tommy needs any help, but...
    Quote Originally Posted by peach View Post
    The only type of use of the div element that is correct is #header #main #footer etc.
    So what is the structure of your document? The basic tags of the webpage implement the content, but you have no larger structure at that point, zero; divs give a page semantic meaning and structure in a larger sense. I agree with everything Tommy said about #main, #header, and #footer. Just because these powerful abstract concepts have equally powerful presentation benefits for UI design in no way diminishes their semantic importance.

    Further you've poo-pooed using any other div on the page which is where they are much more clearly semantic. My webpage has a series of nested lists. This structure has no semantic meaning until I wrap it in this div

    Code:
    <div id="navbar">
    --- nested lists ---
    </div>
    That's the essence of why divs are necessary this structure has no semantic meaning without it. Moreover, the div groups the lists; it forms a clearly modular unit of code. I can move it from the header to the footer to anyplace else on the page and it is still clearly the navbar no matter how it is or is not styled.

    Quote Originally Posted by oddz View Post
    Code:
    <h3 class="events"></h3>
    <p class="events"></p>
    
    
    <h3 class="news"></h3>
    <p class="news"></p>
    I think creating a relationship through class names is more semantic and results in less mark-up. However, the reality is that this approach is most times not practical when it comes to floating groups of information.

    Nesting tags inside one another hold little contextual value in themselves so all markup is really not semantic if you think about it.
    I think this is completely backwards. It's not just that you can't use CSS on this structure. You've destroyed the modularity of your code. You can no longer decide a particular paragraph is in the wrong section an move it. This also attaches larger semantic value directly to the HTML element, divs group semanticly related content. You can see the difference if you swap the paragraphs...

    Code:
    <h3 class="events">Events</h3>
     <p class="news"></p>
    
    
    <h3 class="news">News</h3>
    <p class="events"></p>
    This result is absurd. That's why you use divs.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  13. #63
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you where all like me, You'd be a designer that doesn't know how to code =D.. So I pretty much only use divs and really, really, really basic coding.. Heres a little peice of my page.

    Code:
    <div id="apDiv4">
      <p align="center" class="style1">We currently have 120 member on the forums<br>
        119 registered users &amp; 21 guests<br>
      </p>
      <p align="center"><span class="style1">You are not logged in,</span> <span class="style4">Please log in!</span></p>
    </div>
    <div class="style2" id="apDiv5">
      <div align="center">Please enter your E-mail address to recieve weekly updates and news on Inked-Pixels.</div>
    </div>
    <div id="apDiv6">
      <div align="left" class="style1">&quot;Where on this site can I access the templates to view them?&quot;</div>
    </div>
    <div class="style1" id="apDiv7">
      <div align="left">&quot;I'm aware on where to find the free templates but where are the premium?&quot;</div>
    </div>
    <div id="apDiv8">
      <div align="left">Advertisement Piece</div>
    </div>
    If you guys ever want to code my designs for me thatd be cool! Lol...

  14. #64
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  15. #65
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Would you care to add a motivation for that rather strong and surprising statement?

    A div is any sort of 'division' of a page: a group of elements that constitute a unit that is separate from other units. That's all.
    Sure. with my list I tried to explain that divs are used for structural elements. This is clearly stated in w3 standards and technical documents, which Im sure you know so I'm surprised you're surprised.

    I disagree that the div element is "any" sort of division because that statement would justify the abuse that this element takes (we've all seen divilitis). Defining the div so broadly would justify wrapping it around any pack of elements in your webpage, but w3 states as follows:

    The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents
    So the purpose is to give structure to documents. Still a definition that is open to interpretation but what I derive from it is that div is used for the parts of your website that form the basic building block of the page, giving it structure.
    In practice that means for me that I will want to use div tags only for #header, #main, #navbar, and maybe .sidebar.

    Divving a group of content such as for example 3 blocks with 4 text links, I think would only be ok only if these links are unrelated to the #main content or other structural parts of the site.
    If these links would be strongly related to the main content I would just add them in the #main div and give more subtle semantic meaning through shared classnames of the ul elements.

    Thats my interpretation anyways, Im sure there are many coders who know the standards better than me and Im open to new ideas.

  16. #66
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I'm going to agree to disagree.

    Code:
    <h3 class="news">News</h3>
     <p class="news"></p>
    
    
    <h3 class="events">Events</h3>
    <p class="events"></p>
    I don't think this absurd because the implied relationship is kept even when one element is not in close proximity to another.

    Code:
    <h3 class="events">Events</h3>
     <p class="news"></p>
    
    
    <h3 class="news">News</h3>
    <p class="events"></p>
    Implied relationship is semantically maintained, but the presentational relationship is broken.

    The presentational relationship is not what the structure is concerned with though so changing the proximity shouldn't matter in theory. Furthermore, one less div to worry about.

    Further you've poo-pooed using any other div on the page which is where they are much more clearly semantic. My webpage has a series of nested lists. This structure has no semantic meaning until I wrap it in this div
    There is the needless use of divisions. A unordered list is equally as semantic as a div for this. If you were to use a div you would introducing a presentational element in my opinion because an unordered list can exists independently of the div.

    Code:
    <ul id="navbar">
    <!--  list item -->
    </ul>

  17. #67
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    AutisticCuckoo wrote
    I disagree. A header is something that comes before something else (e.g. HTTP headers), while a footer is something that comes after something else.
    Positioning relates to presentation.

    AutisticCuckoo wrote
    No, the body element comprises all the visible content of the document: header, footer, sidebars, advertisements, articles, images, …
    #main indicates the main part of the content (probably excluding header, footer, sidebars, advertising, etc.)
    Main content is quit subjective. The concrete content is actually the entire page.

    AutisticCuckoo wrote
    A div that wraps around a group of other elements is semantic, because it indicates that those elements belong together in a stronger way than they belong to other parts of the document.
    I’ll agree with you there, but its subjective. Using your logic everything can be wrapped in a div and its perfectly fine. However, as we all know this isn’t the case.

    You can't define something as being unacceptable when its acceptable. If your going to say that wrapping things inside divisions is acceptable than it can't be unacceptable. As for the depth, that is subjective. Multiple divisions wrapped inside each other are essentially grouping information and are acceptable by your standard.

  18. #68
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peach View Post
    Sure. with my list I tried to explain that divs are used for structural elements.
    No, your list said that divs are only to be used for a small number of very specific structural elements.

    Quote Originally Posted by peach View Post
    This is clearly stated in w3 standards and technical documents, which Im sure you know so I'm surprised you're surprised.
    Please point me to the place in the HTML4 specification that says divs are only allowed for certain specific ID attributes. I've read the spec many times, but it seems I've missed that part.

    Quote Originally Posted by peach View Post
    I disagree that the div element is "any" sort of division because that statement would justify the abuse that this element takes (we've all seen divilitis).
    Of course you're not mean to use a div if there is a more specialised and semantically correct element type available. Divs are the last resort, when you need to group elements that don't make up a paragraph, list, form, table, block quotation, etc.

    Quote Originally Posted by peach View Post
    So the purpose is to give structure to documents.
    I think you may have misunderstood what is meant by 'structure'. You are thinking in terms of typical contemporary web sites, while HTML is meant for marking up documents (primarily scientific ones) of information.

    The term 'structure' refers to the grouping and nesting of elements within the document, not to arbitrary visual components.

    Quote Originally Posted by peach View Post
    Divving a group of content such as for example 3 blocks with 4 text links, I think would only be ok only if these links are unrelated to the #main content or other structural parts of the site.
    They don't have to be unrelated to the rest of the document. The important reason for enclosing those blocks would be that they have a strong relationship to one another.

    Quote Originally Posted by oddz View Post
    Positioning relates to presentation.
    Agreed. But who's talking about positioning? I'm talking about logical order.

    In an HTTP request, you don't get the content (body) first and then a set of headers as an afterthought saying, 'oh, by the way, what you just received was an HTML document'. You get the headers first, so that you know what to expect.

    Similarly, a document header indicates something that should structurally come before the remainder of the page.

    Quote Originally Posted by oddz View Post
    I’ll agree with you there, but its subjective. Using your logic everything can be wrapped in a div and its perfectly fine. However, as we all know this isn’t the case.
    No, as I explained above, a div should only be used when there is no semantically correct element type available.
    Last edited by AutisticCuckoo; Sep 28, 2008 at 11:40.
    Birnam wood is come to Dunsinane

  19. #69
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Shouldn't that be "a div should only be used when isn't a semantically correct element type available"?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #70
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Shouldn't that be "a div should only be used when isn't a semantically correct element type available"?
    You left out the word 'there'

    We all know what Tommy means.

  21. #71
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Thanks cooper. I susperct that I'm upholding the grand tradition of incorporating another mistake when correcting some other one.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #72
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    ...Positioning relates to presentation....
    Only when you think how the page is displayed with CSS. However without CSS #header is always at the head of the document. #header, #footer define sections of the document, not of the layout you want to do with CSS.

    The HTML document should not be written with any correlation to CSS (unless it is absolutely needed.) So for example while in CSS #header maybe come a footer, without CSS it is still a header. CSS should have no bearing on how you structure your document.

    HTML defines the structure.
    CSS defines the presentation.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  23. #73
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    A header,footer, masthead,etc are all presentational. They relate to proximity and positioning. They have no bearing on the content itself unless your talking about where it is located on a page – presentation. They don't actually describe content they describe where content is located.

    dictionary:
    footer: a line or block of text appearing at the foot of each page of a book or document.
    dictionary:
    masthead: the title of a newspaper or magazine at the head of the front or editorial page.

  24. #74
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    They describe content in relation to a group. They define a structure of a document. Just as books have a header and a footer, the head usually contains Title of the book or current chapter, while the foot may contain a page number or any other information like foot notes. header and footer group relative information.

    While yes it could be presentational, because as you put it, header, and footer have position. But they have far more definition then just position.

    According to your logic, we could not use the h1-h6 tags because they have a defined position. "Headers are to appear before there block of content" that has a set position.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  25. #75
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Please point me to the place in the HTML4 specification that says divs are only allowed for certain specific ID attributes. I've read the spec many times, but it seems I've missed that part.
    Obviously thats not what I meant. The "etc." at the end of my sentence implied the list continues with more of similar structural blocks of a document.
    The identifiers in my sentence were not to be taken literraly, I just used them to give semantic () context to the words footer and header, implying that Im talking about HTML documents specifically.


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
  •