SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with background image and padding please can you help stop image from moving

    Hi, had a brain freeze with background image and padding here.

    I've set up an unordered list with anchors which I have made block level elements and applied an image which moves on hover.

    Now I just want to move the text in the anchor itself with some padding left and top but the actual block level element also moves and gets bigger.

    I've tried to be very specific when targeting the anchor but with no joy.

    I've put the code below and would appreciate any thoughts.

    Thanks in advance for any advice.

    HTML
    Code:
    <nav id="navbar">
    <ul>
    <li><a href="#" class="activeLink">Home</a></li>
    <li><a href="#">Nav</a></li>
    <li><a href="#">Nav</a></li>
    <li><a href="#">Nav</a></li>
    </ul>
    </nav><!--End of nav-->

    CSS
    Code:
    #navbar {
    		
    			float: left;
    			font-size: 85%;
    			background-color: #fefafc;
    			width: 200px;
    			margin: 0;
    			padding: 0;
    			}
    			
    #navbar ul {
    			list-style-type: none;
    			margin: 0;
    			padding: 0;
    			}
    			
    #navbar a {
    			display: block;
    			width: 200px;
    			height: 51px;
    			background-image: url('nav.jpg');
    			background-repeat: no-repeat;
    			background-position: 0px 0px;
    			text-decoration: none;
    			list-style-type: none;
    			color: #666;
    			background-color: #fefafc;
    			padding-left: 45px;
    			padding-top: 15px;
    			outline-style: none;
    			}
    			
    #navbar a:hover {
    			display: block;
    			width: 200px;
    			height: 51px;
    			background-image: url('nav.jpg');
    			background-repeat: no-repeat;
    			background-position: 0px -51px;
    			color: #666;
    			background-color: #fefafc;
    			}
    			
    #navbar a.activeLink {
    			background-image: url('nav.jpg');
    			background-repeat: no-repeat;
    			background-position: 0px -51px;
    			color: #666;
    			background-color: #fefafc;
    			cursor: default;
    			}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Padding will add to the width and height of the element so reduce the width and height by the same amount of padding that you added.

    However if you want to centre the text then don't add any padding but set the line-height to the same height as the height.

    Don't duplicate rules that are not needed in the hover states. Something roughly like this should do:

    Code:
    #navbar a {
        display: block;
        width: 200px;
        height: 51px;
        background#fefafc: url('nav.jpg') no-repeat 0 0;
        text-decoration: none;
        color: #666;
        text-indent:45px;
        line-height:51px;
    }
    #navbar a:hover,#navbar a.activeLink  {background-position: 0px -51px;}
    #navbar a.activeLink {cursor: default;}

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks again for your reply.

    Best regards.


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
  •