Website Navigation Hover Buttons Stick So Made Css Today need further help with tutorial from this site

[mischievous 0]

HiI 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;}

Edited May 17, 2008 by mischievous (see edit history)

[TavoxPeru 0]

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:

body {	font: normal 100.1% Verdana, Arial, Helvetica, sans-serif;	background-color: #140C3A;}a.boton3d {	height: 2em; 	text-decoration: none; 	font-size:0.70em; vertical-align:middle; text-align: left; 	display: block; font-weight: bold; line-height: 2em; 	border-left:0px solid black;	border-right:0px solid black;	border-top:2px solid #140C3A;	background-color: #140C3A; width:120px;	font-family: Verdana, Arial, Helvetica, sans-serif;	color: #C41427;}a.boton3d:link, a.boton3d:visited {border-bottom:1px solid white;color:#fff; background-color: #140C3A;}a.boton3d:hover { color:#fff;background-color:#b70000;text-decoration: none;border-top:2px solid #550000;}

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,

[mischievous 0]

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?

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:

body {	font: normal 100.1% Verdana, Arial, Helvetica, sans-serif;	background-color: #140C3A;}a.boton3d {	height: 2em; 	text-decoration: none; 	font-size:0.70em; vertical-align:middle; text-align: left; 	display: block; font-weight: bold; line-height: 2em; 	border-left:0px solid black;	border-right:0px solid black;	border-top:2px solid #140C3A;	background-color: #140C3A; width:120px;	font-family: Verdana, Arial, Helvetica, sans-serif;	color: #C41427;}a.boton3d:link, a.boton3d:visited {border-bottom:1px solid white;color:#fff; background-color: #140C3A;}a.boton3d:hover { color:#fff;background-color:#b70000;text-decoration: none;border-top:2px solid #550000;}

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,

[TavoxPeru 0]

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:

 

<link rel="stylesheet" href="name-of-your-sheet.css" type="text/css">

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

 

<style type="text/css">input.boton {	border:0px solid;	border-top:2px solid #140C3A;	border-bottom:1px solid white;	text-align: left;	padding:0;	margin:0; 	width:8em;	color:#fff; 	background-color: #140C3A;	cursor:pointer;	font-weight: bold; 	line-height: 2em; 	height: 2em;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size:0.9em; vertical-align:middle; }input.boton:hover { 	color:#fff;	background-color:#b70000;	border-top:2px solid #550000;}</style><script type="text/javascript">function go2Url(page) { location.href=page; }</script>

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

 

<input class="boton" type="button" value="Link One" onclick="go2Url('page1.html');" ><br /><input class="boton" type="button" value="Link Two" onclick="go2Url('page2.html');" ><br /><input class="boton" type="button" value="Link Tree" onclick="go2Url('page3.html');" ><br />

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,

Edited May 14, 2008 by TavoxPeru (see edit history)

[mischievous 0]

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

 

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:

 

<link rel="stylesheet" href="name-of-your-sheet.css" type="text/css">

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

 

<style type="text/css">input.boton {	border:0px solid;	border-top:2px solid #140C3A;	border-bottom:1px solid white;	text-align: left;	padding:0;	margin:0; 	width:8em;	color:#fff; 	background-color: #140C3A;	cursor:pointer;	font-weight: bold; 	line-height: 2em; 	height: 2em;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size:0.9em; vertical-align:middle; }input.boton:hover { 	color:#fff;	background-color:#b70000;	border-top:2px solid #550000;}</style><script type="text/javascript">function go2Url(page) { location.href=page; }</script>

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

 

<input class="boton" type="button" value="Link One" onclick="go2Url('page1.html');" ><br /><input class="boton" type="button" value="Link Two" onclick="go2Url('page2.html');" ><br /><input class="boton" type="button" value="Link Tree" onclick="go2Url('page3.html');" ><br />

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,

[TavoxPeru 0]

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

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,

[mischievous 0]

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,

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

[TavoxPeru 0]

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

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

 

Best regards,