Anylink dropdown menu visited links problem

[StephanieH]

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?

[ddadmin]

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:

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

[StephanieH]

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

[ddadmin]

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:

<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:

<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.

[StephanieH]

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.