CSS navigation menu

jcaywood · #1 09-27-2008, 03:32 PM

I'm playing around with changing my Navigation menu to CSS. But I know very little about CSS.

Here are my pages:
LINK to original Updates page
LINK to CSS Updates page

LINK to original Roster page
LINK to CSS Roster page

I think the CSS menus look so much better than the original menus.
I've just adapted the CSS coding used on the Roster page. However I would like to reduce the size of the Menu a bit but this also reduces the Roster columns which creates text wrapping which I want to avoid.
Is there any way to change one CSS style on a page without changing another?
I"ve also been unable to change the font size. Here's my code:

<style type="text/css">
#menu a, #menu a:visited {
font-family:comic sans ms;
text-decoration:none;
text-align:center;
background-color:#7ED0F2;
color:black;
display:block;
width:10em;
padding:0.1em;
margin:0.2em auto;
border-right:3px solid #7ED0F2;
border-left:3px solid #7ED0F2;
}
#menu a:hover {
border-right:3px solid #F6Bc1C;
border-left:3px solid #F6Bc1C;
background-color:gold;
}
</style></style>

I tried adding to the above code:
font-size: 8
and font-size:80%
and font-size-adjust:0.80
but nothing changes. What code would I add to adjust the font size and the height of the boxes?

Will this change create any problems I am overlooking?

Thanks for your help and comments.

Collectors-info · #2 09-27-2008, 04:08 PM

Hi is your css got all the punctuations?. IE:

<style type="text/css">
#menu a, #menu a:visited {
font-size:10px;
font-family:comic sans ms;
text-decoration:none;
text-align:center;
background-color:#7ED0F2;
color:black;
display:block;
width:10em;
padding:0.1em;
margin:0.2em auto;
border-right:3px solid #7ED0F2;
border-left:3px solid #7ED0F2;
}
#menu a:hover {
font-size:10px;
border-right:3px solid #F6Bc1C;
border-left:3px solid #F6Bc1C;
background-color:gold;
}
</style>

jcaywood · #3 09-27-2008, 04:17 PM

No, it does not have font size. I tried adding it but wasn't putting the 'px'.
I'll do that now. Thanks

jcaywood · #4 09-27-2008, 04:29 PM

I added font-size:6px to both locations, saved and published and didn't see any change. I then changed the value to 16px, saved and published and no change either.
I'm guess I'm missing something. Thanks

PS: Yes, I F5 several times and even cleared cache in IE and FF.

jcaywood · #5 09-27-2008, 06:03 PM

I got the font size added - I used only 13 instead of 13px. Seems this also automatically adjusts the height. It didn't work at first because I left off the ';' at the end of the line.
I suspect changing the style between two CSS apps on a page has to do with the ' #menu a, #menu a:visited {' and possibly using a 'menu b' - but I'm lost from there.

One other question also: Is there some easy way to measure the result of CSS on a page to allow me to size the HTML box the same size as the result? For example, if my CSS menu is 150x400 it would help me to keep the HTML box 150x400. I can get close by moving an image on the page until I get it touching the menu and then get coordinates. There may be a quicker way?
Thanks

jcaywood · #6 09-27-2008, 06:39 PM

I think I just solved the problem of changing styles on a single page:
By using a % instead of a font size, it prevents the text-wrapping on the roster page.
I am still lost on determining the size for the HTML box.
Thanks

Have you ever heard that old saying? You can buy 'em books and send 'em to school, but all they do is eat the covers off.
Asking questions and then answering them makes me think that applies to me!

hkp819 · #7 02-10-2009, 06:42 AM

For that you should decrease the font-size and width.
Hope that you will get sufficient help.........

Karen Mac · #8 02-10-2009, 08:38 AM

hk.. those are not vodahosted sites in your signature. Im removing them again..do not put them back.

karen

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)