Thread: CSS help

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0

    CSS help


    Hello,

    I am making woonerfbreughelhof.be

    Been trying to fix my CSS menu for hours now but can't seem to fix it. I basicly want it to stay red with bold tekst when clicked and a black hover on the non active link.

    Here is my CSS:

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    }
    #access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    }
    #access li {
    float: left;
    position: relative;
    }
    #access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    }
    #access ul ul {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
    }
    #access ul ul ul {
    left: 100%;
    top: 0;
    }
    #access ul ul a {
    background: #db0100;
    border-bottom: 1px dotted #ddd;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    background: #db0100;
    }
    #access li:hover > a,
    #access a:focus {
    background: #db0100; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#db0100, #db0100);
    background: -o-linear-gradient(#db0100, #db0100);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#db0100), to(#db0100)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#db0100, #db0100);
    color: #ffffff;
    }
    #access ul li:hover > ul {
    display: block;
    }
    #access .current-menu-item > a,
    #access .current-menu-ancestor > a,
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    font-weight: normal;
    }
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    I noticed that those menu buttons don't work when you've selected the text which is caused by:

    http://www.woonerfbreughelhof.be/wp-content/plugins/easing-slider/css/slideshow.min.css?ver=2.1.2 line 1

    Code:
    .easingsliderlite-pagination.outside.bottom-center {
        bottom: -25px;
        left: 0;
        padding-top: 20px;
        text-align: center;
        width: 100%;
    }
    It is overlapping on the menu buttons and stops them working. Adding z-index:0; to that seems to fix that.

    Not sure which black hover you mean? The only black hover I can see is on the link at the very bottom of each page. Is that the one you mean?
    Last edited by LDHosting; June 6th, 2013 at 04:59 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    Thank you Sir for the fast response, I am pulling out all my hair atm here

    I just removed my CSS menu as I just can't get it to work like I want, its back to default now.

    Basicly what I am trying to do is the following, I want a black hover over the buttons and the txt to stay white. And when a link is clicked I want it to stay red and the hover only to work on the other menu links.

    I am only talking about the menu btw.

    Is it possible for you to help me get that? I can paste the css menu I have atm.

    I seem to have fixed that menu problem with Z-index, thanks for that.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    style.css line 632:

    Code:
    #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
        font-weight: bold;
    }
    This controls your current active link, here you can stick in the background color and text color you want it to have for example:

    Code:
    #access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
        font-weight: bold;
        background-color:#9A4F3A;
        color:#E2F174;
    }
    style.css line 620:
    Code:
    #access li:hover > a, #access a:focus {
        background: linear-gradient(#F9F9F9, #E5E5E5) repeat scroll 0 0 transparent;
        }
    this controls the menu hover and you can set your color and background-color in there like:

    Code:
    #access li:hover > a, #access a:focus {
        background-color:pink;
        color:green;
        }
    As for disabling the hover on current active link, hopefully someone else can give you input.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    I would like to thank you for that, I am fixing the menu right now.

    I hope someone can help me disabling the hover on current active link.

    Also got one final question for you, will stop bother after. If you look at the menu on the site I would like to have the first button etc more to the left so it aligns with my text is that possible?
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    style.css line 82
    Code:
    #access div {
        margin: 0 7.6%;
    }
    You can change the 7.6% to a lower value to move the buttons over as far as you like. Just make sure not to move them too far, otherwise the 'Beschrijving' button will poke out on the left when you select it.
    Last edited by LDHosting; June 6th, 2013 at 07:01 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    Thanks I will try that out, the menu is getting along almost.

    Now I just need to get the hover text to white.

    And after that I just need to make sure the activated link has a dissabled hover.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    One CSS rule when it comes to links though: active/focus must come after hover, so make sure your active link css is underneath the hover css in the file.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    I just made the menu, if its not to much to ask can you take a look if its ok like this? Now I just need no hover on the active link and im done with my menu lol
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    Yeah looks fine like that. I know what to code to try to get the disabled hover, but I just don't know how to code it. Basically what you need to try to do is add css so that the hover for the active link is styled exactly the same as the active link itself. As for how, I'm stumped.
    Last edited by LDHosting; June 6th, 2013 at 08:09 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    Yeah thanks alot btw, I will try to wait and see if anyone else knows how to do it, searching atm how to.

    Also need to try and get the colors the same in Firefox & google chrome, dno why its darker there
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    Anyone else who can help me with the hover problem? I really can't seem to find it.

IMN logo majestic logo threadwatch logo seochat tools logo