Results 1 to 3 of 3

Thread: Horizontal AnyLink CSS Menu

  1. #1
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal AnyLink CSS Menu

    1) Script Title: Anylink Css Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...anylinkcss.htm

    3) Describe problem: Hi, I've been trying to get the Anylink CSS Menu headers to go horizontal, but I've just had the hardest time getting it to do that. I've done it a few times before and it worked just perfectly, but for the life of me I cannot remember how I did it before! I've just become so frustrated!
    I basically want it like the Horizontal CSS Menu, but in AnyLink CSS Menu script and style. I've done it before, so I know it's possible.
    Here is my current CSS code of the Menu section of my site:

    Code:
    .menu a{
    width: 1000px;
    height: 41px;
    list-style: none;
    margin: 1px 10px 1px 1px;
    padding: 5px 5px 2px 10px;
    text-decoration: none;
    font-family: "Lucida Sans";
    font-size: 9px;
    background:  transparent;
    color: #a4a4a4;
    text-transform: none;
    display: block;
    }
    
    .menu a:hover{
    width: 1000px;
    height: 41px;
    list-style: none;
    margin: 1px 10px 1px 1px;
    padding: 5px 5px 2px 10px;
    text-decoration: none;
    font-family: "Lucida Sans";
    font-size: 9px;
    background:  transparent
    color:  #DEDEDE;
    text-transform: lowercase;
    border: 0px;
    display: block;
    }
    And here is the CSS for the Anylink CSS Menu that I have:

    Code:
    .anylinkcss{
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    border: 0px;
    border-bottom-width: 0;
    font: normal 10px Verdana, Geneva;
    color: #8B8989;
    line-height: 18px;
    z-index: 100; /* zIndex should be greater than that of shadow's below */
    background: #787878;
    width: 130px; /* default width for menu */
    }
    
    .anylinkcss ul li a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 0px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    text-indent: 5px;
    color: #2b2b2b;
    background: #787878;
    }
    My site URL is http://unendingsanctuary.darktwilight.org/tester.php and I'm trying to arrange the "Site, Graphics, Music" links you see there horizontally. But as you can see, they're going vertical. (I know some other things in the site look messy right now, but I'm trying to focus on the CSS menu for now.)
    Any help is appreciated.

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Changing you menu to this
    Code:
    <div class="menu">
    <ul>
    <li><a href="http://unendingsanctuary.darktwilight.org/index.php" 
    class="anchorclass" rel="submenu1"><img 
    src="tester.php_files/navsite.png" border="0"></a></li>
    
    <li><a href="http://unendingsanctuary.darktwilight.org/index.php" 
    class="anchorclass" rel="submenu1"><img 
    src="tester.php_files/navgraphics.png" border="0"></a></li>
    
    <li><a href="http://unendingsanctuary.darktwilight.org/index.php" 
    class="anchorclass" rel="submenu1"><img 
    src="tester.php_files/navmusic.png" border="0"></a></li>
    </ul>
    </div>
    And then adding this to your css
    Code:
    .menu{
    list-style: none;
    } 
    .menu li{
    float: left;
    margin: 0 0.15em; width:200px;
    }
    will make it horizontal. You would still have to finetune it to make it look right

  3. #3
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ahhh thank you so much, you're seriously a life saver!!
    You have no idea how happy I am right now; thank you thank you thank you~!!!

Bookmarks

Posting Permissions

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