Block-level anchors in an inline div?

Forum Moderators: not2easy

Message Too Old, No Replies

Block-level anchors in an inline div?

Can it be done?

Max_Power

7:52 am on Feb 6, 2004 (gmt 0)

I'm trying to create a horizontal navigation bar. I've created a container div for the bar. I want to put anchors in the bar, but I want them to be block-level so that each link is in its own uniformly sized, bordered rectangle. Can this be done?

mipapage

7:57 am on Feb 6, 2004 (gmt 0)

For sure this can be done. Why are you setting the div inline?

Max_Power

8:02 am on Feb 6, 2004 (gmt 0)

Because I thought that an inline div would be the only way to prevent a block-level anchor from taking up the whole bar.

mipapage

9:07 am on Feb 6, 2004 (gmt 0)

The following is, conceptually, how most get around the problem:

<!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> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
<!-- 
a {display:block;float:left;} 
div, a {border:1px solid #000} 
--> 
</style> 
</head> <body> 
<div><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div> 
</body> 
</html> 
 You may want to look into building your nav using a <ul>, and then floating the anchors that would reside in the <li>'s. 
Check out this thread started by grahamstewart about Technique: creating navigation bars from lists of links [webmasterworld.com].

Max_Power

10:41 am on Feb 6, 2004 (gmt 0)

float: left was the missing piece. Thank you so much.

I'm now faced with a new problem. The div I created for the navigation bar has a black background with a blue border at the top and bottom. It spans the width of its container div. I want those anchors to be centered in that background. They seem to have minds of their own even though they are nested in the navbar div. I thought that the navbar div would grow in height to accommodate the links, but instead it doesn't even appear to know that the links exist. Any thoughts?

mipapage

12:15 pm on Feb 6, 2004 (gmt 0)

Hey,

Glad that worked. Hmmm, maybe post some code here, so that I can get a better idea of what you are trying to do.

Be sure and give that link above a read, and the links from it. All the tools that you need are there...

- mipapage

NickA

12:29 pm on Feb 6, 2004 (gmt 0)

perhaps the reaon is because your links are floated (therefore they dont take up any space in the containing div) the containing div collapses, so not growing in height. the answer might be, if i understand the problem correctly, to put a an empty div with a style of clear:left after your links but within the navbar div to force the div to take up the space.

hope this helps

mipapage

1:15 pm on Feb 6, 2004 (gmt 0)

NickA,

That's exactly why. The floated links are, as they say, "out of the flow".

Max_Power

6:52 am on Feb 7, 2004 (gmt 0)

Almost there...

The empty div worked great! Now, because the links are out of the normal flow, they can't be centered...can they?