SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: valid list

  1. #1
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    valid list

    Hi

    Is it valid to write a <li> element in the following with |?

    Code:
    <ul>
          <li><a href="index.html">Home</a>|</li>
          <li><a href="ship.html">Shipping</a>|</li>
          <li><a href="privacy.html">Privacy</a>|</li>
          <li><a href="contact.html">Contact Us</a>|</li>
          <li><a href="news.html">News</a>|</li>
          <li><a href="termsofuse.html">Terms of Use</a>|</li>
          <li><a href="sitemap.html">Site Map</a></li>
        </ul>

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    valid? yes

    best practice? maybe, maybe not

    personally, i like it because it's dead simple

    if you have a strong stomach, have a look at the css hacks here:
    http://brunildo.org/test/NavBar8.php
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's valid, but definitely not best practice unless you actually consider the vertical bars to be part of the content.

    If they are merely presentational, you can achieve much the same effect using CSS border properties.
    Birnam wood is come to Dunsinane

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    ... you can achieve much the same effect using CSS border properties.
    except then you have to compromise your markup with hacks

    i dunno which is the bigger sin, content that isn't content, or code hacks

    actually, i do know which is better -- the one with the simplest html and css
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .... how is using border properties a hack?

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Karpie View Post
    .... how is using border properties a hack?
    i suppose it isn't, if you apply it to all N items in the list

    please show me how you get the border property to display on N-1 items

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Code css:
    #menu li {
      border-left: 1px solid #000000;
      display: block;
      float: left;
      padding: 0 4px;
      margin: 0px;
    }
     
    #menu li:first-child {
      border-left: 0;
    }

    Code html4strict:
    <ul id="menu">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    You can also use last-child, but first-child is better supported.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  8. #8
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first-child doesn't work in ie6!

    so you would have to start hacking

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    thank you galen

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,347
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    actually, if i were to target a child, it would be the last one, suppressing the trailing border

    this would be equivalent to the trailing pipe character in the html in post #1 (which is missing from the Nth item)

    using a leading separator (on the 2nd through Nth items) means the second line, produced when the list wraps, starts awkwardly
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  11. #11
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    galen
    I know IE6 doesn't support :first-child. I just don't think it matters that IE6 would display a leading border.

    r937
    Assuming it wraps.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  12. #12
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    galen
    I know IE6 doesn't support :first-child. I just don't think it matters that IE6 would display a leading border.

    r937
    Assuming it wraps.
    I definitely think it matters that ie6 would display a leading border. agree to disagree.

  13. #13
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No hacks needed.

    Code CSS:
    ul {
        overflow: hidden;
        margin: 0;
        padding: 0;
        position: relative;
        width: 500px;
    }
    li {
        display: inline;
        float: left;
        left: -1px;
        position: relative;
    }
    a {
        padding: 0 7px 0 6px;
        display: block;
        text-decoration: none;
        border-left: 1px solid black;
    }

    Code html4strict:
    <ul>
        <li><a href="#">Linky</a></li>
        <li><a href="#">Linky</a></li>
        <li><a href="#">Linky</a></li>
    </ul>

    (Tested in IE6,IE7, FF3, Safari3, Opera9.5)

    ---Notice that a width needs to be applied to UL for the relative positioning to take effect in IE6.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  14. #14
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe hack is subjective. I consider overflow: hidden and moving the first item -1px left a hack

  15. #15
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why is using CSS in the way in which it was designed to be used, a hack?

    If you were adding things in like _border or any of the old voice-family hacks, I could understand not being happy with it. But seriously... there seems to be no pleasing some people.

    actually, i do know which is better -- the one with the simplest html and css
    Then surely wouldn't you rather make your code look like:

    Code:
    <a href="foo">foo</a> | <a href="bar">bar</a> | <a href=...
    After all, the HTML and CSS is much simpler. You lose all semantic meaning, but hey

  16. #16
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I consider it a hack when instead of coding it the correct way with first-child you have to give the container a width, set the overflow to hidden and move the first child 1 pixel to the left. im not saying its not an acceptable method, but what if i didnt want to have to give the ul a fixed width? then youd have to find another way (hack) to make it work.

  17. #17
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So don't put a width on it then, but the method will still work.

    Code:
    ul
    {
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    
    ul li
    {
        border-left: 1px solid red;
        display: inline;
        padding: 5px;
        margin-left: -1px;
    }
    Code:
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
    </ul>
    Works fine in everything I've got to test it in.

  18. #18
    SitePoint Addict skyhigh007's Avatar
    Join Date
    Jun 2006
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason why i want the vertical line is because I want to show the separation between each list when presenting in the footer. If you use border-left, would the border-left also highlighted when you do a:hover ?

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's up to you. You can let the border colour remain the same on hover or you can let it change.
    Birnam wood is come to Dunsinane


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
  •