Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: CSS Horizontal Menu

  1. #1
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS Horizontal Menu

    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):

    Click image for larger version. 

Name:	website.jpg 
Views:	186 
Size:	19.8 KB 
ID:	5144

    Here is my css script:
    Code:
    <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:
    Code:
    			<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!!!
    Last edited by Beverleyh; 07-17-2013 at 11:11 PM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

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

    You can download everything here: http://fofwebdesign.co.uk/template/_...st-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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you! Thank you! Thank you!

  9. #9
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Horizontal menu, get rid of extra space and center menu
    By bo0bytrap in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-11-2012, 07:53 PM
  2. Vista Aero Buttons Menu Variation (Horizontal CSS Menu)
    By waskol in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 05-15-2009, 01:40 AM
  3. Trying to make a menu similar to the horizontal menu on www.atlantasky.com
    By moogprodigy in forum Looking for such a script or service
    Replies: 0
    Last Post: 01-23-2009, 08:07 PM
  4. Replies: 2
    Last Post: 09-26-2008, 01:49 PM
  5. Making CSS Horizontal Hover Menu a vertical menu?
    By Clueless2005 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-04-2005, 03:01 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •