SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Space between header and nav

    I am experiencing a space between the header and nav of this site. I have tried adding overflow: hidden in several places and cannot get it to come together. http://foxdenwebsolutions.com/wingsofhope/index.html. What am I missing? Thanks.

  2. #2
    Barefoot on the Moon! silver trophy
    Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,516
    Mentioned
    51 Post(s)
    Tagged
    1 Thread(s)
    The page doesn't seem to be loading.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Seems my business site is down. I moved it to my jewelry site for now. http://foxdencreations.com/wingsofhope/index.html.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,223
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Try adding {margin-bottom:0px} to your h1 element.

  5. #5
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thank you that worked!

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,223
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Excellent! Thanks for the feedback.

  7. #7
    SitePoint Member
    Join Date
    Jul 2012
    Location
    London
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tested by removeing the <h1> inside the <header>

  8. #8
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That I haven't tried....I will see if that changes anything.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Do you mean the white line between the header and nav? That is part of the background image. Or is the issue fixed now?

  10. #10
    Non-Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's the h1 css problem. you should add padding:0; margin: 0; in h1{}. and change
    #navcontainer ul {
    background-image: url("../images/nav.png");
    background-repeat: no-repeat;
    float: left;
    font-family: Calibri,arial,helvetica;
    font-size: 26px;
    height: 89px;
    padding-left: 35px;
    padding-right: 50px;
    padding-top: 1px; to padding-top: 0;
    width: 1143px;
    ADD margin: 0;
    }

  11. #11
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The issue is fixed. Thank you everyone for your input.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by bill_1983 View Post
    it's the h1 css problem. you should add padding:0; margin: 0; in h1{}. and change
    #navcontainer ul {
    background-image: url("../images/nav.png");
    background-repeat: no-repeat;
    float: left;
    font-family: Calibri,arial,helvetica;
    font-size: 26px;
    height: 89px;
    padding-left: 35px;
    padding-right: 50px;
    padding-top: 1px; to padding-top: 0;
    width: 1143px;
    ADD margin: 0;
    }
    Did you actually test that? It doesn't make a difference when I try it. No CSS is going to remove the white line that is part of the image—if that's the issue.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,223
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    cgafox, there are actually a couple of other small problems with the page, if you're interested.

    You may have noticed that the page is slightly off center in the browser window. There is an unnecessary width assignment causing that which can be deleted. That width plus the padding throws the total width off.

    Code:
    #navcontainer ul {width:1143px;}
    (width:1143 has already been assigned in div.container.)

    In addition, you can delete the following <h1> width as it is unnecessary, too (albeit harmless).

    Code:
    h1 {width:1143px;}
    There is also a 1px space beneath beneath the navcontainer. It's most noticable at the edges of the images and the background is barely visible across the page. That can be eliminated by deleting

    Code:
    #navcontainer ul {padding-top:1px;}
    If you want the additional padding above the ul, it would probably be easier if the background image and container height were assigned to #navcontainer first, then #navcontainer ul assigned separately.
    Last edited by ronpat; Oct 12, 2012 at 20:51. Reason: added last sentence

  14. #14
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ronpat, your suggestions look good.


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
  •