I have a couple of questions: Originally I was going to use the header background, tagline background, and navigation background on all the site pages, so I did the above using external css. Now I just want to have the header background, tagline background, and navigation background on just one page, should I use xhtml in the page and If so, what is the code for that? Or, is there a way that I can use the external CSS on just one page. I still need to move up the navigation background. Thanks for your help, it's appreciated.

molona said:

Can you provide the code you use?

navigation {

I deleted the external css page because I want to add styling to individual pages. So, I guess that i need the internal css codes for the header background, tagline background and the navigation background. is there a good book on internal css?

I deleted the external css page because I want to add styling to individual pages. So, I guess that i need the internal css codes for the header background, tagline background and the navigation background. is there a good book on internal css?

For internal css you simply need to add the appropiate tags inside the header element but even if you want to personalize every single page, you'd be better off with external css page (at least, in my opinion). It will still easier to maintain if all the information is in just one place, instead of having to go from page to page making changes (no matter how unique)

Just think that if you decide to change the background in two pages, you'll have to open those two pages and reload them to your live version of the site.

But if you have it in a external css file, you'll do the changes in just one place and re-load just one file.

Thanks for pointing out that the external css can still be applied to a single page, I didn't know that. I figured out how to apply the external css to one page only by removing the css links <link href="style1.css" rel="stylesheet" type="/css"/> from the pages that I don't want the backgrounds to apply to. Im sure i will need your help again later but for now i would like to know the following:

I would like to move the navigation background up so that it will touch the tagline background

As you can see by looking at the code that I'm confused about the order.

So that you can easily see the code for the different backgrounds, I wrote above the background codes: "Below is the tagline code: this is not code" etc...

navigation {

I would need to see the FULL code to be certain but it's my guess that one of 4 things could be happening. In all of the following I assumed #navigation is a list element

1) you haven't zeroed out the marging on you navigation list. try #navigation { margin:top:0; }2) the parent container of #navigation has padding at the top. Either get rid of the padding, or add #navigation{ margin-top: - the same amount as the padding in the parent container)3) Relative or absolute positioning of #navigation in some OTHER part of the code. But I don't see anything like in what you posted.4) margin-bottom in the element PREVIOUS #navigation or its parent container ( this effect is called margin collapse). do a quick test: add border-top to #navigation's container. if #navigation now touches the border-top of the parent element, but the gap has moved to being between #navigation's container and the element above.. then its the vertical margin of the element previous to #navigation's container that was causing the issue

I would need to see the FULL code to be certain but it's my guess that one of 4 things could be happening. In all of the following I assumed #navigation is a list element

1) you haven't zeroed out the marging on you navigation list. try #navigation { margin:top:0; }2) the parent container of #navigation has padding at the top. Either get rid of the padding, or add #navigation{ margin-top: - the same amount as the padding in the parent container)3) Relative or absolute positioning of #navigation in some OTHER part of the code. But I don't see anything like in what you posted.4) margin-bottom in the element PREVIOUS #navigation or its parent container ( this effect is called margin collapse). do a quick test: add border-top to #navigation's container. if #navigation now touches the border-top of the parent element, but the gap has moved to being between #navigation's container and the element above.. then its the vertical margin of the element previous to #navigation's container that was causing the issue

hope that helps

Hi dresden phoenix,

Thanks for your help. A lot of what you said is over my head, however I tried a couple of your suggestions with out any success. I'm going to read the book again to see if I can get a better understanding. Learning to properly write the code is a bit over whelming to me at this stage, but I'll keep at It. Thank you for taking the time.