Help needed to adapt css tooltip

[k9carer]

I've found the code for an almost perfect css tooltip. I've been able to very nearly adapt it to what I want, but in order to have it perfect I need to use different tags, and that's where the problem lies. It consists of <p> and <span> wrapped up in a div. When I tried changing the span tag to div and experiment with the p tag the text information was no longer hidden.

I'm fine with css & html, but I'm out of my depth here, I've not coded hidden elements before.

Here's a link to what I have http://www.k9carer.eu/sidebar_right.php

I want the link font smaller and the text information larger. I'm trying to decide if I want to put a border around the text, but that's not important. With the right tags in place, I'll be able to do that myself.


Here's the code:

#dogcharity {
background-color: #1A0600;

position: inherit;
padding: 1px;}

p.navlink {font-weight: bold;
text-align: center;
margin-bottom: 1px;
margin-top: 0px;}

p.navlink a {text-decoration: none;
display: block;
color: #D0C395;
background-color: #1A0600;
font-family: "Times New Roman", Roman, Serif;
font-size:100%;
color: #D0C395;
margin: 0 2px 0 0;
padding: 2px 2px 2px 2px;
border: 2px #B09E7D solid;
border-style: outset;
}
p.navlink a:hover {background-color: #D0C395 color:#1A0600;}

p.navlink a:link span {display: none;}

p.navlink a:visited span {display: none;}

p.navlink a:hover span {font-size: .8em;

position:absolute;
top: 18em;
left:75%;
font-weight: normal;
display: block;
}
span{color:#ffffff;
}

<div id="dogcharity">
  
<p class="navlink"><a href="www.dogaid.co.uk">DOG A.I.D.
  
 <span id="charity">A national voluntary organisation which
provides specialised training for people with physical
disabilities and their own pet dog</span></a></p>
            
  <p class="navlink"><a href="www.caninepartners.co.uk/" >
CANINE PARTNERS 

<span id="charity">Training Assistance Dogs for people 
with disabilities</span></a></p>
            
  <p class="navlink"><a href="www.dogsforthedisabled.org/">
  DOGS FOR THE DISABLED 

<span id="charity">creates life-changing partnerships by 
  training assistance dogs to help children and adults with
 disabilities lead a fuller, more independent life</span></a></p>

            </div>

[k9carer]

I'm experimenting with dl, dt, dd. I haven't succeeded yet, but I'll keep working on it for a bit longer. This is the only way I can think of to do this in order to have the style I want.

Does anyone have any ideas on how to do the coding using these tags? Your input will be most welcome

I should qualify my earlier statement of being fine with css by preceding css with the word basic.


[edit] I've been searching through some old tutorials I've got here and found a definition list which I'm canalizing. It's pretty old, maybe ie6, so I don't know if it'll be ok with ie8 & firefox. I'll continue working on it tomorrow & if it works I'll put it up & get some feedback on it. [/edit]

[k9carer]

Memo to self: don't try to understand code when you're tired. Dyslexia makes it hard enough to understand code. Throw tiredness into the equation and it's next to impossible.

One thing I don't understand is why no-one pointed out my silly mistake.


The font is still giving me a few problems but I'll get it sorted. I've visited w3c to learn more of what they class as advanced css. Pity I didn't go there first, could have saved myself a lot of hastle