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;
}