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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Span with CSS Hover

    PHP Code:
    <style type="text/css">
    .
    nav_block
    {
        
    padding4px;
        
    margin-right10px;
        
    displayinline;
        
    background-color:#09F;
    }

    .
    nav_block a:hover
    {
        
    background-color:#FFFFFF;
        
    color#000000;
        
    padding4px;
    }
    </
    style>

    <
    span class="nav_block"><a href="test">Home</a></span
    That's my code, but when you hover over the span, there is extra blue padding on the left and right of it, how do I fix it?
    Last edited by arunforce; 05-19-2010 at 04:51 PM.

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    I'm guessing you want the nav block to change color on hover?

    if so this should work:
    Code:
    .nav_block:hover {
    
    }

    if it is for a menu you can make each link an image, ofcourse this has its own advantages and disadvantages and is frustrating to get a hold of if you are new to css.

    or if this is just to have a background to a link all you need to do is set up a class for nav links and give them a bg color and some padding to make the background area bigger.

    let me know if you need help on that.

    hope this is helpful.
    Last edited by shepherd; 05-19-2010 at 03:14 AM.

  • Users who have thanked shepherd for this post:

    arunforce (05-19-2010)

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    if you mean you want to make a menu like that one this was a really useful tutorial for me:

    http://www.webdesignerwall.com/tutor...nced-css-menu/

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Firefox seems to have an issue with it, Chrome doesn't. I'll just convert it to javascript.

    Thanks, though.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by arunforce View Post
    Firefox seems to have an issue with it, Chrome doesn't. I'll just convert it to javascript.

    Thanks, though.
    It looks like you didn't understand the difference between an inline element and a block element

    A block element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). Examples of native block elements: DIV, P...

    An inline element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width. Examples of native inline elements: SPAN, A...

    You should probably use some block elements, floated:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .nav_block
    {
    width:100px;
    margin-right: 10px;
    background-color:#09F;
    float:left;
    }
    .nav_block a
    {
    text-align:center;
    display:block;
    padding:4px;
    }
    .nav_block a:visited{
    color:#000;
    }
    .nav_block a:hover{
    background-color:#FFF;
    color: #000;
    }
    .clear{
    clear:both;
    }
    </style> 
    </head>
    <body>
    <div>
    <div class="nav_block"><a href="test">Home</a></div>
    <div class="nav_block"><a href="test">Products</a></div>
    <div class="nav_block"><a href="test">Contact</a></div>
    <div class="clear"></div>
    </div>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    arunforce (05-19-2010)

  • #6
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    It looks like you didn't understand the difference between an inline element and a block element

    A block element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). Examples of native block elements: DIV, P...

    An inline element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width. Examples of native inline elements: SPAN, A...

    You should probably use some block elements, floated:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .nav_block
    {
    width:100px;
    margin-right: 10px;
    background-color:#09F;
    float:left;
    }
    .nav_block a
    {
    text-align:center;
    display:block;
    padding:4px;
    }
    .nav_block a:visited{
    color:#000;
    }
    .nav_block a:hover{
    background-color:#FFF;
    color: #000;
    }
    .clear{
    clear:both;
    }
    </style> 
    </head>
    <body>
    <div>
    <div class="nav_block"><a href="test">Home</a></div>
    <div class="nav_block"><a href="test">Products</a></div>
    <div class="nav_block"><a href="test">Contact</a></div>
    <div class="clear"></div>
    </div>
    </body>
    </html>
    I know spans are natively inline (I read up on it recently when I was looking at a tutorial), I was swapping between divs and spans originally. I was thinking CSS would be a more efficient way to do it, but eventually I'm probably going to make the links have a dropdown. There's probably some hack to make a CSS dropdown, but it's probably messy.

    The reason I wasn't using floating divs was because I didn't want a defined width. It just hit me that I could make them inline and remove the custom width in your example, and it should work fine.

    Thanks.


  •  

    Posting Permissions

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