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

Booooze · Apr 4th, 2006, 12:34 AM

fist change you <div> to this -

(Toggle Plain Text)

<div id="box">

Your css code will then change to -

(Toggle Plain Text)

#box{}

if you want all your links to be the same in the div "box" then you don't even need the class. Either way, I think your problem is that you got the word/class navigation in the wrong place. Try this -

(Toggle Plain Text)

.navigation a:hover

and if you descide to scrap the class, you can simply use

(Toggle Plain Text)

#box a:hover

Hope that helps

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

Apr 4th, 2006, 12:34 AM	#2
Booooze Expert Programmer Join Date: Mar 2006 Location: Igloo Posts: 710 Rep Power: 3	fist change you <div> to this - (Toggle Plain Text) <div id="box"> <div id="box"> Your css code will then change to - (Toggle Plain Text) #box{} #box{} if you want all your links to be the same in the div "box" then you don't even need the class. Either way, I think your problem is that you got the word/class navigation in the wrong place. Try this - (Toggle Plain Text) .navigation a:hover .navigation a:hover and if you descide to scrap the class, you can simply use (Toggle Plain Text) #box a:hover #box a:hover Hope that helps

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

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