SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Using background image for nav link

    How do I make a navigation link to have a background when the mouse is hovered on it, I have attached a screenshot that shows the link.
    Please understand that the link doesn't have a background when is not active or hovered on.

    Thanks guys
    Attached Images Attached Images

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use the pseudo class :hover on the link.

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did that, but the whole background wasn't showing

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works for me, so post your code then, and we can try to help you fix it.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by parkerproject View Post
    I did that, but the whole background wasn't showing
    Background images don't force an element to be larger to fit the background image. The background will be cropped if it's larger than the element.

    If you want a full background image to show you'll need to set a height / width on the element.
    Code css:
    a {
      display: block;
      height: 20px;
      line-height: 20px;
    }
    links are inline by default so height / width won't apply unless you set display to block or inline-block.

  6. #6
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I just code that with CSS without images?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by parkerproject View Post
    Can I just code that with CSS without images?
    Based on your image above, yes.

    - Set a background color of white on the link on :hover
    - apply rounded corners to the link
    - using :before or :after, create the little white triangle at the bottom that also appears just on hover.

  8. #8
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    I am able to do the first two;
    - Set a background color of white on the link on :hover
    - apply rounded corners to the link

    But can't figure out the best way to do the third;
    - using :before or :after, create the little white triangle at the bottom that also appears just on hover.

    Here is my markup
    Code HTML4Strict:
    <nav class="top-nav">
    	<ul>
    		<li><a href="" class="home">home</a></li>
     
    	</ul>
    </nav>

    Code CSS:
    .top-nav ul li a{
        padding: 5px;
        text-decoration: none;
        text-transform: capitalize;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
     }
     
    .top-nav ul li a:hover{
    	 background:#fff
    }

    I'm not that good with navigation in CSS

    Thanks for helping

  9. #9
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I came across an article http://www.yuiblog.com/blog/2010/11/...ithout-markup/

    For anyone interested on how i fixed mine.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ah, cool, you have probably found the answer already before I could reply. This is one way to do it, anyhow:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
    body {background: #ccc;}
    ul {list-style: none; }
    li {float: left; margin-right: 4px; position: relative;}
    li a {padding: 5px 10px; display: block; text-decoration: none;}
    li a:hover {background: white; border-radius: 2px; }
    li:hover a:after {
    	position: absolute;
    	display: inline-block; 
    	width: 0;   
    	height: 0; 
    	border-width: 5px;
    	content: ' ';
    	border-top-style: solid;
    	border-top-color: #fff;
    	border-bottom-style: solid;
    	border-bottom-color: transparent;
    	border-left-style: solid; 
    	border-left-color: transparent;
    	border-right-style: solid; 
    	border-right-color: transparent;
    	top: 100%; left: 40%;
    }
    </style>
    </head>
    
    <body>
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Services</a></li>
    </ul>
    </body>
    </html>

  11. #11
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph, yours helped because I was having problem applying the :after to hover.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool. Only thing I didn't get quite right is the centering of the arrow. This is a little better, though not quite sure why!

    Code:
    li:hover a:after {
    	position: absolute;
    	display: inline-block; 
    	width: 0;   
    	height: 0; 
    	border-width: 5px;
    	content: ' ';
    	border-top-style: solid;
    	border-top-color: #fff;
    	border-bottom-style: solid;
    	border-bottom-color: transparent;
    	border-left-style: solid; 
    	border-left-color: transparent;
    	border-right-style: solid; 
    	border-right-color: transparent;
    	top: 100%; 
    	left: 50%;
    	margin-left:-5px;
    }

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This is a little better, though not quite sure why!
    The 50% is the left edge of the element and if the element is 10px wide it needs to be then shifted back leftwards by 5px to be centred

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The 50% is the left edge of the element and if the element is 10px wide it needs to be then shifted back leftwards by 5px to be centred
    Duh, I was thinking of it as 5px wide, not 10px. I don't even understand my own code.


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
  •