SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Attached Images Attached Images

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,175
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Can you provide the code you use?

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Quote Originally Posted by molona View Post
    Can you provide the code you use?
    #navigation {
    width: 182px;
    height:600px;
    background: #1e90ff url(backgrounds/) no-repeat;

    }

  4. #4
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,175
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by R.Mack View Post
    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

  6. #6
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  8. #8
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.

  9. #9
    Non-Member
    Join Date
    May 2012
    Posts
    14
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Debugg it, should'n be that difficult. where is the url ?

  10. #10
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you explain your question more?

  11. #11
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    provide me the url of your website


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •