Need help moving up the navigation background

Hello to all,
Can someone tell me how to move up the navigation background so that it makes contact with the tagline header shown in the picture. Thanks in advance for your help.

-Ron

Can you provide the code you use?

Hi molona,

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.

#navigation {
width: 182px;
height:600px;
background: #1e90ff url(backgrounds/) no-repeat;

}

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.

Obviously, the more changes you do, the greater the benefits

I do need your full HTML and CSS

First, I would like to know if you have a reset

Then, I want to check the padding and margin of the elements

Hi molona,

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:

  1. I would like to move the navigation background up so that it will touch the tagline background
  2. 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…

Thanks again for helping, it’s appreciated.

/*
CSS for Rons 2 site
*/

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #ffffff;

}
Below is the tagline code: this is not code

#tagline {
font-style italic;
border-top: 3px solid navy;
border-bottom: 3px solid navy;
padding-top .2e;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
background: #red url(gallery/.jpg) repeat-y
right;
}

h1 {
font-family “Trebuchet MS”, Helvetica, Arial, san-serif;
font-size: x-large; color: red
}

Below is the header background code: this is not code

h1 {
font-size: xx-large;
color: #white;
padding-top: 2em;
padding-bottom: .3em;
padding-left: .4em;
margin: 0;
background: url(gallery/wall3.jpg) repeat-y right;

}

li {
font-size: large
}

h2 {
color: red;
font-weight: normal;
}

h3 {
color: #000000;
font-weight: normal;
}

p {
font-size: medium; color: red;
}

ol {
font-size: medium; color: #000000;
}

Below is the Navigation background code: this is not code

#navigation {
width: 182px;
height:600px;
background: #1e90ff url(backgrounds/) no-repeat;

}

</body>
</html>

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.

Debugg it, should’n be that difficult. where is the url ?

can you explain your question more?

provide me the url of your website