Peep Posted June 11, 2011 Report Share Posted June 11, 2011 Please critique my code. I'm currently working through the killersites course and I guess this is specifically referring to the Dreamweaver course disc 1, chapter 4 video 10 "styling vertical links". As you can see here; I thought I would experiment and make the nav div horizontal since I am starting to get the hang of divs. This is instead of having the links down the left hand side as in the course video I referred to. The navigation links are supposed to change colour when you over the mouse over them. The text is supposed to turn to the colour of the nav background whilst the background to the link should turn white. It's not workng however. What am I doing wrong? Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 11, 2011 Report Share Posted June 11, 2011 You have your css link tags in the wrong order - change them to: #nav a:link, a:visited { background-color: #2B74B4; color: #FFF; } #nav a:hover, a:active { color: #2B74B4; background-color: #FFF; } The proper order is LOVE- HATE - or link, visited, hover - or, if you want to be even more specific, it's "Lord Vadar's Former Handle Annican" - Link - Visited - Focus - Hover - Active. Also, see how you have #nav in fron of the a:link (and a:hover) but not in front of the a:visited and a:active? this will apply those colors only to the #nav a:link and the #Nav a:hover, but to ALL the a:active and a:visited links in your entire document. (unless they have a different class or id which styles them differently. If you want to apply those colors to only the links in your navigation, you need to repeat the '#nav' before the second selector. Quote Link to comment Share on other sites More sharing options...
Peep Posted June 11, 2011 Author Report Share Posted June 11, 2011 Thanks Andrea. So am I correct in saying that the browser reads the code from top to bottom? Also, see how you have #nav in fron of the a:link (and a:hover) but not in front of the a:visited and a:active? this will apply those colors only to the #nav a:link and the #Nav a:hover, but to ALL the a:active and a:visited links in your entire document. (unless they have a different class or id which styles them differently. If you want to apply those colors to only the links in your navigation, you need to repeat the '#nav' before the second selector. I thought my css was only applying to a:links for example in the #nav? Or am I misunderstanding what you are saying perhaps? Quote Link to comment Share on other sites More sharing options...
Peep Posted June 12, 2011 Author Report Share Posted June 12, 2011 Ive been experimenting again; and am starting to become quite happy with what I can do so far :-)). I find experimenting is a good way to learn. As you can see I have two text areas, #main and #rcol. In the dreamweaver tutorial videos the instructor mentioned that where possible we should avoid putting margin on the left and right hand side of elements as this can "throw things out". I think I understand what he means by this as if you had margin on the left and right side of too many elements you could soon forget what your total "pixels" are which you need to fit into your wrapper - is this what he means by this? As you can see I have added margin (10px) the the left of #main and also (10px) to the left and right of #rcol. In doing so I have exposed the light grey background of the #wrapper to end up with the design that I have so far.# Is this an acceptable method of acheiving this result? Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 12, 2011 Report Share Posted June 12, 2011 I'm not sure what the instructor means, but you are right that margins - as well as padding - contribute to the total dimensions of things, and that does have to be considered. Your site looks good - it works, if validates, it gives you what you want. Here are a couple brief tutorials that address a few things I saw that you might consider: Styling a Horizontal Navigation Menu with CSS and CSS Shortcuts (there's a typo in your footer text) Quote Link to comment Share on other sites More sharing options...
Peep Posted June 12, 2011 Author Report Share Posted June 12, 2011 Thanks I will check those tutorials out. (there's a typo in your footer text) Lol - you have sharp eyes. 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.