Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #23371
    csurele
    Member

    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:




    Paul Saini.com

    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.

    #50377
    Cotton
    Member

    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.

    #50379
    csurele
    Member

    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)

    #50380
    Spunkmeyer
    Member

    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?

    #50386
    Cotton
    Member

    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?

    #50398
    csurele
    Member
    "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; }
    #50399
    csurele
    Member
    #50400
    Cotton
    Member
    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.

    #50405
    johnleigh
    Participant

    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 –

    #50430
    csurele
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.