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, :
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
Jump to Post— FC Jamison 31You would need to change your coding from paragraphs to nested divs.
Jump to Post— vishwebdesign 0You need to put display:block; in the style for the links you wish to give a background color
Jump to Post— katarey 27Yes 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="
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.