CSS li hover.

PicoDeath · #1 Dec 17th, 2007, 15:10

Site; http://www.360sigs.com/360sigslayoutnew/categories.php
Css; http://www.360sigs.com/360sigslayoutnew/style.css

Problem CSS;

HTML: Select all

ul.libary{
    margin: auto;
    padding: 0px;
    list-style: none;
    display: block;
}

ul.libary li {
    overflow: hidden;
    margin: 0px 2px 0px 0px;
    padding: 2px;
    float: left;
    text-align: center;
    font-size: 9px;
    background-color: #ffffff;
    border: 1px solid #000000;}

ul.libary  li a:hover {
color: #ffffff;
background-color: #343434;
}
    
.libary li a:link, .navlinks li a:visited, .navlinks li a:active{
color: #000000;

Problem;

Hover over the Library part and it only uses the Li hover to cover the font. How can I fix it to ignore the padding and fill the whole box?

Aso · #2 Dec 17th, 2007, 15:23

Try getting rid of the li padding and setting your anchors to display:block, then adding padding to your anchors.

If I understand you correctly, the reason the whole box is not changing colour is because the anchor is not completely filling the space - the li padding is giving it that 'edge'.

PicoDeath · #3 Dec 17th, 2007, 15:27

You're right and I knew this, but then the text will touch the border and it looks untidy..

Aso · #4 Dec 17th, 2007, 18:15

But surely if you set your anchors to block elements, then add padding to them, they'll pad out the li's themselves?

PicoDeath · #5 Dec 17th, 2007, 19:41

I'm slightly confused now

HTML: Select all

ul.libary  li a:hover {
    display:block;
    padding: 0px;
    color: #ffffff;
    background-color: #343434;
}

like that?

MikeHopley · #6 Dec 17th, 2007, 20:05

Not quite. Add some padding to the "a", and take any padding away from the li.

This doesn't belong in the hover style. Apply it to the raw "a": a { display: block; padding; 1em; }

PicoDeath · #7 Dec 17th, 2007, 23:24

That makes all the layout mess up pretty much.

Aso · #8 Dec 17th, 2007, 23:35

Ok try this

Replace all of this

Code: Select all

ul.libary li {
    overflow: hidden;
    margin: 0px 2px 0px 0px;
    padding: 2px;
    float: left;
    text-align: center;
    font-size: 9px;
    background-color: #ffffff;
    border: 1px solid #000000;}

ul.libary  li a:hover {
    display:block;
    color: #ffffff;
    background-color: #343434;}

with this:

Code: Select all

ul.libary li {
    overflow: hidden;
    margin: 0px 2px 0px 0px;
    float: left;
    text-align: center;
    font-size: 9px;
    background-color: #ffffff;
    border: 1px solid #000000;}

ul.library li a {
    display: block;
    padding: 2px;}

ul.libary  li a:hover {
    color: #ffffff;
    background-color: #343434;}

PicoDeath · #9 Dec 18th, 2007, 11:23

Hmmm, didn't do anything =/

PicoDeath · #10 Dec 19th, 2007, 14:26

Any idea?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css hover	alexgeek	Web Page Design	9	Aug 2nd, 2007 18:18
hover box gallery	acrikey	Web Page Design	25	Jul 19th, 2007 22:39
hii Help with hover	hawashp	Starting Out	1	May 13th, 2007 16:35
Javascipt or a:hover???????	Tom87	Web Page Design	20	Mar 28th, 2007 01:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS li hover.