Hi
I made hover buttons to go into my friends website because frontpage didn't allow the text on their buttons to be left aligned. Anyway, I think they stick a lot and i'm not happy with them. I have read a lot of people don't like the time it takes for java applets to load either so thought I should try doing the navigation buttons with the CSS shown on this site.

I was so happy when after following the instruction my buttons turned out fine but the probem is that they have a solid border around each button and i want my nav bar to look like it's underlined as in the site below




if it helps anyone to know this is the way I have modified the instructions in the tutorial but need further guidence. Any help would be great.

Here is the code I have at the moment:
body {
background-color: #140C3A;
}

a:link, a:active {
/*color: #92A92D;*/
/*color: #002A6C;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C41427;
text-decoration: none;
}

a:visited {
/*color: #92A92D;*/
/*color: #002A6C;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #C41427;
text-decoration: none;
}

a:hover {
/*color: #CD689D;*/
color: #C41427;
/*font-weight: bold;*/
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}

#LHS a {
margin-left: 12px;
margin-bottom: 2px;
border : solid 2px #
background-color: #140C3A;
color: #FFFFFF;
font-variant: medium none small-caps;
font-weight: normal;
width: 180px;height:
padding-top: 3px;
padding-bottom: 3px;
display: block;
}


#LHS a:hover {
background-color: #C41427;
color: #;
text-decoration: none;
}

 

 

 

Reply

The following code works fine and i test it with Internet Explorer 6 only, it looks almost the same as the navigation buttons of the site you post:


I hope it helps and you can view in action at Navigation Buttons Example.

And of course it can be improved and modificated to your own needs, it is just a test .

Best regards,

 

 

 

Reply

Thank you so much for this reply. This morning i received an answer to this query from another site (sorry mods) and I was over the moon to have my very first CSS sheet but then i realized i didn't know how to insert it into the website so had to go back for more advice. Everything seems ok now though your code here looks even shorter again than the code I used. I am going to copy and study what you've written and maybe use it somethime. I hope that's ok with you?

Reply

You are welcome mischievous and don't worry you can use my code whenever you want, the only thing i hope is that you study it soon and if you have any questions about it please let me know.

Relating to how to insert the CSS sheet, well it is pretty easy you only need to include this line on the HEAD section of every page where you want to use it:


Another way to achieve almost the same look and functionality is by using INPUT elements and a tiny Javascript function to load the pages:


Inside the BODY section of your page you need to add this code:


BTW, as far i know this code do not work with Internet Explorer 6, with the latest versions of Internet Explorer i don't know if it works because i don't use them, but with Firefox 2.x+ or Opera 9.x+ it works fine.

You can view in action at Navigation Buttons Example 2.

Best regards,

Reply

Hi again
today I've read through a few tutorials but still find if very confusing so will have to go real slow or I will fry what little brain I have with it all. Thank you for taking the time to set me these examples though I think Ill stick with the first code as I use Internet explorer.

Thanks again

Reply

Ok, no problem, and you are right its better to go slow to complete understand this and not get confused.

I recommend you to visit the following CSS reference pages:

• SitePoint CSS Reference
• W3Schools CSS reference

You can view more information about the first one by visiting the following post i made a few months ago: Sitepoint's Css And Html Reference Sites

Best regards,

Reply

Thank you again Tavox. I have an appointment at the hospital today so won't have much time but I will look over your suggestions as soon as and let you know how I get on.

Regards

Reply

Again you are welcome mischievous, and dont forget that if you need some advice please let me know.

Best regards,

Reply