CODEWITHSUNDEEP
htmlcss
Michaela LeBlanc
Michaela LeBlanc

Reputation: 259

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>

Upvotes: 1

Views: 6651

Answers (4)

Stepan Yakovenko
Stepan Yakovenko

Reputation: 9206

May be this will help someone:

.menuItem:hover

and 

.menuItem :hover

is not the same, take care!

Upvotes: 10

SAFEER N
SAFEER N

Reputation: 1197

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;
    }

Upvotes: 1

M.Svrcek
M.Svrcek

Reputation: 5635

Try this:

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

#navi .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;
}

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

Upvotes: 1

ars265
ars265

Reputation: 1987

Your selector are being overwritten do to CSS Selector scope/order. The more specific overwrites those that are more general, in this case, #navi a:hover is overwriting, .logo a:hover making your hover affect not work. the property you are overwriting is background change it to background-color: white; and you'll be fine

Upvotes: 0

Related Questions