Forums

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:
http://img510.imageshack.us/img510/4908/screenshot005ft4.jpg

Below is the HTML:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html>
	<head>
		<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
		<title>Paul Saini.com</title>
		<link rel=\"stylesheet\" type=\"text/css\" href=\"psstyle.css\" />
	</head>
	<body>
			
			<div id=\"page-wrap\">
				
				<img src=\"images/page_header_nav.jpg\" alt=\"Header\" />
				
				
				<ul id=\"nav\">
					<li class=\"home\"><a href=\"#\">Home</a></li>
					<li class=\"portfolio\"><a href=\"#\">Portfolio</a></li>
					<li class=\"weddings\"><a href=\"#\">Weddings</a></li>
					<li class=\"contact\"><a href=\"#\">Contact</a></li>
				</ul>
				<div id=\"right_side_bar\"></div>
				<p> Main Content goes here.....</p>
				
			</div>
			
			<div id=\"footer\">
				
			</div>
	</body>
</html>

The following is the CSS created following Chris' lead:

* {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


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

<img class=\"header-img\"  src=\"images/page_header_nav.jpg\" alt=\"Header\" />

Also in the CSS:

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

csurele

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

Cotton


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

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

treehouse : what would you like to learn today?

Forums

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