Create a border around links to give a brick wall effect

[jeanm]

I'm re-designing my web site and in the navigation section I have some horizontal links. Because of the particular image above the links I want to make each link look like a brick in a wall. The idea being an orange coloured brick with white mortar (border) and white link text.

Every time I try to put a border style in it mucks everything up and creates some unwanted lines down the page. I've created a screen shot to show what I mean.

Currently i have the following in my css code:

#nav {
margin: 0 0 3em 0;
padding: 0;
}

#nav li {
float:left;
list-style: none;
}

#nav li a {
display: block;
border-style: ridge;
padding: 0 25px;
height: 30px;
line-height: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
color: #FFFFFF;
}

#nav li a:hover {
text-decoration: underline;
color: #0000FF;
}



And in my Navigation page I have:

<ul id="nav">
<li><a href="http://www.cheap-and-easy-recipes.com/index.php">Home</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/hints-tips-remedies.php">Natural Home Remedies</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/recipe-choices.php">Food &amp; Recipes</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/food-facts.php">Food Facts &amp; Nutrition</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/simple-savings.php">Simple Savings</a></li>
<li></li>
</ul>

<ul id="nav">
<li><a href="http://www.cheap-and-easy-recipes.com/hints-tips-beauty.php">Beauty Hints</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/railway-trip-ghan.php">"Green" Cleaning Products</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/DIY.php">DIY On A Budget</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/hints-tips-garden.php">In The Garden</a></li>
<li><a href="http://www.cheap-and-easy-recipes.com/healthy-foods-healthy-bodies.php">Family Topics</a></li>
<li></li>
</ul>





Can anyone tell me how I should do this better. I see one of the words has been shoved down below the navigation area into the content area too see left side of screenshot.

There should be only a content div and a long narrow "right" div in between the navigation and the footer but each time I put in a border-style it mucks that up.

Any assistance would be appreciated.

Jean

 

[PixelPusher]

For starters you cannot have two elements with the same id on the same page, so I would change the id "nav" to a class.

Now when you mention lines down the page, do you see these when previewing in a web browser or just in the design view of DW?

 

[Almo99]

That's kind of an ugly effect. Why would you want to do that? Are you going for a chunky gaming look?


.

 

[jeanm]

Thanks guys. I've abandoned the idea and will now have something more simple which will suit my limited abilities better.

 

[PixelPusher]

Your welcome, but always push the boundaries, that is how you get better

 

[ronaldroe]

I realize you abandoned the idea, but for the future, you can use outline as opposed to border. Outline doesn't add to the size of an element, so it won't push things out of the way.

 

[jeanm]

Thank you ronaldroe. I didn't know that. I have written that down in my little book. Much appreciated.

Jean