5 Replies Latest reply on Mar 17, 2010 5:48 PM by Zabeth69

    User Interface problem with display within design view

    salli4th

      Hello! I am using template #2 from the Adobe Developer Connection found here: http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html

       

      When I add more than 10 navigation buttons they begin to appear to the right of the first 10 in design view.

      There is a screen grab showing the problem here: http://www.sallyaverill.com/dw_grab.html you will see in code view that it's simply a list, but it blows up in design view, pushing the content to the right and pushing a Spry accordion panel down.

       

      It looks and acts fine in live view and in a browser, locally and remotely, but I would like to see it properly in design view. What is causing this? Please let me know if there's more info needed. CS4, WindowsXP

       

      Many thanks - Sal

        • 1. Re: User Interface problem with display within design view
          Zabeth69 Level 5

          One thing to remember is that the Design View is not (as you have discovered) a WYSIWYG; it gives an approximation...and usually a pretty good one...of what your page will look like. But I have solved the problem! The stylesheet calls for the "a" tag (the link on the menu) to be floated left. This is not correct.

           

          First, wrap your navigation ul in a div with class="navdiv" and change your stylesheet in this way:

           

          .navdiv {

           

              width: 200px;

           

              height: 800px; /*This is an arbitrary height, which you may change*/

           

              float: left;

           

          }

           

          /*as this next rule was applied to the ul, we will take away its float*/

           

          .leftnavigation {


              width: 192px;
              margin: 70px 0px 0px 0px;
              padding-left: 8px;
          /*    float: left;
          */    list-style-type: none;
          }
          /*Then we make a group selector, adding the .leftnavigation li in order to "grab" the styling from the a tag*/

           

          .leftnavigation a, .leftnavigation li{
              margin-left: 0px;
              width: 156px;
              padding-left: 15px;
              padding-top: 5px;
              padding-right: 20px;
              padding-bottom: 5px;
          /*    float: left;                                    get rid of the float on the rule!
          */    color: #364957;
              font-size: 10px;
              font-weight: bold;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              text-decoration: none;
              background-image: url(images/nav_normal.jpg);
              background-repeat: repeat-x;
              background-position: 0px 0px;
              border-bottom: 1px solid #999;
          }

           

          /*Add the float back in, to a .leftnavigation li style selector*/
          .leftnavigation li {
              float: left;
          }

           

          I have also posted this comment in the http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html page, for the benefit of others reading your comment and running into the same difficulty.

           

          Beth

          1 person found this helpful
          • 2. Re: User Interface problem with display within design view
            salli4th Level 1

            It is working ok now, with one issue. The menu behavior is different and I don't know why. The whole button should darken on hover, but only the text does.

             

            http://www.sallyaverill.com/bom/index.html current file

            http://www.sallyaverill.com/bom/indexold/index.html previous version showing correct behavior

             

            I really appreciate any help because I am extremely new at building web pages. Thanks so much.

            Sal

             

            The css for the left navigation:

             

            .navdiv {
              width: 200px;
              height: 600px;

              float: left;
            }
            .leftnavigation {
            width: 192px;
            margin: 70px 0px 0px 0px;
            padding-left: 8px;
            /* float: left; */
            list-style-type: none;
            }

            .leftnavigation a, .leftnavigation li{
            margin-left: 0px;
            width: 171px;
            padding-left: 0px;
            padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 5px;
            /* float: left; */
            color: #392F9D;
            font-size: 10px;
            font-weight: bold;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            text-decoration: none;
            background-image: url(images/nav_normal.jpg);
            background-repeat: repeat-x;
            background-position: 0px 0px;
            }

            .leftnavigation li {
            float: left;
            background: url(images/nav_normal.jpg) top left no-repeat;
            border-bottom: 1px solid #999;
            line-height:150%;
            padding-left: 10px;
            }

            .leftnavigation a:visited{
            color: #66C;
            }
            .leftnavigation a:hover{
            color: #ffffff;
            background-image: url(images/nav_down.jpg);
            }

            • 3. Re: User Interface problem with display within design view
              Zabeth69 Level 5

              The reason only the text darkens on hover is because you have styled the a:hover but not the li:hover.

               

              Instead of

               

              .leftnavigation  a:visited{
              color: #66C;
              }
              .leftnavigation a:hover{
              color:  #ffffff;
              background-image: url(images/nav_down.jpg);
              }

               

              do this:

               

              .leftnavigation li:visited {style info here}

              and

              .leftnavigation li:hover {style info here}

               

              Make sure you keep them in this order! You want your pseudo-classes to come in this order:

               

              Link          li:link  

              Visited     li:visited

              Hover     li:hover

              Active     li:active

               

              This still won't make your entire list item (menu item) change color, so you might also add backgrounds..right now, you are only styling the text (color styles text; background-color styles the menu item)

               

              Beth

              • 4. Re: User Interface problem with display within design view
                salli4th Level 1

                Beth,

                 

                Everything's working... on to my next challenge!

                Thanks so much. You are a godsend.

                 

                Sal