Michaela  LeBlanc Michaela LeBlanc - 7 months ago 14
HTML Question

Background color on hover & padding

I'm having trouble with having a background color on hover, on a logo and also padding around some images.

For the background-color, it's for the logo that you see on the navigation bar on the left that is CAUL/CBUA. Its' hover state switches to this image and the background on hover should fill the whole block just like the links beside it.

For the padding of the images, it's on the same navigation bar, to the right. They are the social icons I'm sure it's not hard to see where the padding should be.

Here's the link to what I have so far. You can see the navigation bar here.

And here's my CSS:

/* Navigation bar */
#navi {
height: 40px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}

#navi a:hover {
background: white;
color: #1e416f;
}

.logo {
margin: 5px;
padding: 0;
float: left;
}

.logo a {
float: left;
margin: 2px 10px;
width: 36px;
height: 26px;
background: url(/imgs/navi/caul_white_nav.png) left top no-repeat;
text-indent: -9999px;
}

.logo a:hover {
background: url(/imgs/navi-hover/caul_blue_nav.png) left top no-repeat;
}

#primary-nav, #tools-nav {
list-style: none;
margin: 0;
padding: 0;
}

#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }

#primary-nav a, #tools-nav a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid white;
line-height: 40px;
}

#primary-nav li:first-child a, #tools-nav li:first-child a {
border-left: 1px solid white;
}

#tools-nav {
float: right;
}

#tools-nav .icon a {
text-indent: -9999px;
}

#tools-nav .email a {
background: url(/imgs/navi/mail.png) no-repeat;
width: 20px;
}

#tools-nav .email a:hover {
background: url(/imgs/navi-hover/hover_mail.png) no-repeat;
width: 20px;
}

#tools-nav .twitter a {
background: url(/imgs/navi/twitter.png) no-repeat;
width: 20px;
}

#tools-nav .twitter a:hover {
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat;
width: 20px;
}

#tools-nav .search a {
background: url(/imgs/navi/search.png) no-repeat;
width: 20px;
}

#tools-nav .search a:hover {
background: url(/imgs/navi-hover/hover_search.png) no-repeat;
width: 20px;
}


HTML:

<!-- NAVIGATION -->
<div id="navi">
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1>

<ul id="primary-nav">
<li><a href="#">Directories</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">About</a></li>
</ul>

<ul id="tools-nav">
<li class="login"><a href="#">Log In</a></li>
<li class="email icon"><a href="#">Email</a></li>
<li class="twitter icon"><a href="#">Twitter</a></li>
<li class="search icon"><a href="#">Search</a></li>
</ul>
</div>

Answer

try this method on active and hover. (background position center center).

#tools-nav .email a {
        background: url("/imgs/navi/mail.png") no-repeat scroll center center transparent;
        width: 20px;
    }