Issues with links in CSS? Novice in need of help!

[sho]

Hello,

I'm trying to update my website using CSS -- I'm an enthusiastic amateur, but a TOTAL novice when it comes to CSS. I found the online tutorial, and have been using it to teach myself the basics of CSS, and used the CSS code from the tutorial as a template for my site (I've altered colours and fonts, and added an extra navigation div id). But I have this strange problem; I'm completely stumped, and I was hoping someone would be able to help me, as I really have no clue as to what to do next. I should also mention that I'm using Dreamweaver CS3, on a Mac.

 

The problem is that within the 'navigator' divs, where the navigational lists are, the links simply don't work, whether within listed items or just plain text -- I've experimented with both. When I preview the files in any browser, they don't work at all -- the mouse doesn't even change from a pointer to the little hand. Yet, links in the 'center Doc' div work fine. Why is this? What am I missing/doing wrong? I'm enclosing a copy of the CSS code as well.

 

Any suggestions would be much much appreciated. Basically, I've hit a wall here.

Thanks!

 

CSS code:

/* Generic Selectors */

 

body {

font-family: "Times New Roman", Times, serif;

font-size: 14px;

color: #000000;

background-color: #FFFFFF;

}

ul {

padding-left: 3px;

}

 

p {

width: 90%;

}

 

li {

line-height: 105%;

list-style-type: none;

margin-bottom: 7px; }

 

h1 {

font-family: "Times New Roman", Times, serif;

font-size: 20px;

font-weight: normal;

color: #000000;

}

 

h2 {

font-family: "Times New Roman", Times, serif;

font-size: medium;

font-weight: normal;

color: #000000;

}

 

/**************** Pseudo classes ****************/

 

:link {

color: #000000;

text-decoration: none;

font-weight: normal;

}

 

li :link {

color: #000000;

text-decoration: none;

font-weight: normal;

}

 

:visited {

color: #000000;

text-decoration: underline;

font-weight: normal;

}

li :visited {

color: #000000;

text-decoration: none;

font-weight: normal;

}

 

:active {

text-decoration: none;

}

 

/************************* ID's *************************/

#navigation {

position: absolute;

z-index: 10;

height: 600px;

width: 80px;

margin-top: 10px;

border-right: 1px solid #FF0066;

font-weight: bold;

}

#navigation2 {

position: absolute;

z-index: 10;

height: 500px;

width: 120px;

margin: 0;

margin-left: 5px;

padding: 0 5px 0px 80px;

margin-top: 10px;

border-right: 1px solid #FF6699;

font-weight: normal;

}

 

#centerDoc {

position: absolute;

z-index: 15;

padding: 0 0 20px 220px; /*top right bottom left*/

margin-top: 20px;

}

[Andrea]

Can you post a link so we can see everything?

[falkencreative]

Seems like it is an issue with your actual code, not the CSS. Perhaps a missing a single/double quote? Or a missing/incorrect closing tag? As Thelma said, either post a link to the site (perhaps upload it to a temporary location?) or at least the code to the section of the nav you are having trouble with.

[sho]

this is also a test of links

LINK 1

LINK 2

LINK 3

Other Link 1

Other Link 2

Other Link 3

Other Link 4

 

 

This is a test of links

 

 

[Andrea]

Add different background colors to your navigation, navigation2, and centerDoc divisions (just to demonstrate) and you will see that navigation is overlapped by navigation2, and that is overlapped by centerDoc - so when you're hovering over those links, you're not really hovering over them, but over the overlapping divisions.

 

Add sufficient margin-left to nav2 and centerDoc divs, and voila ---- your links will work. For example:

 

#navigation {

border-right:1px solid #FF0066;

font-weight:bold;

height:600px;

margin-top:10px;

position:absolute;

width:80px;

z-index:10;

background: yellow;

}

#navigation2 {

border-right:1px solid #FF6699;

font-weight:normal;

height:500px;

margin:10px 0 0 90px;

padding:0 5px 0 80px;

position:absolute;

width:120px;

z-index:10;

background:teal;

}

#centerDoc {

margin-top:20px;

padding:0 0 20px 220px;

position:absolute;

z-index:15;

background:red;

margin-left:300px;

}

[falkencreative]

One other quick comment... looks like you are missing a closing

tag:

 

  this is also a test of links  tag needed here


LINK 1

[sho]

OOOOOOHHH!!! Thanks so much! I never would have guessed -- I really thought I did all the margin math right, but looks like I was wrong. I'll try that out.

 

Thanks again!! -- if you only knew how much time I spent clutching my forehead and staring at my screen.

[sho]

problem solved! eternally grateful; margins do not equal padding -- lesson learned.