I have placed a background color for my links, but want it to fill the whole box, not just the word.

Here is my website:

www.hmstechnology.com

You'll notice that the text turns white when you hover your pointer over the text.

BUT, I want it to do this:

You will notice that the links fills all the way from left to right when you hover.

Anyone know how I can get this?

Thanks,

plarsen111

Recommended Answers

All 11 Replies

You would need to change your coding from paragraphs to nested divs.

You need to put display:block; in the style for the links you wish to give a background color

Yes display:block; will solve your problem

you may use this code :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation</title>
<style>
<!--
body{
	background:#000;
}
div#Navigation{
	width:150px;
}
div#Navigation ul{
	list-style:none;
	margin:5px 0;
	padding:0;
}
div#Navigation ul li{
	display:block;
	border-style: double;
	background-color: #FF0000;
	padding-right: 5px;
    text-align: right
}
div#Navigation ul li:hover{
	display:block;
	border-style: double;
	background-color: #fff;
	padding-right: 5px;
    text-align: right
}

div#Navigation ul li a{
	color:#333333;
	text-decoration:none;
	display:block;
}
div#Navigation ul li a:visited{
	color:#333333;
	text-decoration:none
}
div#Navigation ul li a:hover{
	color:#000000;
	background:#FFFFFF;
	text-decoration:none
}

-->
</style>
</head>
<body>
<div id="Navigation">
<ul>
  <li><a href="#">6th Grade</a></li>
  <li><a href="#">7th Grade</a></li>
  <li><a href="#">8th Grade</a></li>
</ul>
<ul>
  <li><a href="#">Keyboarding</a></li>
</ul>
<ul>
  <li><a href="#"> RACHEL'S CHALLENGE </a></li>
</ul>
<ul>
  <li><a href="#">Moodle</a></li>
</ul>
<ul>
  <li><a href="#">Gaggle.net</a></li>
</ul>
<ul>
  <li><a href="#">Videos</a></li>
  <li><a href="#">Downloads</a></li>
  <li><a href="#">Got Lunch?</a></li>
  <li><a href="#">About Mr. L</a></li>
  <li><a href="#">Class Policies</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

Regards,
Rahul Dev Katarey

Wow, thank you for typing in all the code.

It works:

www.hmstechnology.com

How long did it take you?

Sincerely,

plarsen111

Why must everyone do this?

It is not accessible. It is extremely annoying to a dyslexic when the page changes as the mouse traverses it.

I automatically hit my BACK button whenever I see it. You lose viewers that way.

Just Simplifying the code Rahul Dev Katarey posted:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>

<style>
<!--
#Menu { width: 200px; }
	#Menu ul { list-style: none; margin: 0px; padding: 0; }
		#Menu ul li { background-color: #06F; }
		#Menu ul li:hover { display:block; background-color: #5398FF; }
		#Menu ul li a { color: #FFF; text-decoration: none; display: block; }
		
</style>
</head>

<body>
<div id="Menu">
    <ul>
      <li><a href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
      <li><a href="#">Fourth</a></li>
    </ul>
</div>
</body>
</html>
Member Avatar for diafol

You're 2 and a half years late, mate.

better late then not at all... imagine this poor guy sitting around waiting for 2 years to get a response... funny stuff

well, i'm glad this thread is living 2 years later because i need help with it too! where do i put this code in the HTML edit section? i'm not very savvy at this. any help is appreciated. thanks.

Member Avatar for diafol

Post a new question, because you haven't specified exactly what you want. Also, post any existing code that you have as this is only a help forum.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.