Web Analytics Made Easy -
StatCounter Lining Up Bullet Points - CodingForum

Announcement

Collapse
No announcement yet.

Lining Up Bullet Points

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

  • Lining Up Bullet Points

    Hey Guys,

    Anyone know how to line up bullet points? I've got a list, but I need them in a line to fit more on the page.

    Any ideas if this can be done?

  • #2
    umm so show the code or a link to your site.....

    By default they SHOULD line up, unless you're breaking your box model or something else is going on.
    Teed

    Comment


    • #3
      Bottom bit is the bullet points. I've attached an image of what it looks like.

      Code:
      <center>
            <h3><p>UK<font color="#8B0000">GEO</font>forum is a group of societies and associations that represent the core interests that encompass geography, mapping and the geospatial information handling industry.</h3></p>
      </center>
      
            <h3>through</h3>
      
      <ul>
              <li>representing 40,000 professionals in the GI industry</li>
              <li>sharing information and experiences</li>
              <li>promoting members' interests at international level</li>
              <li>attending conferences and trade shows worldwide</li>
              <li>exerting influence on governmental strategies</li>
              <li>raising the profile of geography in official circles</li>
              <li>pushing the frontiers of geographical awareness</li>
              <li>exchanging news and views of individual members</li>
              <li>striving to safegaurd the future of the GI industry</li>
      </ul>
      Attached Files

      Comment


      • #4
        Ok they look "lined up" to me. How did you want them to look?

        Also your style sheet code and ALL your html code would be more beneficial.

        One more note is the <center> tag is outdated and should not be used.
        Teed

        Comment


        • #5
          Share the full page code and also avoid using <font> tags

          Comment


          • #6
            Originally posted by vikram1vicky View Post
            Share the full page code and also avoid using <font> tags
            lol Yep center AND font tags are no no's
            Teed

            Comment


            • #7
              Thanks for your responses

              Sorry, I meant lined up as in a row. One next to each over, if that even possible.

              So I want five on the left and the other 4 next to them on the right

              Comment


              • #8
                Originally posted by Brooksy View Post
                Thanks for your responses

                Sorry, I meant lined up as in a row. One next to each over, if that even possible.

                So I want five on the left and the other 4 next to them on the right
                Thats a bit trickier. I saw a tutorial once from one of the members here on how to make a two column list, but cant remember. You could of course make two different unordered lists and float one left to allow the other to move up beside it.

                Try this.

                Wish I could remember who's site this is so I could give credit to them...lol
                Last edited by teedoff; Aug 17, 2011, 10:12 AM.
                Teed

                Comment


                • #9
                  @teedoff

                  Thank you very much for your help. I really appreciate it. I really hope this works :P

                  Comment


                  • #10
                    Check following

                    Code:
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                    
                    <style type="text/css">
                    ul {
                        list-style:none;
                    }
                    ul li {
                        float:left;
                        width:100px;
                        margin:0 4px;
                        overflow:auto;
                    }
                    
                    </style>
                    </head>
                    <body>
                    <ul>
                      <li>Text 1. some text here... . some text here... . some text here.... some text here.... some text here...</li>
                      <li>Text 2. some text here... . some text here... . some text here.... some text here.... some text here...</li>
                      <li>Text 3. some text here... . some text here... . some text here.... some text here.... some text here...</li>
                      <li>Text 4. some text here... . some text here... . some text here.... some text here.... some text here...</li>
                    </ul>
                    
                    </body>
                    </html>

                    Comment


                    • #11
                      Hi!
                      Boss if you are new in the programming than better you read css first.In CSS you just have to create a class with the equal values like margin and width etc.Than use that class into the <div>.inside the <div> </div> use your list with bullets.

                      Comment


                      • #12
                        Thanks for your comments guys.

                        @teedoff sent me a link with this code. Works a treat! Thanks again!!!

                        Code:
                        <div style="float: left; width: 50%;">
                        <ul>
                        <li>Left Item 1</li>
                        <li>Left Item 2</li>
                        <li>Left Item 3</li>
                        <li>Left Item 4</li>
                        <li>Left Item 5</li>
                        </ul>
                        </div>
                        <div style="float: right; width: 50%;">
                        <ul>
                        <li>Right Item 1</li>
                        <li>Right Item 2</li>
                        <li>Right Item 3</li>
                        <li>Right Item 4</li>
                        <li>Right Item 5</li>
                        </ul>
                        </div>

                        Comment


                        • #13
                          Originally posted by Brooksy View Post
                          Thanks for your comments guys.

                          @teedoff sent me a link with this code. Works a treat! Thanks again!!!

                          Code:
                          <div style="float: left; width: 50%;">
                          <ul>
                          <li>Left Item 1</li>
                          <li>Left Item 2</li>
                          <li>Left Item 3</li>
                          <li>Left Item 4</li>
                          <li>Left Item 5</li>
                          </ul>
                          </div>
                          <div style="float: right; width: 50%;">
                          <ul>
                          <li>Right Item 1</li>
                          <li>Right Item 2</li>
                          <li>Right Item 3</li>
                          <li>Right Item 4</li>
                          <li>Right Item 5</li>
                          </ul>
                          </div>
                          Well, thats not exactly how that link suggested you do this...lol You've only created two unordered lists, which I assume will work fine.

                          I would again suggest you separate content from style though. Placing all your styles in a separate style sheet will be far less headache in the long run, not to mention it keeps your page html code cleaner and easier to manage.
                          Teed

                          Comment


                          • #14
                            Another way to do it, is to use the code vikram1vicky gave you and simply add '&bullet;' before the text in the li. This will give you the bullet as a symbol, !!

                            Comment


                            • #15
                              I have have a vertical list of bullet points but i want to stagger them into a diagonal line any ideas how this can be done i've tried putting white space before the <li> tag but it just drops the whole thing down a line

                              Comment

                              Working...
                              X