Link to home
Create AccountLog in
Avatar of DrDamnit
DrDamnitFlag 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?
Avatar of Gregg
Gregg
Flag of United States of America image

try adding css style to anchor style.

display: block;
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

Avatar of 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

Avatar of 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
Avatar of DrDamnit
DrDamnit
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account