CSS Horizontal Menu

[justinrigsby]

I am having difficulty with a horizontal menu. I am using images, and it is placing a small shadow/border on top and bottom of the images as you can see in the screenshot below (outlined in yellow to show the area with the border):

5144

Here is my css script:


<style type="text/css">
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-image:url('../updated_nav_bar/right_bar.png');
background-size: 100% 45px;
background-repeat:no-repeat;
border-style:none; }
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
border-style:none;}
#nav li {
float: left;
border-style:none;}
#nav li a {
display: block;
padding: 0px 0px;
text-decoration: none;
font-weight: bold;
color: #069;
border-style:none;}
#nav li:first-child a {
border-style:none;}
#nav li a:hover {
color: #fff;
border-style:none;}
</style>

here is the code for the actual menu:


<div id="nav">
<ul>

<li><a href="#"><img border="0" src="images/menu_buttons/stationary/home.png" width="63" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/about_us.png" width="90" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/products_and_services.png" width="178" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/support.png" width="83" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/my_account.png" width="117" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/contact_us.png" width="110" height="45"></a></li>
</ul>
</div>
Any help would be greatly appreciated.

Thanks!!!

[Beverleyh]

We can't really tell much from the information you've posted. Im guessing that there is other CSS at play which is affecting things - could be a line-height or padding or margin?

Is the problem browser specific? Different browsers have different default paddings and margins so you might need to consider an element reset.

Anyway, we cant say much more without seeing it all in context so please post a link to your page.

[justinrigsby]

I had to upload it to the server : http://www.firstdefensealarms.com/New/New%20Website

please ignore the size difference in the home button versus the rest - as it needs redesigned.

also, just for reference, I have completely removed all code from the page and simply left the logo, nav bar, and table structure - and have still gotten this problem.

Thanks for all your help!

[Beverleyh]

OK - the shadow problem comes from the png transparencies "doubling-up". So say you have a 10% shadow transparency on the base menu bar image - once your button images go on top, which also have a 10% shadow transparency, you actually get the equivalent of a 20% transparency which makes the shadow look way too dark.

What I would be tempted to do in your case is to try the buttons images without the transparent shadow at the edge - crop them flush with the blue and see how that goes.

However, its not a great idea to use images alone for menu buttons because search engines cannot read the text that's embedded into them, which means that search spiders have no text-based cues to direct them around your website. This can have a negative effect on SEO. I see that you're also relying heavily on JavaScript generated menus elsewhere, which can again pose the same problem, so please make sure you include an easily accessibly sitemap, with reliable HTML markup, to help visitors and bots alike.

[justinrigsby]

I have hired a designer to do all image work for me - could you tell me a little more specifically what I need to tell him to do?

Also, is there another menu option that you have in mind for images with the stretched navigation background? Although I know SEO will be a little tough, I really like the look of these images.

Thanks again!

[Beverleyh]

There's no problem with the image as the base bar, but you could eliminate the actual button images altogether, which works out better for SEO and also stops the double-shadow issue. In effect, the <li>s would be transparent - no seperate button images, just text - but the base bar image would show through exactly like you have it now.

To be honest, you could totally do it all with CSS3 - the gradient and the shadow (example, http://fast-edit.co.uk/ and http://fast-apps.co.uk/ dont use images in the menu bar at all) - but an image is easier to get your head around, and pretty convenient now that you already have it.

If you want to go with your current image buttons, tell your designer to crop the shadow off the buttons so they are narrower and only contain the blue part, that's the best way to describe what I mean. He will then be able to save the images as a jpg without any transparency - it won't be needed.

Alternatively, I can prepare a bit of CSS for you, but I won't be able to do it until I'm back on PC in the morning (on iPhone for the evening now). If someone steps in to do that for you in the meantime, that's great but otherwise I'll check-in and drop you something in about 12 hours.

[Beverleyh]

Here's your revised menu: http://fofwebdesign.co.uk/template/_testing/first-defense/first-defense.htm

You can download everything here: http://fofwebdesign.co.uk/template/_testing/first-defense/first-defense.zip

This menu uses CSS hover transitions - no scripts. I just lightened up some sample hover images so you can see the hover effect.

I've condensed the button images into one image sprite and reduced the base bar to a 1px wide images that is tiled horizontally. There are only 2 images in total now, so that's reduced the weight of the actual images by half and knocked off 5 http requests (faster load times)
I've also provided the Photoshop project file so you can makes changes as necessary.

This menu is also search engine friendly as it includes actual text between the <a></a> tags. I've just used some CSS to offset/hide it and allow your images (with embedded text) to show through.

Tested in IE7-8-9-10, Chrome, Firefox, Safari, Opera, iPhone 4S and iPad Mini.

[justinrigsby]

Thank you! Thank you! Thank you!

[justinrigsby]

I have another question - how can I do a drop down menu with this setup? when I do, it puts the drop down portion at the top left of the screen?

Thanks for all your help thus far!

[Beverleyh]

That would be moving the goal posts - You would probably be best off looking at the list based menu scripts in the script library. I'm thinking that either of the top 2 here would be easiest to "add on". http://www.dynamicdrive.com/dynamicindex1/indexb.html

[justinrigsby]

Sorry to keep bugging you, but you have been a tremendous help!

I have uploaded my new problem with trying to get the drop down menu to load - can you help me with why the drop down portion isn't working? Thanks!!!!

http://www.firstdefensealarms.com/New/New%20Website

[Beverleyh]

What script are you using?

From the markup, the JavaScript initialisation doesn't look right - its referencing a menu id of "colortabs" but I don't see a menu with that id - just a "nav" id

[justinrigsby]

http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

I was trying to get this to work without referencing a separate CSS sheet. I am very bad with CSS - so I didn't know how else to handle it since I was referencing the sheet that was created for the menu, and referencing your nav css code that you created for me.

Thanks again for your help!

[Beverleyh]

Yes, you'll still need to change the JavaScript initialisation from "colortabs" to "nav" - that may be all that's needed but I can't check anything in detail as I'm on iPhone for a while now.

I still think that one of the other 2 scripts will be easier for you to add-on though - did you try this one: http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm (any particular reason why you went for the tabs instead?)

It might help to use the standalone menu page that I made for you while you implement and style these drop-downs and then gradually build up the rest of your page around it again.

[justinrigsby]

That did it... Thanks!!!

[Beverleyh]

Afterthought: make sure you use a valid DOCTYPE on you web page - not having one can cause scripts and some CSS to fail (or do unexpected things). Again, you can reference the page I provided for one.

Also, I'm having a hard time with your page on iPhone - its taking a really long time to load so I imagine that your images will need optimising. You're using .png, but for photographs, .jpeg is standard, optimised to about 60-70% quality. Head over to the DD image optimisation tool to convert and optimise your pics. You might be surprised with how fast the page loads afterwards once the lightweight pics are being used: http://tools.dynamicdrive.com/imageoptimizer/