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

[csurele]

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:

• Home
• Portfolio
• Weddings
• Contact

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.

[Cotton]

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.

[csurele]

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)

[Spunkmeyer]

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?

[Cotton]

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?

[csurele]

"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:

Also in the CSS:

Code:

#header-img { bottom: -2px; }

[csurele]

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

[Cotton]

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.

[johnleigh]

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 –

[csurele]

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! :!:

[Author]

Posts