hover not showing and different font sizes in different links.

This site is best viewed in a modern browser with JavaScript enabled.

hover not showing and different font sizes in different links.

tony_webb

I am trying to create a sitemap page with links to the rest of the pages in my site. I have 3 problems that I can't resolve;

Hover doesn't show when I scroll over links.

Here is the css code.

#menu-1 a  { color: black;}
#menu-1 a:hover { color:yellow;}
#menu-1 a:active { color:#FF0000; }

I am also having problems with the font size in each link. As you go down the page the fonts increase in size. I use 1.25em for the main link and 1.00 for the sub link.

You can see the problem here

This is the code for the links;

#menu-1 {list-style: none;
         text-align: center; 
         font-size: 1.50em;
         font-color: black;
}
#menu-1 a  { color: black;}
#menu-1 a:hover { color:yellow;}
#menu-1 a:active { color:#FF0000; }
#sub-menu-1 {list-style: none;
             text-align: centre;       // changed to center,  comment is only here, not in file//
             font-size: 1.00em;
} 
#menu-2 {list-style: none;
         text-align: center; 
         font-size: 1.25em;
         font-color: black;
}
#sub-menu-2 {list-style: none;
             text-align: center;
             font-size: 1.00em;
} 
#menu-3 {list-style: none;
         text-align: center; 
         font-size: 1.25em;
}

If you want to see all the css code for the page it is here

How do i resolve these problems?

deepode

I am not pro but i think i've got answer....

For your first quest:
I checked source code & nothing like menu-1 exists in your source code on website you've posted.

For your second quest:
I guess that menu-3 is sub menu of menu-2 and you are not closing <div> tags! Like, menu-3 doesn't ends, so all tags below it comes under it....

tony_webb

Thanks for your reply. I followed your suggestion by changing all the menu divs to end with </ul> and </div> it worked a treat. I was left with bullet points but I copied the code in my main nav bar for getting rid of them.

deepode

Ok, i think you know but for getting rid of bullets, type this in css, here class name represents your class in HTML.

.className {
text-decoration:none;
}

auntnini

NO deepode!
For <ul> unordered/bullets or <ol> ordered/numbered LISTS it is list-style: none.
Values for text-decoration: none underline overline line-through blink [deprecated] inherit -- would be used on text or links.

deepode

oh, thanks. actually i was writing "text-decoration:none;" many time for <a> tags.. he he.

Now to the main point....
@tonyWebb,

You can tell him to enter date while uploading in one sure method like, dd/mm/yyyy or mm/dd/yyyy then through javascript you can broke date in two parts. Instead of dd/mm/yyyy you can tell user to type date in text input filed as dd/mm.yyyy, so in javascript you can take input as array so you can easily broke(using indexOf (imn't sure about spelling )) that input into dd, mm & yyyy. Instead using arrays you can also use string methods. Then using for loops....to check all dates and after it you can post it. .

Hope it helps and i may also try to give you code.