How to create this navigation

lozza · 5 Feb 2007 at 13:41

I really like this navigation: http://www.4csplumbing.co.uk/

I've had a look at the source and the CSS and had a go at recreating, but i can't seem to get my head around how it's working as there is lots in the code that i'm not familiar with but i don;t know if it's related to the navigation or not. What i've recreated doesn't work.

I know it can be done as rollovers - but i want to try and understand how they have done it and why they have done it the way they have.

Can anyone enlighten me?

Conrad11 · 5 Feb 2007 at 17:13

Simple - Background Images

Sorry I will try and find an article for you.

EDIT:

Can't find the article. But what you do is have the background image together, like this:

Then you just change the background position on hover.

Hope that makes sense.

lozza · 5 Feb 2007 at 17:35

Yes as background images of the ID but if you look at the images the normal state (no colour) and the over state (colour) are in the same image, and using the CSS overflow: hidden; on the a tag.

As i say i've recreated this (using the html, css and images from that site) and just cut out all the other stuff but it doesn't seem to work.

Conrad11 · 5 Feb 2007 at 17:36

Harib0 said:
Yes as background images of the ID but if you look at the images the normal state (no colour) and the over state (colour) are in the same image, and using the CSS overflow: hidden; on the a tag.

As i say i've recreated this (using the html, css and images from that site) and just cut out all the other stuff but it doesn't seem to work.

Post your website url for us or the code.

lozza · 5 Feb 2007 at 21:21

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
<style type="text/css">
<!--
#home {
	margin-bottom: 7px;
	background: url(/public_html/atypus/images/buttons/homepage.png) repeat-y 0px 35px;
}
#home a {
	height: 35px;
	width: 221px;
	display: block;
	overflow: visible;
	background: url(/public_html/atypus/images/buttons/homepage.png);
}
#about {
	background-image: url(/public_html/atypus/images/buttons/about.png);
	background-position: 0px 35px;
	background-repeat: repeat-y;
	margin-bottom: 7px;
}
#about a {
	background-image: url(/public_html/atypus/images/buttons/about.png);
	height: 35px;
	width: 221px;
	display: block;
	overflow: hidden;
}
#services {
	background-image: url(/public_html/atypus/images/buttons/services.png);
	background-position: 0px 35px;
	background-repeat: repeat-y;
	margin-bottom: 7px;
}
#services a {
	background-image: url(/public_html/atypus/images/buttons/services.png);
	height: 35px;
	width: 221px;
	display: block;
	overflow: hidden;
}
#references {
	background-image: url(/public_html/atypus/images/buttons/references.png);
	background-position: 0px 35px;
	background-repeat: repeat-y;
	margin-bottom: 7px;
}
#references a {
	background-image: url(/public_html/atypus/images/buttons/references.png);
	height: 35px;
	width: 221px;
	display: block;
	overflow: hidden;
}
#contact {
	background-image: url(/public_html/atypus/images/buttons/contact.png);
	background-position: 0px 35px;
	background-repeat: repeat-y;
	margin-bottom: 7px;
}
#contact a {
	background-image: url(/public_html/atypus/images/buttons/contact.png);
	height: 35px;
	width: 221px;
	display: block;
	overflow: hidden;
}

#leftcol {
	width: 227px;
	padding-top: 8px;
	padding-left: 7px;
	float: left;
	padding-bottom: 8px;
}

-->
</style>
</head>
<body>
	  <div id="leftcol">
		<div id="home"><a href="#" title="Home"></a></div>
		<div id="about"><a href="#" title="About Us"></a></div>
		<div id="services"><a href="#" title="Services"></a></div>
		<div id="references"><a href="#" title="References"></a></div>
		<div id="contact"><a href="#" title="Contact"></a></div>
	  </div>
</body>
</html>

As i say this is a direct copy of the code from the site in the OP except i have removed all the other crap to leave just the navigation bar.

But when i preview it in the browser i can't see anything at all but when i mouse over the area ite pointer changes indicating there are links there

unwashed potato! · 5 Feb 2007 at 23:13

i may be lost here, but if thats a direct copy from the example website but its not showing right, im guessing its because you haven't got all the images to use? they could have either done it like the example said in post 2, or they could do a <span> so that the background image is the colourless, and when you span over it replaces it with the coloured image. (i haven't looked at the source code btw so could be completely wrong, but thats a way of doing it)

lozza · 5 Feb 2007 at 23:21

Conrad11 said:
Simple - Background Images

Sorry I will try and find an article for you.

EDIT:

Can't find the article. But what you do is have the background image together, like this:

Then you just change the background position on hover.

Hope that makes sense.

Ah that wasn't showing when i looked last time, the images they have are verticaly stacked. So the top shows fine but the bottom is hidden and then on hover you move the position up, and thats where the overflow part comes in so that the image overflowing the div is hidden.

hmm will try again

lozza · 5 Feb 2007 at 23:23

addy_010 said:
i may be lost here, but if thats a direct copy from the example website but its not showing right, im guessing its because you haven't got all the images to use? they could have either done it like the example said in post 2, or they could do a <span> so that the background image is the colourless, and when you span over it replaces it with the coloured image. (i haven't looked at the source code btw so could be completely wrong, but thats a way of doing it)

Just realised that i don't have any links in there - probably whats causing the problem - ah i do in the file i have here, just neglected to paste them in the code

I just can't get the images to show up

blade007 · 6 Feb 2007 at 01:22

I did one a bit like that for this site

bodymech

I've borrowed this menu from somewehere else ... and just used it. It uses a vertical image, which then changes the offset depending on whether it's normal or hover.

lozza · 6 Feb 2007 at 01:45

blade007 said:
I've borrowed this menu from somewehere else ... and just used it. It uses a vertical image, which then changes the offset depending on whether it's normal or hover.

Yep got that sussed in terms of the code but i can't get the images to show when i preview,

Using DW in split view i see the normal state images in DW but nothing when previewed in the browser

Latest attempt using lists:

Code:

<!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>Untitled Document</title>
<style type="text/css">
<!--
#nav {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	overflow: hidden;
	}
#navigation {
	height: 200px;
	width: 221px;
}

#nav li {
	margin: 0; 
	padding: 0;
	list-style: none;
	display: inline;
	}

#nav a {
	float: left;
	padding: 16px 0 0;
	overflow: hidden; 
	height /**/:0px; /* for IE5/Win only */
	}
	
#nav a:hover {
	background-position: 0 -35px;
	}

#home a  {
	width: 221px;
	background: url(/public_html/navigation/images/buttons/homepage.png) no-repeat;
	}
#about a  {
	width: 221px;
	background: url(/public_html/navigation/images/buttons/about.png) no-repeat;
	}
#services a  {
	width: 221px;
	background: url(/public_html/navigation/images/buttons/services.png) no-repeat;
	}
#references a  {
	width: 221px;
	background: url(/public_html/navigation/images/buttons/references.png) no-repeat;
	}
#contact a  {
	width: 221px;
	background: url(/public_html/navigation/images/buttons/contact.png) no-repeat;
	}
-->
</style>
</head>

<body>
<div id="navigation">
<ul id="nav">
  <li id="home"><a href="#">Home</a></li>
  <li id="about"><a href="#">About</a></li>
  <li id="services"><a href="#">Service</a></li>
  <li id="references"><a href="#">References</a></li>
  <li id="contact"><a href="#">Contact</a></li>
</ul></div>
</body>
</html>

Augmented · 6 Feb 2007 at 09:48

Harib0 said:
Using DW in split view i see the normal state images in DW but nothing when previewed in the browser

The references to your image files in the CSS are probably pointing to the wrong URL. Typically /public_html/ is the root folder, so don't include it at the start of your image references.

This technique of rollover is commonly known as a 'No-Preload Rollover' - see http://wellstyled.com/css-nopreload-rollovers.html.

lozza · 6 Feb 2007 at 10:00

Augmented said:
The references to your image files in the CSS are probably pointing to the wrong URL. Typically /public_html/ is the root folder, so don't include it at the start of your image references.

This technique of rollover is commonly known as a 'No-Preload Rollover' - see http://wellstyled.com/css-nopreload-rollovers.html.

Changed it to background: url(../images/buttons/contact.png) no-repeat; and to background: url(/navigation/images/buttons/contact.png) no-repeat; but the images still don't show up.

that site is the one i followed for the second attempt

Ahh i've sussed it out it needs to be: background: url(images/buttons/about.png) no-repeat;