Jump to content

Beginner problems


Peep

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...