How to create this navigation

Associate
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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?
 
Soldato
Joined
12 Jun 2005
Posts
5,361
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:

7e49c81439_Untitledpng.png


Then you just change the background position on hover.

Hope that makes sense.
 
Last edited:
Associate
OP
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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.
 
Soldato
Joined
12 Jun 2005
Posts
5,361
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.
 
Associate
OP
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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
 
Last edited:
Joined
12 Feb 2006
Posts
17,301
Location
Surrey
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)
 
Associate
OP
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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:

7e49c81439_Untitledpng.png


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
 
Associate
OP
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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
 
Last edited:
Associate
Joined
16 Jun 2003
Posts
1,858
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.
 
Associate
OP
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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>
 
Soldato
Joined
18 Oct 2002
Posts
5,464
Location
London Town
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.
 
Associate
OP
Joined
22 Dec 2004
Posts
1,828
Location
Southampton, UK
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;
 
Last edited:
Back
Top Bottom