horizontal menu using css and jpgs - help needed. [Archive]

View Full Version : 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/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 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>
<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>
<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

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.

Ankou

April 3rd, 2006, 03:29 PM

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

:stare: 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 3rd, 2006, 03:32 PM

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 3rd, 2006, 04:53 PM

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 3rd, 2006, 05:31 PM

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

Ankou

April 3rd, 2006, 05:45 PM

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">

<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> </p>
<p> </p>
<p> </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.

salvador marley

April 3rd, 2006, 05:53 PM

Ankou and bwh2,

Wow guys I don't know what to say or how to thank you both. This is wonderful and works great in both ie and firefox.

Ankou, sure if you want to check over the code and look for any glitches great.

Once again sincerest thanks, I will myself now look deeply at what is happening in the code and use this also as a learning process. :)

bwh2

April 3rd, 2006, 05:59 PM

no problem.

Ankou

April 3rd, 2006, 06:06 PM

Yeah like bwh2 said, no problem.

I'll try to have a look at the code tonight, but the brief look I had at it looked pretty good.

Once again sincerest thanks, I will myself now look deeply at what is happening in the code and use this also as a learning process. :)
:D That's the best way to look at any problem/bug/error/etc. - which means over time I've had many, many learning processes!

Ankou

April 4th, 2006, 12:07 AM

I took a peek at the rest of the code and it looks fine as far as I can tell. The only thing I'd suggest is a few things in your CSS:

Your paragraph rule (p{...}) has line-height twice.

Make use of CSS shorthand methods when available to you.

When a CSS rule is inherited there's no need to set the value to the same value as the parent.

And because of the one above... If you're not planning on making a lot of changes b/n font-family values, you can call font-family in the body ruleset to make life easier if you make changes down the road.

I'm sure most of that you're already aware of and you may already do those things. I'm sure since it's just a site mock-up it's in the rough stage of development. I just thought I'd mention it incase someone new to CSS grabs the file to have a look at it. :)

salvador marley

April 5th, 2006, 08:08 AM

Thanks Ankou. I just got a nasty shock when I looked at this in opera. There's an odd gap between the buttons and the header (does this also in mozilla but fine in firefox). see enclosed pic.

I looked at the css and cannot see any margins that might be causing this. I wonder what it is?

Grrrrrrr....browsers.

cheers

bwh2

April 5th, 2006, 10:34 AM

can you repost your html and css?

salvador marley

April 5th, 2006, 12:53 PM

bwh2, I fixed it. I had added some extra padding to the h1 element and that was causing it, well it was either padding or margins i can't remember but it was odd.

:)

thanks