SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    lists versus regular text

    In making a simple list, does it matter if you make it a "ul" versus just typing text with breaks? What are the advantages or differences?

    thanks!
    susan

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The difference is that a user agent (like a browser) will then know it's a list. It will be styled as a list even in non-CSS browsers. A screen reader will announce that it's a list, and usually how many items it contains, so that the user can decide whether to listen to it or not.

    The advantage, other than doing things right, is that you get an element for each item that you can style with CSS.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically by using breaks you are claiming that there is a lack of vocabulary html has to offer for correctly marking up the intended content. Also by using a list, you get extra styling hooks for more control over each item as Tommy said.

    http://www.w3.org/TR/html4/struct/lists.html

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <br>This is some testing text</br>
    <br>This is some testing text</br>
    <br>This is some testing text</br>
    <br>This is some testing text</br>
    <br>This is some testing text</br>
    <br>This is some testing text</br>
    <br>This is some testing text</br>



    LOL ^^^


    Code CSS:
    * {
        margin:0px;
        padding:0px;
    }
     
    #menu li {
        display:inline;
    }
     
     
    <ul id="menu">
            <li><a href="" alt="">This is some testing text</a></li>
            <li><a href="" alt="">This is some testing text</a></li>
            <li><a href="" alt="">This is some testing text</a></li>
            <li><a href="" alt="">This is some testing text</a></li>
            <li><a href="" alt="">This is some testing text</a></li>
            <li><a href="" alt="">This is some testing text</a></li>
    </ul>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good to know.

    now when I go to format my text as a list, it still keeps the <br /> code at the end of each item:

    here's how it was as regular text:

    <p>Astro Crane Service<br />
    Bay Club of Mattapoisett (The)<br />
    Berkshire School (The)<br />
    Bolton, Town of <br />
    Geiss Corp.</p>

    and here's how it is when I format it as a list:

    <ul>
    <li id="list">Astro Crane Service<br />
    Bay Club of Mattapoisett (The)<br />
    Berkshire School (The)<br />
    Bolton, Town of <br />
    Geiss Corp.
    </li>
    </ul>

    It doesn't look like the example below... what should I be doing differently?

    thanks! I know this is something that should be so simple, but I'm going crazy trying to figure it out on my own. I printed out the article from the link below so I'll be reading in the meantime.

    thanks again!
    susan

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spu View Post
    good to know.

    now when I go to format my text as a list, it still keeps the <br /> code at the end of each item:

    here's how it was as regular text:

    <p>Astro Crane Service<br />
    Bay Club of Mattapoisett (The)<br />
    Berkshire School (The)<br />
    Bolton, Town of <br />
    Geiss Corp.</p>

    and here's how it is when I format it as a list:

    <ul>
    <li id="list">Astro Crane Service<br />
    Bay Club of Mattapoisett (The)<br />
    Berkshire School (The)<br />
    Bolton, Town of <br />
    Geiss Corp.
    </li>
    </ul>

    It doesn't look like the example below... what should I be doing differently?

    thanks! I know this is something that should be so simple, but I'm going crazy trying to figure it out on my own. I printed out the article from the link below so I'll be reading in the meantime.

    thanks again!
    susan
    To make equal spacing between the LI Elements we can using padding:5px 5px 5px 5px; or the use of Margins. Using the <br> tag is not deprecated but people are barely using it in there Markups.


    If you need to create spacing and endings of a line use a <p></p> Tag.


    Code CSS:
    p {
        padding:5px 5px 5px 5px;
        margin:1px;
    }
     
     
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Using the <br> tag is not deprecated but people are barely using it in there Markups.
    When I place unformatted text, it automatically puts the <br /> tag at the end of each line. Should I go in and manually delete?

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spu View Post
    When I place unformatted text, it automatically puts the <br /> tag at the end of each line. Should I go in and manually delete?
    Have you gone back to this? In that case, I used search and replace, i.e. find each case of <br> and replace it with </li><li>. That ends the instant list item, and starts the next. I ran it against HTMLTidy to get everything formatted.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gary's solution is what I would do but say you didn't have access to change the hardcoded (x)html, then you would have to do something like this:

    .list br { display: none; }

    Lets just hope it never comes to a situation such as that

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Either the editor is configured incorrectly OR you are using it incorrectly if you are ending up with markup like that using <br> for your list.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @BlakeAnthony: Why are you using an alt attribute in your links (post #4)? That's invalid – not to mention pointless.

    Susan, this is what your list markup should look like,
    Code HTML4Strict:
    <ul>
      <li>Astro Crane Service</li>
      <li>Bay Club of Mattapoisett (The)</li>
      <li>Berkshire School (The)</li>
      <li>Bolton, Town of </li>
      <li>Geiss Corp.</li>
    </ul>
    Birnam wood is come to Dunsinane

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Tommy, surely it does not make semantic sense to use a list when putting the address of a location, lists are meant to contain options or bullet points of information. An address which in general terms would be comma separated (alike writing poetry) which is joined by a single purpose would be a genuine use of line breaks... or perhaps I am mistaken?

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Indeed not, Alex. But I don't believe this is one address, but actually an alphabetical list comprising the names of separate organisations and institutions.
    Birnam wood is come to Dunsinane

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Well perhaps then using an ordered list (if alphabetical) with each address on a LI using BR to seperate each part of the address would make more sense?

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, if there were addresses, that would be the right way to go. In this case it seems to be names only, though, so no <br> tags are needed.

    And the list should be unordered, not ordered, since the order of the list items doesn't affect the meaning of the list as a whole. Sorted is not the same as ordered.
    Birnam wood is come to Dunsinane

  16. #16
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Alex: In post #8, I linked to the original issue. You will find the source in question.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok - I think I got it! whew! Here's the link to the page so far:

    http://susan-unger.home.comcast.net/...ow/client.html

    It's an unordered list, and each item is its own list element. I have a class ID assigned to the text for styling.

    I must be doing something wrong because whenever I place text, the <br> tag is automatically there, and when I make it a list, it keeps the <br> tag, so I did a find and replace and manually checked each of the lines in the code. Seems like I'm doing something out of order... but at least it's where it should be now. thank goodness for all your help!

    Now, for some reason, you can see there's a white band at the top and bottom of the main div and I'm not sure where it's coming from. I colored the background pale yellow so you can see.

    Any thoughts on how to fix the white bands?

    thanks again!

  18. #18
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bands are collapsed margins. To #client, oxbow.css (line 241), add {padding: 1px 0;}.

    Do you mean that you have two lists of clients? If not, the markup is neither well structured nor semantic. If it is a single list, the solution I gave you, and to which you haven't responded, has a well structured and semantic markup, will yield any reasonable number of columns by a single change in the ruleset, and requires no restructuring of the content.

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gary,

    Thanks for the collapsed margin info - worked perfectly. How did that happen so I can avoid it next time?

    I will go back and rework the list based on the solution you gave earlier. It is indeed one list, not two separate lists. At first, I was a bit overwhelmed, but I'm sure it will be worth the learning curve to make it correct.

    In the meantime, how do you extract the external .css file so you can see the code? I've always wondered how people can do that.

    thanks again!
    susan


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
  •