8 Replies - 616 Views - Last Post: 14 October 2013 - 04:19 PM

#1 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

How do you make a link take up 100% of its containing element?

Posted 13 October 2013 - 05:11 PM

Ok so before you answer make sure you read this because it's confusing. I'm using this for a navbar and a list for the elements. Everything works fine EXCEPT the hyperlinks WILL NOT FILL IN THE PADDING. It works fine setting the links to block but not if you're using auto width only if there's a fixed width.

Is there Any Way To Fix This?



.navHolder
{
	text-align:center;
	width:780px;
	display:block;
}

ul.cssnav
{
	text-align:center;
	list-style:none;
}

ul.cssnav li:not(:last-child)
{
	border-right:solid;
	border-width:2px;
	border-color:black;
}

//BELLOW IS WHERE WE ADD PADDING CAUSING AN ISSUE
ul.cssnav li
{
	width:auto;
	padding-left:10px;
	padding-right:10px;
	display:inline-block;
	height:30px;
	line-height:30px;
	float:left;

}

//SETTING THIS TO BLOCK DISPLAY WILL USUALLY WORK BUT NOT IF THERE'S PADDING OR MARGIN IN THE CONTAINING ELEMENT 
ul.cssnav li a
{
	color:white;
	text-decoration:none;
	font-weight:bold;
	font-family:"Comic Sans MS", cursive, sans-serif;
	display:block;
	font-size:18px;
	letter-spacing:2px;
}


ul.cssnav li:hover
{
  

}


ul.cssnav li.active
{

}


AND HERE'S THE HTML


<div class="navHolder">
					   <ul class="cssnav">
					   	 <li><a href="/index.php">Home</a></li>
					   	 <li><a href="/About.php">About</a></li>
					   	 <li><a href="/Services.php">Services</a></li>
					   	 <li><a href="/Testimonials.php">Testimonials</a></li>
					   	 <li><a href="/Articles.php">Articles</a></li>
					   	 <li><a href="/Login.php">Login</a></li>
					   	 <li><a href="/Contact.php">Contact Us</a></li>
					   </ul>
				   </div>





What can be done to get what I want? Thanks guys!!

This post has been edited by adn258: 13 October 2013 - 05:12 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How do you make a link take up 100% of its containing element?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4332
  • View blog
  • Posts: 12,127
  • Joined: 18-April 07

Re: How do you make a link take up 100% of its containing element?

Posted 13 October 2013 - 05:22 PM

One method you can do is set the container to have a position of "relative" and then position the link as "absolute". Then set its left, right, top and bottom all to 0. This makes the link expand to the entire parent container. Fiddle example below...

http://jsfiddle.net/x5dn6/

:)
Was This Post Helpful? 1
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: How do you make a link take up 100% of its containing element?

Posted 13 October 2013 - 05:50 PM

If you're coding for HTML5, then there is a neat solution. HTML5 supports "block-level" linking, meaning that you can insert a block of HTML inside anchor tags. For your HTML, the solution would look like this:
<div class="navHolder">
	<ul class="cssnav">
		<a href="/index.php"><li>Home</li></a>
		<a href="/About.php"><li>About</li></a>
		<a href="/Services.php"><li>Services</li></a>
		<a href="/Testimonials.php"><li>Testimonials</li></a>
		<a href="/Articles.php"><li>Articles</li></a>
		<a href="/Login.php"><li>Login</li></a>
		<a href="/Contact.php"><li>Contact Us</li></a>
	</ul>
</div>


Was This Post Helpful? 1
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,179
  • Joined: 08-June 10

Re: How do you make a link take up 100% of its containing element?

Posted 13 October 2013 - 10:24 PM

View Poste_i_pi, on 14 October 2013 - 02:50 AM, said:

If you're coding for HTML5, then there is a neat solution. HTML5 supports "block-level" linking, meaning that you can insert a block of HTML inside anchor tags.

do you have a citation for that? this pretty much violates every HTML/CSS rule established so far.
Was This Post Helpful? 1
  • +
  • -

#5 adn258  Icon User is offline

  • D.I.C Addict

Reputation: 11
  • View blog
  • Posts: 761
  • Joined: 31-August 11

Re: How do you make a link take up 100% of its containing element?

Posted 14 October 2013 - 01:47 AM

Yeah that "html5" ideas seems a bit off and like a bad coding ideas EVEN IF IT WORKS. I think martyrs solution is decent and I appreciate the help.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3371
  • View blog
  • Posts: 11,420
  • Joined: 12-December 12

Re: How do you make a link take up 100% of its containing element?

Posted 14 October 2013 - 02:18 AM

<div class="navHolder">
	<ul class="cssnav">
		<a href="/index.php"><li>Home</li></a>
		<a href="/About.php"><li>About</li></a>

</div>

Block-level linking means that the block-level elements such as div and ul could be within a-tags, but not the li elements. The only (immediate) child elements to ul and ol-tags should be li-tags.

I was reading that block-level linking is discouraged, particularly in relation to SEO and Accessibility. These concerns may have been salved though.

There are a range of opinions given here.

This post has been edited by andrewsw: 14 October 2013 - 02:44 AM

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3371
  • View blog
  • Posts: 11,420
  • Joined: 12-December 12

Re: How do you make a link take up 100% of its containing element?

Posted 14 October 2013 - 02:30 AM

Erm, just add the padding to the a-links, rather than the li ;)
Was This Post Helpful? 0
  • +
  • -

#8 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: How do you make a link take up 100% of its containing element?

Posted 14 October 2013 - 02:53 PM

View PostDormilich, on 14 October 2013 - 03:24 PM, said:

View Poste_i_pi, on 14 October 2013 - 02:50 AM, said:

If you're coding for HTML5, then there is a neat solution. HTML5 supports "block-level" linking, meaning that you can insert a block of HTML inside anchor tags.

do you have a citation for that? this pretty much violates every HTML/CSS rule established so far.

Other working in the 5 major browsers, no.
Was This Post Helpful? 0
  • +
  • -

#9 pashata  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 14-October 13

Re: How do you make a link take up 100% of its containing element?

Posted 14 October 2013 - 04:19 PM

Instead on the LI , set the padding on the A and problem solved ...

http://jsfiddle.net/t9NBZ/2/
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1