sho Posted September 29, 2009 Report Share Posted September 29, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 29, 2009 Report Share Posted September 29, 2009 Can you post a link so we can see everything? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 29, 2009 Report Share Posted September 29, 2009 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. Quote Link to comment Share on other sites More sharing options...
sho Posted September 29, 2009 Author Report Share Posted September 29, 2009 this is also a test of links LINK 1LINK 2LINK 3 Other Link 1 Other Link 2 Other Link 3 Other Link 4 This is a test of links Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 29, 2009 Report Share Posted September 29, 2009 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; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 30, 2009 Report Share Posted September 30, 2009 One other quick comment... looks like you are missing a closing tag: this is also a test of links tag needed here LINK 1 Quote Link to comment Share on other sites More sharing options...
sho Posted September 30, 2009 Author Report Share Posted September 30, 2009 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. Quote Link to comment Share on other sites More sharing options...
sho Posted September 30, 2009 Author Report Share Posted September 30, 2009 problem solved! eternally grateful; margins do not equal padding -- lesson learned. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.