CSS unordered list won't flow to right margin?

[websj06]

 Hello everyone:

  I am doing an exercise from a book.     LAST EDITED ON Oct-15-06 AT 09:54 PM (PST)


I attached external stylesheet, then add embedded style that will modify the unordered list. But the unorder list won't float to the right margin and background color won't change to color ivory as required.

Could someone take look at my code at tell me what's went wrong? Thanks in advanced!

code in external stylesheet

Code:

body {color: brown;}

h1, h2, h3, h4, h5, h6 {font-family: sans-serif; color: orange;}

address {color: orange; font-style: normal; font-variant: small-caps; text-align: center; clear: both;}


/* creating id for paragrapy contain photos */
p#head {text-align: right;}


#links {width: 150px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px;}

/* format appearance of the link */
#links a {font-family: sans-serif; color: white; font-size: 9pt;}

#main {width: 70%; float: left;}

url to the file: http://www.cuj06.com/html/start1.html

Jeff
10-15-06

[Andy]

Hi Jeff,

I think you are over-using the id selector such as in a paragraph where it's best to use the class selector. This causes a lot of headaches when you nest them like you are doing i.e. you have main enclosing box

I only use the id selector to define content blocks such as header, content and footer. Elsewhere it's best to use the class selector.

In your case, for the css to find your un-ordered link box, you need to list all the encapsulating ID tags in sequence in the style definition such as:
#main #box {float:right} or something like that.

[websj06]

Hello Andy:

  Thanks for pointing out my problem. I modified the embeded stylesheet by using descendent selecotor

   #main #box {float: right; ect} in attached stylesheet. I issue got resolved

   I also learned when to use ID for proper case:)

Jeff
10-16-06

[Andy]

No problem Jeff. I found css can quickly get out of control even though it's the way to go to separate styling from content.

btw. when I looked at your page it was deep in your site structure. Are you experimenting or do you have a live home page that you want to get visitors to? If so, you want this page in the root of the public html area not below a sub-directory called html.