Web Analytics Made Easy -
StatCounter Lists - CodingForum

Announcement

Collapse
No announcement yet.

Lists

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Lists

    Is there away of using unordered list or ordered list, with out having bullets or numbers? Or would I just use <p></p>?

  • #2
    Hi there Charisma,

    use this CSS...

    Code:
    [color=navy]
    ul,ol {
        padding: 0;
        margin: 0;
        list-style: none;
     }[/color]

    coothead
    ~ the original bald headed old fart ~

    Comment


    • #3
      Thank ya

      Comment


      • #4
        There is a list type, useful for information that comes in pairs. The tag for a definition list is, predictably <dl>. A one-term list would look like this:

        <dl>
        <dt>Ross Shannon</dt>
        <dd><em>noun</em>; Red-haired rascal.</dd>
        </dl>

        And that’ll create:

        Ross Shannon
        noun; Red-haired rascal.
        <dt>
        stands for Definition Term. It is not indented.
        <dd>
        stands for Definition Description. It appears indented. You don’t have to keep these tags in pairs, many dds are allowed under the same dt. Also, don’t worry — you can use these lists for any purpose without compromising their logical meaning. ‘Definition’ lists was just a misleading name they were given. Once again, the end tags aren’t strictly necessary, but take it from someone who knows: use them.
        And that's the lot.

        Comment


        • #5
          I'm making list of golf courses to there website. I didn't want numbers or bullets. Thanks

          Comment


          • #6
            Ignore how you want it to look when writing the HTML - use the tags that best define what the content is.

            Once you have the content correctly defined with the HTML then you can make it look the way you want using CSS.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment


            • #7
              Originally posted by felgall View Post
              Ignore how you want it to look when writing the HTML - use the tags that best define what the content is.
              THIS!

              If it's a list of short bullet points, use a ordered or unordered list... little tip, if it's big enough to warrant headings, it's probably not list items and a list would be redundant.

              HTML is about saying what things ARE, NOT what you want them to look like. You don't like how it looks, that's CSS' job!

              As a dearly departed friend once said and as I quote ad-nauseam, "If you choose your tags based on their default appearance, you are choosing all the wrong tags for all the wrong reasons!"
              Walk the dark path, sleep with angels, call the past for help.
              https://cutcodedown.com
              https://medium.com/@deathshadow

              Comment


              • #8
                Can I make ordered list horizontal?

                Comment


                • #9
                  Hi there Charisma,

                  yes you can.

                  Here is a possible solution...

                  Code:
                  [color=navy]
                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                  
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
                  
                  <title>horizontal ol element</title>
                  
                  <!--<link rel="stylesheet" href="screen.css" media="screen">-->
                  
                  <style media="screen">
                  body {
                      background: #f0f0f0;
                   }
                  
                  ol {
                      padding-left: 2.5%;
                      border: 0.06em solid #999; 
                      background: #fff; 
                      box-shadow: 0.25em 0.25em 0.25em #999;  
                   }
                  
                  ol::after {
                      content: '';
                      display: block; 
                      width: 100%;
                      overflow: hidden;
                   }
                  
                  ol li {
                      float: left; 
                      width: 15%;
                      padding: 1%;
                      margin: 0 2.5%;
                      box-sizing: border-box;
                   }
                  
                  ol span {
                      display: block;
                      padding: 1%;
                      border: 0.06em solid #999;
                      box-sizing: border-box;
                      text-align: center;
                   }
                  
                  ol li:nth-child(even) span {
                      background: #fee;
                      color: #600;
                   }
                  
                  ol li:nth-child(odd) span {
                      background: #eef;
                      color: #006;
                   }
                  
                  @media screen and (max-width: 30em) {
                  
                  ol {
                      padding: 1% 0 1% 2.5em ;
                   }
                  
                  ol li {
                      float: none; 
                      width: 100%;
                      padding: 1%;
                      margin: 0
                   }
                  
                  ol span {
                     width: 99%;
                    }
                   }
                  </style>
                  
                  </head>
                  <body>
                   
                  <ol>
                   <li><span>item</span></li>
                   <li><span>item</span></li>
                   <li><span>item</span></li>
                   <li><span>item</span></li>
                   <li><span>item</span></li>
                  </ol>
                  
                  </body>
                  </html>[/color]

                  coothead
                  ~ the original bald headed old fart ~

                  Comment


                  • #10
                    This was helpfull, But I was wondering what CSS I should put back in. So the #numbers are close to the words and the space is after the words.

                    Links - Empowered Golfers Mb.

                    Comment


                    • #11
                      Hi there Charisma,

                      have you tried removing the padding from here...

                      Code:
                      [color=navy]
                      ol li {
                          float: left; [color=red]
                          padding: 1%;[/color]
                          margin: 0 1%;
                          box-sizing: border-box;
                       }[/color]
                      ...in your experiments?


                      coothead
                      ~ the original bald headed old fart ~

                      Comment


                      • #12
                        Ok the words are closer to the numbers. but I want to control the spacing between the orders.
                        Links - Empowered Golfers Mb.

                        Comment


                        • #13
                          Hi there Charisma,

                          have you tried increasing the margin value here...

                          Code:
                          [color=navy]
                          ol li {
                              float: left; 
                          
                              margin: 0 [color=red]1[/color]%;
                              box-sizing: border-box;
                           }[/color]
                          ...in your experiments?

                          coothead
                          ~ the original bald headed old fart ~

                          Comment


                          • #14
                            It spreads the words from the numbers and makes my numbers smaller.


                            Links - Empowered Golfers Mb.

                            Code:
                            <style media="screen">
                            
                            
                            ol li {
                                float: left;
                                font-size: 1.5em; 
                                padding: 1%; 
                                font-weight: bold;
                                margin: 0 1%;
                                box-sizing: border-box;
                                  }
                             }
                            
                            </style>
                            Last edited by Charisma; Sep 18, 2016, 03:57 PM.

                            Comment


                            • #15
                              Hi there Charisma,


                              It spreads the words from the numbers and makes my numbers smaller.
                              The suggestion that I gave you in post #13 does neither of those things.

                              Unfortunately, instead of adjusting the margin you put back the padding
                              that I suggested you remove in post #11.

                              Perhaps it would be better, if just I stopped suggesting what you do and
                              instead provided exact instructions.

                              So use this...
                              Code:
                              [color=navy]
                              ol li {
                                  font-size:1.5em;
                                  float: left;
                                  margin: 0 4%;
                               }
                              ol li h3 {
                                  font-weight:bold;
                               }[/color]
                              ...instead of what you now have.

                              coothead
                              ~ the original bald headed old fart ~

                              Comment

                              Working...
                              X