Avatar of DrDamnit
DrDamnit
Flag for United States of America asked on

Expand anchor to size of container

This is a follow up to:
https://www.experts-exchange.com/questions/27186052/Change-CSS-based-on-Status-of-another-element.html

The anchor now changes color properly, but now I need the whole box to be the "clickable" area for the link.

How do I do that?
CSS

Avatar of undefined
Last Comment
DrDamnit

8/22/2022 - Mon
Gregg

try adding css style to anchor style.

display: block;
Gregg

an anchor tag is inline by default. So when you create a link in html text it keeps its position in text. You can change that setting by using display css attribute. Setting the link to block creates the effect you are trying to achieve.

See below:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul { 
	list-style: none;
	margin: 0;
	padding: 0;
	width: 300px;
}

li {
	margin: 0;
	padding: 0;
}

li a {
	display: block;  /* Change display to block here. */
	background-color:#FFCC66;
}

li a:hover {
	background-color: #99CC66;
}
</style>
</head>

<body>
<ul>
<li><a href="http://www.experts-exchange.com">Experts Exchange</a></li>
</ul>
</body>
</html>

Open in new window

Hagay Mandel

Try this
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#menu-main-navigation-menu li, #menu-main-navigation-menu li a {
      float:right;
      position:relative;
      display:block;
      
      font-size:22px;
      background-color:#0078e6;
      color:white;
      text-decoration: none;
	  width:200px;
	  height:30px;
	  text-align:center;
}

#menu-main-navigation-menu li:hover, #menu-main-navigation-menu li:hover a  {
      background-color:#ffc300;
      color:#000000;
      text-decoration: none;
	  display: block;
 
</style>
</head>

<body>
<ul id="menu-main-navigation-menu">
  <li><a href="http://www.google.com">Google</a></li>
  <li><a href="http://www.cnn.com">CNN</a></li>
  <li><a href="http://www.yahoo.com">Yahoo</a></li>
</ul>
</body>
</html>

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
DrDamnit

ASKER
Block no worky... or... me no understand-y....
#menu-main-navigation-menu {
	list-style:none;
	margin: 0;
	padding: 0;
	width: 570px;
	float:right;
	border-color:blue;
	border-style:solid;
	border-width:thin;
	
}

#menu-main-navigation-menu li {
	float:right;
	position:relative;
	display:inline;
	padding: 10px 10px 10px 10px;
	border-color:red;
	border-style:solid;
	border-width:thin;
	font-size:22px;
	background-color:#0078e6;
}

#menu-main-navigation-menu li:hover {
	background-color:#ffc300;
}

#menu-main-navigation-menu li a {
	color:white;
	text-decoration:none;
	display:block;
}

#menu-main-navigation-menu li:hover a {
	color:#000000;
}

Open in new window

ASKER CERTIFIED SOLUTION
DrDamnit

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question