PDA

View Full Version : Surrounding area of a link


Andromeda
03-30-2007, 09: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.

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

Andromeda
03-30-2007, 07: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.

domedia
03-30-2007, 08: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

Andromeda
03-31-2007, 06:09 AM
Okey dokey.

Here'e the page:

http://www.wtl.org.nz/constr/index.html

stoneygossard
03-31-2007, 11:13 AM
Hi,

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.

Stoney

Andromeda
03-31-2007, 11: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.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<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;"}
</style>
</head>

<body>
<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>
</div>
</body>
</html>

Andromeda
03-31-2007, 08: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?

Andromeda
04-01-2007, 04: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
http://www.w3schools.com/css/pr_class_clear.asp
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!!