• sho
  • New member
  • Offline
  • Registered: 2009-09-29
  • Posts: 4

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

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

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

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

Can you post a link so we can see everything?

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

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

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
  • New member
  • Offline
  • Registered: 2009-09-29
  • Posts: 4

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

Hi there,
Nice to know it isn't my CSS code...and I'm pretty sure the tags are properly typed in (I even used Dreamweaver's idiot-proof auto-fill tag function, just to make sure I wasn't effing anything up myself). But, as I said, any and all help is much much appreciated.  So, here's the code for the page itself:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>First CSS Tutorial</title>

    <link href="mycss.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style></head>

<body>
<p align="left"><a href="http://www.sholem.ca"><img src="name.jpg" border="0"></a>
   this is also a test of <a href="http://www.google.ca">links</a>
    <div id="navigation">
<ul>
<li><a href="http://www.google.ca">LINK 1</a></li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
    </div>
<div id="navigation2">
   <ul>
   <li>Other Link 1</li>
   <li><a href="http://www.sholem.ca">Other Link 2</a></li>
   <li>Other Link 3</li>
   <li>Other Link 4</li>
   </ul>
</div>
   
<div id="centerDoc">
<p>
This is a test of <a href="http://www.google.ca">links</a>
</p>
</div>
       
</body>

</html>

and a link, just in case: http://www.sholem.ca/work/drella/practiceHTML.html

Thanks again!

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

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

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

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

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

One other quick comment... looks like you are missing a closing <p> tag:

<p align="left"><a href="http://www.sholem.ca"><img src="name.jpg" border="0"></a>
   this is also a test of <a href="http://www.google.ca">links</a>  <--- </p> tag needed here
    <div id="navigation">
<ul>
<li><a href="http://www.google.ca">LINK 1</a></li>
  • sho
  • New member
  • Offline
  • Registered: 2009-09-29
  • Posts: 4

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

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
  • New member
  • Offline
  • Registered: 2009-09-29
  • Posts: 4

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

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