Grow your CSS skills. Land your dream job.

space b/w header & nav images Videopods 12-13

  • # October 7, 2008 at 11:57 pm

    Hi all and Chris, thanks so much for your multiple videopods on PSD -> HTML translation. It takes a lot of effort and I am glad you went through the trouble of documenting each stage of this process.

    I have followed #12 and part of #13 to the point where we insert roll-over nav buttons in the page.

    The problem I am having is with a small space between header jpeg and the 4 nav buttons below it.

    I ensured I did slices and crops snapped to guides in Photoshop and I combined the 3 states of the buttons correctly.

    Here is the screenshot of what I am talking about:
    [img]http://img510.imageshack.us/img510/4908/screenshot005ft4.jpg[/img]

    Below is the HTML:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



    Header

    Main Content goes here…..


    The following is the CSS created following Chris’ lead:

    Code:
    * {margin: 0; padding: 0;}
    html { overflow-y: scroll;}
    body { font:62.5% Helvetica, sans-serif;
    background-color: #00ccff;
    }

    ul { list-style: none inside}
    p { font-size:1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a { outline: none;}
    a img {border: none; }

    .floatleft { float:left;}
    .floatrght { float:right;}
    .clear { clear: both;}

    #page-wrap{
    width: 960px;
    margin: 0 auto;
    }

    ul#nav {

    }

    ul#nav li {
    display: inline;

    }

    ul#nav li a{

    display: block;
    height: 60px;
    text-indent: -9999px;
    float: left;

    }
    ul#nav li.home a {
    width: 391px;
    background: url(images/nav-home.jpg) bottom center;

    }
    ul#nav li.portfolio a {
    width: 173px;
    background: url(images/nav-portfolio.jpg) bottom center;

    }
    ul#nav li.weddings a {
    width: 173px;
    background: url(images/nav-weddings.jpg) bottom center;

    }
    ul#nav li.contact a {
    width: 223px;
    background: url(images/nav-contact.jpg) bottom center;

    }

    ul#nav li a:hover{
    background-position: center center;
    }

    Any help or advise would be greatly appreciated because I am new to css and non-tabular HTML design.

    Thanks and advance apologies for errors on my part.

    # October 8, 2008 at 12:24 am

    Without going to deeply into your styles, I would guess that it is a padding/margin issue. I would start by adding

    Code:
    padding: 0;
    margin: 0;

    to your styles, at least the ul#nav, at least add it to the top and bottom.

    ** Sorry – I just noticed you set the margin and padding to 0 in your global reset, I don’t do that. Let me look at your stuff.

    # October 8, 2008 at 12:58 am

    Hi, I double checked all my margins and paddings and do not appear problematic but I am obviously omitting something.

    If curious, the PSD can be viewed at: http://www.filesavr.com/paulsainiidea2 (~2.5MB)

    # October 8, 2008 at 4:43 am

    I agree with Cotton – it looks like a spacing issue. Take your UL#nav (according to your css) for instance. It doesn’t have any parameters attached to it. ul#nav is the wrapper around the entire list. So that should be the element that you need to change. Either give it a relative position to the element above it (ie ul#nav{position:relative, top:0;} ** If that doesn’t work, you might have to put the image in a div and adjust the positioning rules), or add {padding:0; margin: 0;} to that element and it should work. What’s the url?

    # October 8, 2008 at 10:53 am

    I don’t know what would cause the issue, but the easiest way to correct and keep working would be to add a class to that header image and make the bottom margin -2px. Definitely not the proper way to do things but nothing in your code jumps out as being wrong. If you remove the image, does the nav sit at the absolute top or does the gap still exist?

    # October 8, 2008 at 4:08 pm
    "Cotton" wrote:
    I don’t know what would cause the issue, but the easiest way to correct and keep working would be to add a class to that header image and make the bottom margin -2px. Definitely not the proper way to do things but nothing in your code jumps out as being wrong. If you remove the image, does the nav sit at the absolute top or does the gap still exist?

    Hi, thank you for the suggestion. I am not sure if I did this correctly, but you mean this? :

    Code:
    Header

    Also in the CSS:

    Code:
    #header-img { bottom: -2px; }
    # October 8, 2008 at 4:14 pm

    The URL is: http://www.paulsaini.com/new/

    # October 8, 2008 at 4:40 pm
    Code:
    margin-bottom: -2px;

    bottom is to place an element based on the bottom edge of the element and the relatively positioned div that it lives in.

    # October 8, 2008 at 7:38 pm

    Hi csurele,

    I think in this case you just need to change the css code below to fix this.
    Either of the two methods below should sort this for you.

    img.header-img {vertical-align:bottom; }

    img.header-img {display:block; }

    This ensures that the image aligns to the baseline of its parent -

    # October 9, 2008 at 3:50 pm

    Hi everyone, thank you for your suggestion. I was able to correct the error with

    Code:
    img.header-img {vertical-align:bottom; }

    Here is the almost finished layout: http://www.paulsaini.com/new/#

    Now I have to just figure out how to move the sidebar left so the blue and white overlap with the background.

    Thanks so much guys! :!:

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".