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:
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
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:
How long did it take you?
Sincerely,
plarsen111
2 minutes :-)
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>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.
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.