Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Trying to get an image to show up behind text in a button

    Hello all,

    I'm trying to get an image to show up behind text in my main nav menu. The links are text, and on hover, the links change color and I would like to have an image show up behing the text as a background image. The trouble is, only part of the image is showing up on hover. I've tried everything I know, which admittedly isn't much. I have been trying to search out this answer, but I don't think I'm using the correct search parameters because I keep coming with sites showing images using all images, which isn't exactly what I want. Any help would be greatly appreciated.

    Here's how I would like the hovers to work:


    Here's what's happening:



    Here's my code thus far:

    Code:
    *  {margin: 0; padding: 0:}
    
    .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    .group { display: inline-block; clear: both; }
    /* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */
    
    body {background:url(images/sustBG.jpg); background-repeat:repeat-x; background-color:#660000; font: 14px/1.4 Arial sans-serif; color:#660000}
    
    
    #wrapper  {width: 1044px; margin: 0 auto;}
    
    #mainContent  {position:relative; width: 1044px; margin-top:25px; background:#fff;}
    
    #header {position:relative; padding:20px 20px;}
    
    #logo {width:300px; float:left;}
    
    #logo p {margin-left:-9999px;}
    
    #mainNav {width:700px; margin-top:40px; float:right;}
    
    #mainNav  ul  {margin-right:3px; margin-bottom:2px; list-style:none; font-size:1.3em;}
    
    #mainNav li {display:inline-block; width:101px; height:42px; text-align:center; }
    
    #mainNav li a {color: #660000; text-decoration:none; width:101px; height:42px;}
    #mainNav li a:hover {color: #cc3333; text-decoration:none; width:101px; height:42px; background-image: url(images/nav-button.png);}

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    #mainNav li a:hover {color: #cc3333; text-decoration:none; width:101px; height:42px; background-image: url(images/nav-button.png); background-position: center center;background-repeat: no-repeat;}
    this might do it.

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for your help, but the problem still exists. What's happening is that the image is "appearing" in the bounding box around the text to which the link is attached. That's why I cannot see the entire image. Not sure even how to ask what I need to try.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I'm unsure of the precise explanation but the 'a' tags are inline elements and ignore the height and width settings.

    Try removing the height and width from the li tags' css, and adding these settings to the a tags:
    Code:
    #mainNav li a {
        width: 101px; height: 42px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    The alignment options are need to push the links to the centre of the cells.
    (The li tags don't need the height/width - they will stretch to accommodate the a's.)

    Added: Actually, inline elements always ignore the height and width (of course!) so their display property needs to be changed - or they could be floated (or play with line-height (ugh)). Andy.
    Last edited by AndrewGSW; 05-15-2011 at 01:24 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    OliveStreet (05-15-2011)

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    I would have thought simply adding padding to the appropriate element would increase its width and/or height to allow all the image to appear.

  • #6
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That did it. Thank you! I am unfamiliar with the
    Code:
    display: table-cell;
    , but that did. Thanks again.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by bullant View Post
    I would have thought simply adding padding to the appropriate element would increase its width and/or height to allow all the image to appear.
    That occurred to me but the element's box needs to be the size of the background image, so padding alone won't get there (without changing the display property).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by OliveStreet View Post
    That did it. Thank you! I am unfamiliar with the
    Code:
    display: table-cell;
    , but that did. Thanks again.
    be careful using styles like table-cell if browser compatibility is an issue because not all browser versions support it.

    If you want to guarantee browser compatibility, then you will have to use other styles.

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by AndrewGSW View Post
    That occurred to me but the element's box needs to be the size of the background image, so padding alone won't get there (without changing the display property).
    To be honest, I only had a quick look at the op's problem. If all the images are the same width then I would have thought either setting an element width to the width of the image or adding padding where required would allow all the image to be displayed. Maybe it wouldn't work in this situation.

    But in either case, adding padding or whatever could get messy if image sizes change or vary.

    Normally in a situation like this, I would use sliced images which create the illusion of a menu button expanding/contracting as the text within the button changes dynamically or however.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by OliveStreet View Post
    That did it. Thank you! I am unfamiliar with the
    Code:
    display: table-cell;
    , but that did. Thanks again.
    No probs. 'display: table-cell;' means that it behaves similar to a table-cell. So it's inline but does obey the height and width settings (unlike a standard 'a' tag), and enables us to also use 'vertical-align:center;' - which is nice
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by bullant View Post
    To be honest, I only had a quick look at the op's problem. If all the images are the same width then I would have thought either setting an element width to the width of the image or adding padding where required would allow all the image to be displayed. Maybe it wouldn't work in this situation.

    But in either case, adding padding or whatever could get messy if image sizes change or vary.

    Normally in a situation like this, I would use sliced images which create the illusion of a menu button expanding/contracting as the text within the button changes dynamically or however.
    I assumed the op was looking to keep the buttons the same size, and just use short link text so that they all fit within the buttons.

    Setting the height/width of the containing li elements had no influence, because of the default inline behaviour of the 'a' elements. I suppose we could set the image as a background for the li elements (?) but then we still have the issue of centre-ing the links.

    I can't quite see how padding would assist? Regards, Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Padding can increase the width and height of inline elements but I would need to see the op's html as well and not just the css to see exactly what is going on.
    Last edited by bullant; 05-15-2011 at 02:34 AM.


  •  

    Posting Permissions

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