SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Horizontal Sprite Menu using ONE background image. Please help!

    I am looking to make a navigation menu similar to the following:

    http://www.coremediadesign.co.uk/web...ia_design.html


    This is the sprite image they use.

    http://img819.imageshack.us/img819/8185/menuo.png


    I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis.


    I have tried for a long time to get this working but have not been able to. Please help me out.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi NyK, welcome to SitePoint!

    You need to show us what you have so far, or what HTML you are trying to style. In reality, the answers are all on the site you linked to, but if you are having trouble building something similar, at least show us how far you've gotten. We don't know what you need yet. Do you at least have an image of what you are trying to build, such as a Photoshop mockup?

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome, ralph.m.

    I would just like to extract that menu from the site and get it to work as is. From there I can go on to make adjustments.


    Here's most of the CSS the one site I mentioned uses, but something may be missing:

    Code:
    #mnv {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        background-repeat:repeat-x;
        background-position:0 -98px;
        margin: 0;
        padding: 0;
        list-style:none;
    }
    
    
    #mnv, #mnv li, #mnv li a {
        background: url("http://img819.imageshack.us/img819/8185/menuo.png");
    }
    
    #mnv li, #mnv li a {
        width:137px;
        display:block;
    }
    
    #mnv li {
        height:47px;
        background-repeat:no-repeat;
        background-position:0 -49px;
    }
    
    #mnv li a {
        padding-top:12px;
        height:35px;
        text-align:center;
        font-size:14px;
        color:#f9f9f9;
        background-repeat: no-repeat;
        background-position: 0 0;
    }
    
    a:hover, #mnv li.act, #mnv li.act a ,#mnv li.act:hover {
        color:#333;
    }
    
    #mnv li,#mnv li a {
    float: left;
    }
    
    #mnv li a:hover,#mnv li a:active,#mnv li.act,#mnv li.act a,#mnv li.act:hover {
    background: none;
    }

    I tried using that and altering it, but no luck. I can't get the active tab to work even when I use <li class="act"> (as the site in question does).

    The positioning is also off due to the way they have coded things (the absolute positioning, left: 0, bottom: 0, etc). I tried adjusting all that and just broke it even more.


    The HTML is just:

    Code:
    <div style="width: 980px; text-align:left; margin:0 auto">
    <ul id="mnv">
    <li class="act"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    </ul>
    </div>

  4. #4
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, I think I got it to work. I'll post again if I run into more issues.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Hmm. You seem to be using absolute positioning for no good reason... You've got a DIV around it for nothing... You've really overcomplicated something simple here.

    Code:
    <ul id="mainMenu">
    	<li class="current"><a href="#">Link 1</a></li>
    	<li><a href="#">Link 2</a></li>
    	<li><a href="#">Link 3</a></li>
    	<li><a href="#">Link 4</a></li>
    </ul>
    Code:
    #mainMenu {
    	list-style:none;
    	overflow:hidden; /* wrap floats */
    	width:980px; /* also trips haslayout, wrapping floats IE */
    	margin:0 auto;
    }
    
    #mainMenu li {
    	display:inline; /* basically strip formatting and pretend these don't exist */
    }
    
    #mainMenu a {
    	float:left;
    	width:137px;
    	padding:16px 0;
    	text-align:center;
    	font:normal 14px/17px arial,helvetica,sans-serif;
    	background:url(images/menuo.png) 0 0 no-repeat;
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	background-position:0 -49px;
    }
    
    #mainMenu .current a {
    	background-position:0 -98px;
    }
    WAY simpler... should work all the way back to IE 5.x

  6. #6
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I certainly wasn't trying to complicate it, lol. I just haven't used menus like this before now. Thank you very much for simplifying things, deathshadow60! It's much appreciated!

    Is there any way to center these tabs?

    Thank you!


    P.S. What is the function of making a font 14px/17px?

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    P.S. What is the function of making a font 14px/17px?

    It's good typography. 14px font size/ 17px line height.. gives it "breathing room"

  8. #8
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I didn't know line-height could be combined like that. Thanks.


    deathshadow60 (or anyone who can help):

    The code you provided works great; however, for some reason it's bigger than 980px. It's more like 1040px or so and there's more space to the left of the first tab than there is to the right of the last tab.

    Any idea why or how this can be fixed?

    Thank you.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Have you got a link to your current code? I assume the code above is out of date now.

  10. #10
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still using the code that was provided to me.

    The layout I'm using is from Matthew James Taylor, but wrapped in a 980px div as per his instructions:
    http://matthewjamestaylor.com/blog/h...uirks-mode.htm

    At the top of the layout, before the 980px wrap div, I have this header (so part of the layout spans 100%):


    CSS
    Code:
    #header {
    	width:100%;
    	height: 150px;
    	background: black;
    	padding:0;
    	margin:0;
    }

    HTML
    Code:
    <div id="header">
    <div style="height: 101px">&nbsp;</div> /* This is just a filler for now */
    <ul id="mainMenu">
    	<li class="current"><a href="#">Tab 1</a></li>
    	<li><a href="#">Tab 2</a></li>
    	<li><a href="#">Tab 3</a></li>
    	<li><a href="#">Tab 4</a></li>
    	<li><a href="#">Tab 5</a></li>
    	<li><a href="#">Tab 6</a></li>
    	<li><a href="#">Tab 7</a></li>
    </ul>
    </div>


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
  •