View Full Version : Surrounding area of a link

03-30-2007, 08:27 AM
I have a div with 5 links all in a row. I would like the surrounding area of each link to be black and have a width of 200px each and a space of say 20px between each link.

I have worked out how to make the surrounding area black but can't work out the code for the width or the space between each link.

css is as follows:
a:link {font-size:11pt;color:#ff0000;text-decoration:none; font-weight:bold; background-color:#000000;}

(No point in posting visited, active and hover as they are all the same as link at the moment).

Would someone please be able to tell me the code I need to use please.

03-30-2007, 12:46 PM
What does your HTML look like?

03-30-2007, 06:40 PM
Well I haven't much html at the moment for this part because I'm just playing around with css.
The part concerned just says <div id="menu">

I'm not really wanting my page sorting our, more like I just want to know if css can do the effect I'm after.

03-30-2007, 07:17 PM
CSS applies to the HTML.
without a snippet of code showing the nav and surrounding tags, this is impossible :) Just the code and you'll get an instant answer

03-31-2007, 05:09 AM
Okey dokey.

Here'e the page:


03-31-2007, 10:13 AM

I have been reading a CSS book lately and I think that if you add a border i.e. {border:20px} to your links, then that will create the space you require around each link.

Try this anyway, as I am new to CSS also.


03-31-2007, 10:22 AM
Hi Stoney

OK that half worked! - by that I mean in the Dreamweaver screen it worked but not when previewed in IE or FF. Also it's not the exact effect I want. I want each "box" to be the same width.

03-31-2007, 12:47 PM
here you go. Learn this and tweak it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.wrap {width:740px;height:50px;background:#000;margin:0 auto;}
.wrap a {background:#000;color:#fff;padding:15px;display:b lock;float:left;}
.wrap a:hover {font-weight:bold;background:#f00;color:#000;}
.cDiv {clear:left;"}

<div class="wrap">
<a href="" />NAV ITEM 1</a><a href="" />NAV ITEM 2</a><a href="" />NAV ITEM 3</a><a href="" />NAV ITEM 4</a><a href="" />NAV ITEM 5</a><a href="" />NAV ITEM 6</a>
<div class="cDiv"></div>

03-31-2007, 07:54 PM
Thanks Chris.

Here's the first lot of my questions:

Usually the code at the top of my html reads:
<html xmlns="http://www.w3.org/1999/xhtml" >
You added: xml:lang="en" lang="en"
What is the significance of the addition?

When I usually do a link it looks like this:
<a href="">Home</a>
You’ve added an extra forward slash to read
<a href="" />Home</a>
What’s the significance of the forward slash?

Am I right in thinking this code can be transferred to my style sheet or does it have to stay in the html?

04-01-2007, 03:08 AM
Second lot of questions:

:) First question:
I've tweaked and got it doing what I want except the 5 blocks are left aligned but I want them centre aligned within the wrap div. I guess this has something to do with each element floating to the left but the only options there seem to be for float are left, right, auto and inherent. So how do I tell my elements I require them to be centred within the div?
Incidently, I worked out the 200px in width but decided it didn't look good so didn't go with that option.
:confused: Next question:
.cDiv {clear:left;"} and <div class="cDiv"></div>
According to
the code above means "no floating elements allowed on the left side". Left side of what? If it's the 5 blocks, then the last four have elements to the left of them. As you can see, I haven't quite got the float thing yet!!