4 Replies Latest reply on Feb 12, 2014 3:18 AM by David_Powers

    Unordered list displayed horizontally




      I am really new to Dreamweaver and I tried to complete (succesfully) the video on how to build my first website.


      Following the instruction was not so complicate...


      I tried to do pretty much alone the same focusing in creating the button from an unordered list


      I did with no CSS file, I created a new one empty. I am able to remove the bullet point, align the list but I can not display the button horizontally and I do not understand why.


      This is what I did:

      • create a Navigation  (id= buttons)
      • create an unordered list
      • create a CSS file empty
      • add a selection #buttons ul where I deleted bullet point and aligned the list
      • add a selection #buttons a
        • here I have problems. I apply with 25% (4 buttons) and set the float option to the left but the list remains vertical


      What I do wrong???? It seems I am doing like in the video. Is maybe related to the CSS file? Is not correct doing that with an empty one?


      Thanks for any help

        • 1. Re: Unordered list displayed horizontally
          David_Powers Level 7

          Without seeing your code, it's difficult to say what might have gone wrong. Here's a very simple example of four items in an unordered list floating horizontally. In the HTML:


          <ul id="buttons">

              <li><a href="#">Home</a></li>

              <li><a href="#">Products</a></li>

              <li><a href="#">Services</a></li>

              <li><a href="#">Contact</a></li>



          In the style sheet:


          #buttons  {

              list-style-type: none;

              margin: 0px;

              padding: 0px;


          #buttons a {

              display: block;

              width: 25%;

              float: left;


          • 2. Re: Unordered list displayed horizontally
            Aspnet Level 1

            Hello, thanks for your answer. Of course it is working, but still I do not get why is not working mine.


            here it is the html

            <!doctype html>



            <meta charset="UTF-8">


            <link href="styles/main copy 2.css" rel="stylesheet" type="text/css">





            <nav id="navbar">












            and here the CSS

            #navbar ul {

                      list-style-type: none;

                      margin-top: 0px;

                      margin-right: 0px;

                      margin-bottom: 0px;

                      margin-left: 0px;

                      padding-top: 0px;

                      padding-right: 0px;

                      padding-bottom: 0px;

                      padding-left: 0px;


            #navbar a {

                      width: 25%;

                      display: block;

                      float: left;


            • 3. Re: Unordered list displayed horizontally
              Aspnet Level 1



              I find the mistake. I just post it the solution in case somebody else is stuck at same point trying to do it alone.


              "#id a" refers to a link so before assign a css to alink I had to transform the unordered list to a link a href="#"


              After that it works



              • 4. Re: Unordered list displayed horizontally
                David_Powers Level 7

                Congratulations on finding the answer yourself. Making mistakes can be painful, but it's often a good way of learning.


                You might find the following tutorial helps you understand CSS selectors better: http://www.adobe.com/devnet/dreamweaver/articles/css-selectors-pt1.html.