Programming Forums > Web Development and Design > Other Web Development Languages

ajthornton_1978 · Apr 3rd, 2006, 11:36 PM

Here is the problem. i am trying to create a website virtually all in CSS. I am having trouble with the creating a navigation area. I want the background color to be a full 145px wide and 20 px high. When I mouse over (hover) I want the background color to change but stay the same size.

Here it the CSS code:

(Toggle Plain Text)

/* navigation class link */
a.navigation:link
{
	background-color:	blue;
	color:			     white;
}
a.navigation:visited
{
	text-decoration:	  none;
	background-color:	blue;
	color:			     white;
}
a.navigation:hover
{
	background-color:	red;
	color:			     blue;
}
a.navigation:active
{
	text-decoration:	none;
}
div.box
{
	width:			  145px;
	height:			  22px;
	border:			 1px solid black;
	line-height:		 20px;
}

Here is part of the html file:

(Toggle Plain Text)

<div class="box">
   <a class="navigation" href="http://www.auburn.edu">Auburn University</a>
</div>

Can anyone help me on this. If you need more information then please ask.

ajthornton_1978

Apr 3rd, 2006, 11:36 PM	#1
ajthornton_1978 Newbie Join Date: Apr 2006 Posts: 1 Rep Power: 0	background color Here is the problem. i am trying to create a website virtually all in CSS. I am having trouble with the creating a navigation area. I want the background color to be a full 145px wide and 20 px high. When I mouse over (hover) I want the background color to change but stay the same size. Here it the CSS code: (Toggle Plain Text) /* navigation class link / a.navigation:link { background-color: blue; color: white; } a.navigation:visited { text-decoration: none; background-color: blue; color: white; } a.navigation:hover { background-color: red; color: blue; } a.navigation:active { text-decoration: none; } div.box { width: 145px; height: 22px; border: 1px solid black; line-height: 20px; } / navigation class link */ a.navigation:link { background-color: blue; color: white; } a.navigation:visited { text-decoration: none; background-color: blue; color: white; } a.navigation:hover { background-color: red; color: blue; } a.navigation:active { text-decoration: none; } div.box { width: 145px; height: 22px; border: 1px solid black; line-height: 20px; } Here is part of the html file: (Toggle Plain Text) <div class="box"> <a class="navigation" href="http://www.auburn.edu">Auburn University</a> </div> <div class="box"> <a class="navigation" href="http://www.auburn.edu">Auburn University</a> </div> Can anyone help me on this. If you need more information then please ask. ajthornton_1978

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode

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