horizontal menu using css and jpgs - help needed.

**salvador marley** · April 2nd, 2006, 12:41 PM

I have searched google and not found exactly what I need so I have come here hoping that someone with css knowledge can help me.

I am trying to create a horizontal menu with css using jpg images rather than text.

the page consists of a header, buttons underneath (4 buttons), under this the content area and under that the footer. So to many here its a straight forward layout.

I pressume all this should take place in a container div so it can be centered on screen.

My question is this, If I were to upload a file with the graphic images in, would you take a look and see if it would be possible to put it together so I can see what is going on? I can do vertical menus ok - but this has me stuck

Thank you.

**Ankou** · April 2nd, 2006, 03:14 PM

Since I'm not sure exactly what you're looking for... yeah upload what you need and I'll have a look at it for ya.

**salvador marley** · April 2nd, 2006, 06:44 PM

thank you man. here is the zip - when unzipped there is a file called read me

**hkl** · April 3rd, 2006, 10:25 AM

hey buddy,

ill take a look at this when i get back from asda *does the asda slap on the back pocket, squashing the butterflies*.

u could do what i do eons ago.

http://www.hklhangout.co.uk/websites/v1/

then do the buttons like this

http://www.simplebits.com/notebook/2...rollovers.html

just a quick fix. ill look at it more closely when i get back, no doubt css guru's richter and ankou will sort u out before get back.

p.s ur buttons could be done without images

**salvador marley** · April 3rd, 2006, 10:48 AM

thanks hkl,

The file has been downloaded 3 times so yeah perhaps one of the other guys is looking into it. All I can say is thanks and I will try and help someone out on one of the forums as an extra thanks to the community - I have in the past made up plenty of fla files to help others here, so i don't feel too bad about asking

cheers all.

**bwh2** · April 3rd, 2006, 11:06 AM

i did this sort of rushed, but this is the approach i would take...

HTML Code:

<html>
<head>

<style>

/* nav list and hovers */
#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#nav li {
	display: inline;
	}
#nav a {
	width: 150px;
	height: 80px;
	background-color: #333;
	float: left;
	border-width: 0 0 5px 0;
	border-style: solid;
	border-color: #333;
	margin: 2px;
	}
#nav a:hover {
	border-color: #f36;
	}
#nav span {
	display: none;
}

/* nav bg images */
.nav_home {
	background-image: url('BUTTONS/home.gif') no-repeat;
}
.nav_contact {
	background-image: url('BUTTONS/contact.gif') no-repeat;
}
.nav_regulars {
	background-image: url('BUTTONS/regulars.gif') no-repeat;
}
.nav_links {
	background-image: url('BUTTONS/links.gif') no-repeat;
}
</style>

</head>
<body>
<ul id="nav">
	<li class="nav_home"><a href="#" title="Home"><span>Home</span></a></li>
	<li class="nav_contact"><a href="#" title="Contact"><span>Contact</span></a></li>
	<li class="nav_regulars"><a href="#" title="Regulars"><span>Regulars</span></a></li>
	<li class="nav_links"><a href="#" title="Links"><span>Links</span></a></li>
</ul>
</body>
</html>

you do it this way because of accessibility. anyone with style sheets turned off can still read the nav easily (this includes screen readers). this is just an extension of content vs. presentation. really, those nav images aren't the content, just the presentation. so the images don't need to be present in the html, just the css.

i haven't actually tried this with the images provided, so you might have to compensate for filenames, paths, width, height. but the concept works.

**salvador marley** · April 3rd, 2006, 11:34 AM

thanks very much for that code. I rectified the image paths but i dont see the images for some reason when i test in the browsers.

**simplistik** · April 3rd, 2006, 11:43 AM

http://www.alvit.de/handbook/#navmenus there's a whole list of navs and techiniques there, I've viewed all the links at one point and time and I know some of them use images.

**salvador marley** · April 3rd, 2006, 12:02 PM

thanks for that link simplistic

nice link for all sorts of stuff.

**bwh2** · April 3rd, 2006, 12:32 PM

whoops, guess i should have tested first. here's what works:

HTML Code:

<html>
<head>

<style>

/* nav list and hovers */
#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#nav li {
	display: inline;
	width: 112px;
	height: 40px;
	}
#nav a {
	display: block;
	width: 112px;
	height: 40px;
	float: left;
	border-width: 0 0 5px 0;
	border-style: solid;
	border-color: #333;
	margin: 2px;
	}
#nav a:hover {
	border-color: #f36;
	}
#nav span {
	display: none;
}

/* nav bg images */
.nav_home a {
	background: url('buttons/home.jpg') no-repeat;
}
.nav_contact a {
	background: url('buttons/contact.jpg') no-repeat;
}
.nav_regulars a {
	background: url('buttons/regulars.jpg') no-repeat;
}
.nav_links a {
	background: url('buttons/links.jpg') no-repeat;
}
</style>

</head>
<body>
<ul id="nav">
	<li class="nav_home"><a href="#" title="Home"><span>Home</span></a></li>
	<li class="nav_contact"><a href="#" title="Contact"><span>Contact</span></a></li>
	<li class="nav_regulars"><a href="#" title="Regulars"><span>Regulars</span></a></li>
	<li class="nav_links"><a href="#" title="Links"><span>Links</span></a></li>
</ul>
</body>
</html>

your images will look funny at first b/c you were showing margin through imagery, not css margin. so you'll have to fix your images.

btw simp, that looks like a pretty handy site.

**hkl** · April 3rd, 2006, 01:58 PM

hey buddy,

my css is most likely terrible. Done it without using the images if thats ok? I hope its useful to you.

http://www.hklhangout.co.uk/menu/

http://www.hklhangout.co.uk/menu/menu.css

**hkl** · April 3rd, 2006, 02:03 PM

holy bijesus. I just looked at the link by simp. I skimmed over his post thinking he posted listomatic. then i actually looked at it. nice link. *bookmarked*

**salvador marley** · April 3rd, 2006, 02:15 PM

thanks for that hkl. I can sort of get that far. Its just getting the images to work thats causing the problem and aligning them on the page is will be tough. But thank you for your help

i'm now going to look at the new code sent in by bwh2.

I appreciate all the help from you guys

**bwh2** · April 3rd, 2006, 02:28 PM

Originally Posted by hkl

http://www.hklhangout.co.uk/menu/

btw hkl, you should check how that renders in IE7.

SM, my code doesn't try to center anything or include the header. i was mostly shooting at the nav. anyway, you will want to throw everything into a container and center the container. if i get a chance later i can show you what i mean.

**salvador marley** · April 3rd, 2006, 02:35 PM

bwh2,

thanks man - yeah the buttons show perfect now. This is my plan now, build the page with html and css using simple divs for layout - see how far I get and then possibly write back when i hit a problem - the next time i write back i am hoping that the fix ups will be pretty straight forward

ps yeah i've contained stuff in a main div in the past and centered that ok.

thanks once again for your input.