Web Analytics Made Easy -
StatCounter Customising CSS dropdown menu - CodingForum

Announcement

Collapse
No announcement yet.

Customising CSS dropdown menu

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

  • Customising CSS dropdown menu

    I've downloaded a CSS dropdown menu from the Javascript site today, but as i am a total newbie i have no idea how to customise it. I have tried to by experimenting with it and tried to find some tuts or guides but i'm not making any progress. I want to know how to position the menu in the middle and at the top of my site. Right now it is at the bottom left. I'm also wondering if i can stretch the menu to fit the widht of my table. Here is the url:
    http://members.lycos.nl/justagirl24/Sphynx-info.html

    I'm really hoping one of you can tell me what to change in the code as i'm totally stuck here.
    Last edited by Elfquest; Aug 2, 2005, 05:55 AM.

  • #2
    if you want it centered, just put:
    Code:
    <p align="center">the script for the menu goes here</p>
    that's all for the centering.
    (or if you want the outdated version, do this:
    Code:
    <center>the script for the menu goes here</center>
    but, as i said, that is outdated, and doesn't work with all browsers...
    Last edited by ianmarlowe; Aug 3, 2005, 12:06 AM. Reason: typo in the code. Dude, now use it!
    i'm only 12, gimme some slack

    Comment


    • #3
      Thanks!
      But neither worked.
      I'm figuring i must change something in the code here:

      <style type="text/css">

      #csstopmenu, #csstopmenu ul{
      padding: 0;
      margin: 0;
      list-style: none;
      }

      #csstopmenu li{
      float: left;
      position: relative;
      }

      #csstopmenu a{
      text-decoration: none;
      }

      .mainitems{
      border: 1px solid black;
      border-left-width: 0;
      background-color: #AABCB0;
      }

      .headerlinks a{
      margin: auto 8px;
      font-weight: bold;
      color: black;
      }

      .submenus{
      display: none;
      width: 10em;
      position: absolute;
      top: 1.2em;
      left: 0;
      background-color: #EEFFCC;
      border: 1px solid black;
      }

      .submenus li{
      width: 100%;
      }

      .submenus li a{
      display: block;
      width: 100%;
      text-indent: 3px;
      }

      html>body .submenus li a{ /* non IE browsers */
      width: auto;
      }

      .submenus li a:hover{
      background-color: yellow;
      color: black;
      }

      #csstopmenu li>ul {/* non IE browsers */
      top: auto;
      left: auto;
      }

      #csstopmenu li:hover ul, li.over ul {
      display: block;
      }

      html>body #clearmenu{ /* non IE browsers */
      height: 3px;
      }

      </style>

      <script type="text/javascript">
      But don't know where. Any ideas?

      Comment


      • #4
        Code:
        <style type="text/css">
        
        #csstopmenu, #csstopmenu ul{
        padding: 0;
        margin: 0;
        list-style: none;
        }
        
        #csstopmenu li{
        float: center;
        position: relative;
        }
        
        #csstopmenu a{
        text-decoration: none;
        }
        
        .mainitems{
        border: 1px solid black;
        border-left-width: 0;
        background-color: #AABCB0;
        }
        
        .headerlinks a{
        margin: auto 8px;
        font-weight: bold;
        color: black;
        }
        
        .submenus{
        display: none;
        width: 10em;
        position: absolute;
        top: 1.2em;
        center: 0;
        background-color: #EEFFCC;
        border: 1px solid black;
        }
        
        .submenus li{
        width: 100%;
        }
        
        .submenus li a{
        display: block;
        width: 100%;
        text-indent: 3px;
        }
        
        html>body .submenus li a{ /* non IE browsers */
        width: auto;
        }
        
        .submenus li a:hover{
        background-color: yellow;
        color: black;
        }
        
        #csstopmenu li>ul {/* non IE browsers */
        top: auto;
        center: auto;
        }
        
        #csstopmenu li:hover ul, li.over ul {
        display: block;
        }
        
        html>body #clearmenu{ /* non IE browsers */
        height: 3px;
        }
        
        </style>
        
        <script type="text/javascript">
        i had to cahnge this:
        Code:
        float: center;
        i'm only 12, gimme some slack

        Comment


        • #5
          Center float?!!

          float: center;
          There is no such thing...
          Regards,
          Ronald.
          ronaldvanderwijden.com

          Comment


          • #6
            then you change it! I was giving it a try.
            i'm only 12, gimme some slack

            Comment


            • #7
              Whatever the main div for the nav links is change
              margion: 0 to margin: 0px auto;
              and then it will center that div and anything in it (the nav bar)


              And if you want it at the top of the page I suggest making sure in your HTML document that it is the first div you name.
              Once I thought I was wrong but I was mistaken.

              Comment


              • #8
                Originally posted by Tristan Gray
                margion: 0 to margin: 0px auto;
                margion?
                Last edited by ianmarlowe; Aug 3, 2005, 08:00 AM.
                i'm only 12, gimme some slack

                Comment


                • #9
                  Yeah, it's a crappy keyboard.

                  Example:

                  HTML

                  <head>
                  <body>
                  <div id="nav">
                  nav stuff here (list)
                  </div>
                  <div id="maincontainer">
                  <div id="content">
                  <p>blah</p>
                  </div>
                  </div>
                  </body>


                  CSS:

                  #nav {
                  margin: 0px auto;
                  etc
                  }
                  Once I thought I was wrong but I was mistaken.

                  Comment


                  • #10
                    Thanks!
                    I've pasted the nav links in the cell i wanted it in and now the menu is in the right cell, but still not at the right place in the cell. It still needs to be centered and put at the bottom of the cell somehow. Oh well, i'm making SOME progress.

                    It looks like this now:

                    http://members.lycos.nl/justagirl24/Sphynx-info.html

                    I've tried to do what you're suggesting to center but can't find the 'margin' you're talking about. Here's the code for the nav links:

                    <ul id="csstopmenu">

                    <li class="mainitems" style="border-left-width: 1px">
                    <div class="headerlinks">
                    <div align="center"><a href="http://www.javascriptkit.com">Over Ons</a></div>
                    </div>
                    <div align="center">
                    <ul class="submenus">
                    <li><a href="http://javascriptkit.com/">Voorstelling</a></li>
                    <li><a href="http://javascriptkit.com/cutpastejava.shtml">Nieuws</a></li>
                    </ul>
                    </div>
                    </li>

                    <li class="mainitems">
                    <div class="headerlinks"><a href="http://www.javascriptkit.com">De Sphynx</a></div>
                    <ul class="submenus" style="width: 14em">
                    <li><a href="http://javascriptkit.com/">Sphynx info</a></li>
                    <li><a href="http://javascriptkit.com/">Geschiedenis</a></li>
                    <li><a href="http://javascriptkit.com/">Verzorging</a></li>
                    <li><a href="http://javascriptkit.com/">Veelgestelde vragen</a></li>
                    </ul>
                    </li>

                    <li class="mainitems">
                    <div class="headerlinks"><a href="http://www.javascriptkit.com">Adoptie</a></div>
                    <ul class="submenus">
                    <li><a href="http://javascriptkit.com/">Aanschaf kitten</a></li>
                    <li><a href="http://javascriptkit.com/">Koopwijzer</a></li>
                    </ul>
                    </li>
                    <li class="mainitems">
                    <div class="headerlinks"><a href="http://www.javascriptkit.com">Onze katten</a></div>
                    <ul class="submenus" style="width: 14em">
                    <li><a href="http://javascriptkit.com/">Kittens!</a></li>
                    <li><a href="http://javascriptkit.com/">Poezen</a></li>
                    <li><a href="http://javascriptkit.com/">Kater</a></li>
                    <li><a href="http://javascriptkit.com/">Kastraten</a></li>
                    <li><a href="http://javascriptkit.com/">Herplaatsing</a></li>
                    </ul>
                    </li>

                    <li class="mainitems">
                    <div class="headerlinks"><a href="http://www.javascriptkit.com">Overige</a></div>
                    <ul class="submenus" style="width: 14em">
                    <li><a href="http://javascriptkit.com/">Contact</a></li>
                    <li><a href="http://javascriptkit.com/">Gastenboek</a></li>
                    <li><a href="http://javascriptkit.com/">Links</a></li>
                    </ul>
                    </li>


                    </ul>

                    <div id="clearmenu" style="clear: left"></div>
                    Maybe you could tell me where exactly to make the change? Sorry, Very big noob here.

                    Comment


                    • #11
                      Change:
                      Code:
                      #csstopmenu, #csstopmenu ul{
                      padding: 0;
                      margin: 0;
                      list-style: none;
                      }
                      
                      to
                      
                      #csstopmenu, #csstopmenu ul{
                      padding: 0;
                      margin: 0 auto;
                      list-style: none;
                      }
                      My Site

                      Comment


                      • #12
                        Thanks, i've managed to center it now. But now one of the menu bars is at the wrong place. This menu is really driving me nuts. I just want it to be at the bottom of the cell with the fairycat filling it up from left to right but it just doesn't want to do that! I think i'm going to trash it and find another one before i throw my pc through a window. Thanks everyone for your help and patience.

                        Comment


                        • #13
                          Is that thing...a cat?!

                          Comment

                          Working...
                          X