Horizontal menu using css and jpgs - help needed

salvador_marley · April 2, 2006, 4:41pm

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 2, 2006, 7:14pm

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 2, 2006, 10:44pm

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

hkl · April 3, 2006, 2:25pm

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/2003/09/30/accessible_imagetab_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:D

salvador_marley · April 3, 2006, 2:48pm

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 3, 2006, 3:06pm

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


<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 3, 2006, 3:34pm

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 3, 2006, 3:43pm

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 3, 2006, 4:02pm

thanks for that link simplistic

nice link for all sorts of stuff.

bwh2 · April 3, 2006, 4:32pm

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


<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 3, 2006, 5:58pm

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 3, 2006, 6:03pm

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 3, 2006, 6:15pm

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 3, 2006, 6:28pm

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 3, 2006, 6:35pm

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.

Ankou · April 3, 2006, 7:29pm

Boy you’re gone for about a day and you come back to find that you’re not even needed to help anymore. Haha!

salvador_marley · April 3, 2006, 7:32pm

oh no ankou, i’m still working on this and believe me all help is needed - I still cant put this thing together. been sat here 5 hours now and still nowhere near

salvador_marley · April 3, 2006, 8:53pm

I think I’m almost there but it is still wrong - its nearly right in firefox but messes up completely in IE. This is the last post i’m going to make about this because you must be bored with it now and its driving me crazy. hours and hours of work.

I cant believe this is so difficult. I see these horizontal menus all the time on css based layouts.

thanks once again and here is the file if you’re curious

bwh2 · April 3, 2006, 9:31pm


 .center_text {
	margin-right: auto;
	margin-left: auto;
	**clear: both;**
}

Ankou · April 3, 2006, 9:45pm

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="councilstyles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<div class="top"></div>
<div class="middle">
<div id="nav">
<!-- The UL below had id="nav" but you already used id="nav" in the div above. Only use an ID once per page. -->
<ul class="navUL">
 <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>
</div>
<div class="center_text">
<h1>Home</h1>

<p>askasdkaskdaksdka sda sda sd asda sdasd asd asd asd asd asd asd asd asd sd
  asd asd asd asd asd asd asd asd asd </p>
<p>asdkasdkasdkasdkasdkasd</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div></div>
<div class="footer"></div>
</div>
</body>
</html>

CSS:

/* CSS Document */
body {
	background-color: #333333;
	margin-top: 0px;
	padding-top: 0px;
}
.container {
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	width: 518px;
	background-color: #FFFFFF;
}

.top {
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	height: 119px;
	width: 518px;
}

.middle {
	background-image: url(central.jpg);
	background-repeat: repeat-y;
	height: auto;
	width: auto;
}

/* nav list and hovers */

#nav {
	color: #999999;
	font-size: 12px;
	background-image: url(middle.jpg);
	font-family: Geneva, Arial, Helvetica, sans-serif;
	float: left;
	margin-top: 0px;
	margin-left: 18px;
	width: 450px;
margin: 0 auto;
text-align: center;

}

#nav ul.navUL{
	color: #999999;
	font-size: 12px;
	background-image: url(middle.jpg);
	font-family: Geneva, Arial, Helvetica, sans-serif;
	width: 450px;
padding: 0;
margin: 0 0 0 36px;
list-style: none;
}


#nav li {
margin: 0;
padding: 0;
	display: inline;
	width: 107px;
	height: 35px;
	}
#nav a {
	display: block;
	width: 107px;
	height: 35px;
	float: left;
	border-width: 0 0 5px 0;
	border-style: solid;
	border-color: #333;
	margin: 2px;
	}
#nav a:hover {
	border-color: #ae416a;
	}
#nav span {
	display: none;
}

/* nav bg images */
.nav_home a {
	background: url(buttons/homeactive.jpg) no-repeat;
}
.nav_contact a {
	background: url(buttons/contactactive.jpg) no-repeat;
}
.nav_regulars a {
	background: url(buttons/regularsactive.jpg) no-repeat;
}
.nav_links a {
	background: url(buttons/linksactive.jpg) no-repeat;
}

h1 {
	font-size: 14px;
	color: #AF406A;
	margin: 0px;
	padding-top: 10px;
	padding-left: 45px;
	padding-bottom: 2px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

p {
	font-size: 0.8em;
	line-height: normal;
	color: #333333;
	margin: 0px;
	padding-left: 45px;
	line-height: normal;
	width: auto;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	padding-right: 45px;
}


.footer {
	background-image: url(footer.jpg);
	background-repeat: no-repeat;
	height: 93px;
	width: 518px;
}

 .center_text {
clear: both;
	margin-right: auto;
	margin-left: auto;
	
}

Not perfect, but it works. I don’t have time to really look at the code right now to check everything or to break all the code down to make sure everything is fine, but it gets you a step closer (if you’re not already).

You were using id=“nav” twice in your HTML. I corrected that and put a comment in the HTML code for you. I’ll look at this more later tonight when I get a bit more time.

Topic	Replies	Views
CSS menu (list) web dev	69	September 2, 2005
Menu with dividing square (css/html)	134	September 20, 2008
Building a horizontal navigation menu - Need help web dev	108	February 14, 2007
CSS: Horizontal Boxes for Art Gallery Nav web dev	108	August 9, 2005
Horizontal XML menu	38	December 16, 2004

Horizontal menu using css and jpgs - help needed

Related topics