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

    Unordered list displayed horizontally

    Aspnet

      Hello,

       

      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 Adobe Community Professional (Moderator)

          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>

          </ul>

           

          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>

            <html>

            <head>

            <meta charset="UTF-8">

            <title>Home</title>

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

            </head>

             

             

            <body>

            <nav id="navbar">

              <ul>

                <li>Home</li>

                <li>Products</li>

                <li>Services</li>

                <li>Contacts</li>

              </ul>

            </nav>

            </body>

            </html>

             

             

            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

              Hello,

               

              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

               

              Thanks

              • 4. Re: Unordered list displayed horizontally
                David_Powers Adobe Community Professional (Moderator)

                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.