The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 6 of 6

Thread: css: rollover

  1. #1

    css: rollover

    Hi there!

    I am making a site where i wanna have a simple rollover in the vertical submenu... The idea is to have a little arrow next to a link when you go over it with your mouse. Ok so i managed to get the arrow everytime i go over a link in the menu. BUt i really cant get that arrow to the left! its now under te text. Here what it looks like right now(its about the vertical menu on the left site of the screen): Site example

    Here is the css i use for that submenu:
    Code:
        div#local {
            float: left; 
            width: 130.5px;
            
            text-align: left;
            margin-left: -330px;
            
        }
        div#local ul, li{
            font-size: 0.9em;
            
            margin: 0px -5px;
            padding: 0px;
        }
        div#local li{
            list-style: none;
        }
        div#local a,
        div#local a:link,
        div#local a:active,
        div#local a:visited {
            font-weight: bold;
            text-decoration: none;
            
            margin: 0px;
            padding: 0px;
            
            color: #4A4A4A;
        }
        div#local a:hover {
            color: #ffffff;
            background: transparent url(../images/arrow.gif) no-repeat 0px 5px;
            background-position: left;
        }
    and here the xhtml:
    Code:
    <div id="local">    
            <ul>
                <li><a href="#">Content page 1</a></li>
                <li><a href="#">Content page 2</a></li>
                <li><a href="#">Content page 3</a></li>
                <li><a href="#">Content page 4</a></li>
                <li><a href="#">Content page 5</a></li>
                <li><a href="#">Content page 6</a></li>
                <li><a href="#">Content page 2</a></li>
                <li><a href="#">Content page 3</a></li>
                <li><a href="#">Content page 4</a></li>
                <li><a href="#">Content page 5</a></li>
                <li><a href="#">Content page 6</a></li>
            </ul>
         </div>
    can anyone tell me how i can get that arrow just next to the links??

    any help is welcome!

  2. #2
    the arrow is positioned fine.
    you need a little padding on the left for all active links to make place for the arrow.

    Try this:

    div#local a:visited {
    font-weight: bold;
    text-decoration: none;
    margin: 0px;
    padding-left:20px;
    color: #4A4A4A;
    }

    you may have to tweak with the 'margin-left' in 'div#local' to get it to look right.

  3. #3
    By the way, here's a great site that may help you in the future with lists like that:

    http://css.maxdesign.com.au/listamatic/


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

  4. #4
    @ vulpine: w00t! that just did the trick, tnx a lot!

    At the end i just stared a bit at that screen, without actually seeing somthn

    @nokrev: Great site, i definitely gonna check that site in the futere!
    tnx for sharing that site

  5. #5
    Ok now that problem is solved, i have a new problem that i want to solve... but i dont know how

    I want to change the color of an active link, and that it keeps the active color no mather where u click with your mouse.

    I now use the a:active, but this isnt the right way to get the outcome i had in mind...

    Anyone an idea how to achieve this?

  6. #6
    Give it an id of #active…


    K-Emmys-06: Best Footer; and K-Emmys-06: Most Active Member

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012