Results 1 to 5 of 5

Thread: Anylink dropdown menu visited links problem

  1. #1
    Join Date
    Apr 2008
    Location
    Brittany, France
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Anylink dropdown menu visited links problem

    1) Script Title: Anylink dropdown menu

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

    3) Describe problem:

    The menu is now working very well, but I still have a little problem :

    I have in my css a general rule style for the links but in the menu, the style is overridden by the menu styling which is nice, but for the a:visited, there is no specific rule in the divmenu, and the general rule applies, which is not what I hope for.

    I tried creating a divmenu a: visited rule but in this case, the menu does not work any more.

    Any idea please?
    Last edited by ddadmin; 04-14-2008 at 07:31 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    If you're asking how to style the links within the drop down menu(s), try targeting the DIV with the id #dropmenudiv. So for example, to get all the links inside the menu to be brown, you could do this:

    Code:
    #dropmenudiv a, #dropmenudiv a:visited{
    color: brown;
    }

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    StephanieH (04-16-2008)

  4. #3
    Join Date
    Apr 2008
    Location
    Brittany, France
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    thanks Ddadmin, but it doesn't work. In fact I would like the menu's visited links to look like before they were visited, but when I do as you said, it would look like the headers.
    So logically, I should write so :

    #dropmenudiv a{
    width: 100%;
    display: inline;
    text-align: left;
    text-indent: 5px;
    border-bottom: 0px;
    padding: 1px 3px;
    text-decoration: none;
    font-weight: bold;
    background-color: #FFF;
    background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
    }

    #dropmenudiv a:link, #dropmenudiv a:visited{
    display: block;
    padding :0px;
    font-weight: normal;
    text-decoration: none;
    background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
    color: #000066;
    }


    #dropmenudiv a:hover{ /*hover background color*/
    background-image: url(http://dev.coeur.asso.fr/images/contenu_bg4.jpg);
    color: #6699FF;
    }

    but this doesn't work either. This is what makes the menu go wrong. I'll put it online, so you can see the effect, if you have a look there http://dev.coeur.asso.fr/

    Thanks again,

    StéphanieH

  5. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Looking at your page, the main issue actually isn't with the drop down links' colors. I think I answered this in another thread, but first and foremost you should remove the below DIV from your page's source:

    Code:
    <div id="dropmenudiv">
    Since it's already being dynamically generated by the script, and having two creates serious problems. Once removed, the other main problem is actually the CSS for your site's layout- it's extremely buggy, and content disappear if not placed in the exact right position within the page's source. I tried moving the menu anchor links around:

    Code:
    <a href="http://dev.coeur.asso.fr/index.html">ACCUEIL</a> |
    <a href="http://dev.coeur.asso.fr/index.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px', true)" 
    onMouseout="delayhidemenu()">EAU</a> |
    <a href="http://dev.coeur.asso.fr/index.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '250px', true)" 
    onMouseout="delayhidemenu()">SEDIMENTS</a> |
    <a href="http://dev.coeur.asso.fr/index.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '250px', true)" 
    onMouseout="delayhidemenu()">FAUNE ET FLORE</a> |
    <a href="http://dev.coeur.asso.fr/index.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '250px', true)" 
    onMouseout="delayhidemenu()">PATRIMOINE</a> |
    <a href="http://dev.coeur.asso.fr/index.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '270px', true)" 
    onMouseout="delayhidemenu()">PROJET PNR</a>
    and in most cases, they disappear completely from the page (not normal). I'm not sure if you coded the CSS for the layout yourself, but there are a few serious issues as far as I can tell, the least of which are the drop down menu's link colors.

  6. #5
    Join Date
    Apr 2008
    Location
    Brittany, France
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    hello ddadmin,

    Sorry for being so thick, I am a total beginner, it is the first ever layout I am coding. And I may (quite surely, I guess) have wanted to do too well, and have overdone it...tweaking the css to master the associated code which I didn't understand the least bit, didn't help me in the end.
    Well, after your thoughtfull recommendations, I tried to clean up the css. I hope it is better. At least, it is working quite well, the menu is at the right place, the menus are going up, smoothly, and I have the colors I wanted. So I'm a happy bee

    Only thing is that now, I can't get the menu headers to be in the center of their "line"...how can I achieve this?

    <code>
    body{
    background-color: #CCFFCC;
    background-image: url(images/body_bg2.jpg);
    background-repeat: x;
    color: #1E4220;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: small;
    line-height: 150%;
    }

    #boitepp {
    width: 900px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    position: absolute;
    top :0px;
    left: 50px;

    }

    img.en-tete {
    margin: none;
    padding: 0;
    border: 0;
    position: absolute;
    top :0;
    left: 100px;
    }

    /* dropdown menu */

    #dropmenudiv{
    position:absolute;
    text-align: left;
    color: #758642;
    background-image: url(images/contenu_bg4.jpg);
    border: 0px;
    border-bottom-width: 0;
    font:normal 12px;
    line-height:25px;
    z-index:100;
    }

    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 5px;
    border-bottom: none;
    padding: 1px 3px;
    text-decoration: none;
    color: #000066;
    font-weight: normal;
    background-image: url(images/contenu_bg4.jpg);
    }

    #dropmenudiv a:hover{ /*hover background color*/
    background-image: url(images/contenu_bg4.jpg);
    color: #6699FF;
    }
    /* end dropdown menu */


    #contenu {
    width: 900px;
    position: absolute;
    top :180px;
    left: 0px;
    z-index: 1;
    background-image: url(images/contenu_bg3.jpg);
    background-repeat: y;
    text-align: justify;
    }


    .col-gauche
    {
    text-align: left;
    background-color: transparent;
    width: 150px;
    float: left;
    margin: none;
    padding-bottom: none;
    }

    .element-de-chapitre
    {
    color: #627137;
    margin-top: 20px;
    margin-left: 10px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 1px dotted #669933;
    border-left: 0px;
    }

    .element-de-chapitre a:link
    {
    color: #758642;
    text-decoration: none;
    }

    .element-de-chapitre a:hover
    {
    color: #6699FF;
    text-decoration: none;
    }


    .col-milieu
    {
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 20px;
    background-color: transparent;
    width: 680px;
    float: left;
    margin: none;
    }


    #pied-de-page
    {
    width: 900px;
    position: absolute;
    color: #23297F;
    font-size: 0.8em;
    line-height: 1.5em;
    background-color: #99CCCC;
    letter-spacing: 0.1em;
    text-align: center;
    text-indent: 120px;
    padding-bottom: 10px;
    }



    h1 {color: #339933;
    font-size: 2em;
    font-family: georgia, Verdana, sans-serif;

    }


    h2 {color: #339933;
    font-size: 1.7em;
    font-family: georgia, Verdana, sans-serif;

    }


    h3 {color: #339933;
    font-size: 1.2em;
    font-family: georgia, Verdana, sans-serif;
    }

    h4 {color: #8A0934;
    font-size: 1em;
    font-variant: small-caps;
    font-family: georgia, Verdana, sans-serif;
    margin: 3px;
    }

    p {
    margin-top: 0;
    text-align: justify;
    color: #003366;
    }

    a:link {
    font-weight: bold;
    text-decoration: none;
    color: #339933;
    }


    a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #339933;
    }


    a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #6699FF;
    }


    a:active {
    font-weight: bold;
    text-decoration: none;
    color: #3366FF;
    }

    img {
    float: left;
    }
    </code>

    thanks in advance!

    Stéphanie.

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
  •