Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question How to align this to the right side of the page?

    How to align this dropdown menu to the right of the page?
    Code:
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='home.html'><span>Home</span></a></li>
       <li class='has-sub'><a href='file-name.html'><span>TEXT</span></a>
          <ul>
             <li><a href='file-name1.html'><span>Menu 1</span></a></li>
             <li class='last'><a href='file-name2.html'><span>Menu 2</span></a></li>
          </ul>
       </li>
       <li><a href='about.html'><span>About Us</span></a></li>
       <li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
    </ul>
    <style>#cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
      margin: 0;
      padding: 0;
      position: relative;
    }
    #cssmenu:after,
    #cssmenu ul:after {
      content: '';
      display: block;
      clear: both;
    }
    #cssmenu a {
      color: #333333;
      display: inline-block;
      font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
      font-size: 12px;
      min-width: 35px;
      text-align: center;
      text-decoration: none;
      text-shadow: 0 -1px 0 #eeeeee;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu > ul > li {
      float: left;
    }
    #cssmenu > ul > li.active > a {
      background: #d9d9d9 url(grad_light.png) repeat-x left bottom;
      background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
      background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
      box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
      -moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
      -webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
      filter: none;
    }
    #cssmenu > ul > li.active a:hover {
      background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
      background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
      background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
      filter: none;
    }
    #cssmenu > ul > li a {
      box-shadow: inset 0 0 0 1px #ffffff;
      -moz-box-shadow: inset 0 0 0 1px #ffffff;
      -webkit-box-shadow: inset 0 0 0 1px #ffffff;
      background: #bfbfbf url(grad_light.png) repeat-x left top;
      background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
      background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
      background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
      background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
      background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
      border-bottom: 1px solid #d2d2d2;
      border-top: 1px solid #d2d2d2;
      border-right: 1px solid #d2d2d2;
      line-height: 34px;
      padding: 0 35px;
      filter: none;
    }
    #cssmenu > ul > li a:hover {
      background: #ffffff url(grad_light.png) repeat-x left bottom;
      background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
      background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
      background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
      background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
      background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
      filter: none;
    }
    #cssmenu > ul > li:first-child a {
      border-radius: 0px 0 0 0px;
      -moz-border-radius: 0px 0 0 0px;
      -webkit-border-radius: 0px 0 0 0px;
      border-left: 1px solid #d2d2d2;
    }
    #cssmenu > ul > li:last-child a {
      border-radius: 0 0px 0px 0;
      -moz-border-radius: 0 0px 0px 0;
      -webkit-border-radius: 0 0px 0px 0;
    }
    #cssmenu .has-sub:hover ul {
      display: block;
    }
    #cssmenu .has-sub ul {
      display: none;
      position: absolute;
      top: 36px;
      left: -1px;
      min-width: 100%;
      text-align: center;
      *width: 100%;
    }
    #cssmenu .has-sub ul li {
      text-align: center;
    }
    #cssmenu .has-sub ul li a {
      border-top: 0 none;
      border-left: 1px solid #d2d2d2;
      display: block;
      line-height: 120%;
      padding: 9px 5px;
      text-align: center;
    }
    </html>

  • #2
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Please I really need help with it!

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Code:
    <div id='cssmenu' style="float:right;">
    Your code needs an end tag for this div.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •