Css nav menu styling -- need a little help with a few small items

HTML & CSS
1

I have a 100% css/html nav menu for the months here: http://billboardfamily.com/calendar/

It is working great, but there are a few things I am trying to do and I don;t know how to do them, exactly. Here is what I need help with:

  1. I want the containers (<li>) to be wider, but this is not happening for me. I would prefer not to specify an exact height so this can be more compatable with all browsers/settings, but if that’s the only way, then so be it.

  2. When you hover over a month is there a way to get the text to stay right where it is, and have it look like just the box is growing like it does?

  3. I am trying to give certain <li> tags the class=“blocked-month” so I can change the way they look, and make them not clickable, etc. For some reason, my changes are not taking effect on these tags.

Here is the code as of now:

<div class="calendar-nav">
        <ul id="calendar-nav-button">

        <li class="blocked-month"><a href=&#8221;#&#8221; title="January, 2010">&nbsp;JAN&nbsp;</a></li>
        <li><a href=&#8221;#&#8221; title="February, 2010">FEB</a></li>
        <li><a href=&#8221;#&#8221; title="March, 2010">MAR</a></li>
        <li><a href=&#8221;#&#8221; title="April, 2010">APR</a></li>
        <li><a href=&#8221;#&#8221; title="May, 2010">MAY</a></li>
        <li><a href=&#8221;#&#8221; title="June, 2010">JUN</a></li>
        <li><a href=&#8221;#&#8221; title="July, 2010">JUL</a></li>
        <li><a href=&#8221;#&#8221; title="August, 2010">AUG</a></li>
    <li><a href=&#8221;#&#8221; title="September, 2010">SEP</a></li>
        <li><a href=&#8221;#&#8221; title="October, 2010">OCT</a></li>
        <li><a href=&#8221;#&#8221; title="November, 2010">NOV</a></li>
        <li><a href=&#8221;#&#8221; title="December, 2010">DEC</a></li>

    </ul>
    </div>

And the CSS:

#calendar .calendar-nav {
        float: left;
        clear: both;
        margin-top: 30px;
        padding-left: 10px;
    }
    #calendar-nav-button {
        padding: 0;
        
    }
    #calendar-nav-button li {
        display: inline;
    }
    #calendar-nav-button li a {
        font-size: 1.3em;
        font-weight: bold;
        text-decoration: none;
        float: left;
        padding: 10px;
        background-color: #999999;
        color: #000000;
        border: #ffffff 1px solid;        
    }
    #calendar-nav-button li a:hover {
        background-color: #00afef;
        margin-top:-10px;
        padding-bottom:20px;
        border: #ffffff 1px solid;        
    }
    #calendar-nav-button .blocked-month li {
        background-color: #000000;
        color: #ffffff;
    }

That’s all. Thanks for the help in advance.

2

The height of the box is supposed to increase on hover…that is what I meant by “growing” I tested it in a few browsers and it seems to be doing what it needs to on my end.

3

Firefox :). I’ll try someting else

On “#calendar-nav-button li a:hover” you set margin-top and padding-top. That’s increasing the heigiht of the box on hover and thus the issue :slight_smile:

4

Ah, well I was looking at the wrong dates, the blacked ones :stuck_out_tongue:

5

It is working for me in Firefox…what browser are you using?

Also, the BLACK months are blocked…they do not grow. Try the gray months (OCT, NOV, DEC)

6

Hi, did you manage to fix this? The boxes aren’t growing on hover for me :slight_smile:

7

Non. It works fine in every browser I tried. That’s why I was wondering why you originally said it was not growing for you. lol

8

Oh :p. Well in CHrome they also grow. What browser are you using that it isn’t growing on? Chrome/FF good.

9

Thanks, that basically fixed everything. One more question, and that is all.

Ont he blocked months, I DO NOT want them to grow when you hover over them. They will not do anything at all, as they are blocked. How can I do that? Thanks!

10

my understanding is that you want wider, so 20px left and right padding would do just that.

#calendar-nav-button li a {
		font-size: 1.3em;
		font-weight: bold;
		text-decoration: none;
		float: left;
		padding: 10px 20px;
		background-color: #999999;
		color: #000000;
		border-right: #ffffff 1px solid;		
	}

also about padding. take 10px from bottom and put 20px at top.

#calendar-nav-button li a:hover {
		background-color: #00afef;
		margin-top:-10px;
		padding-bottom:10px;
        padding-top: 20px;
		border-right: #ffffff 1px solid;		
	}

if your html markup is

<li class="blocked-month">

as my understanding is, then your css selector should look like this

#calendar-nav-button li.blocked-month {
        background-color: #000000;
        color: #ffffff;
    }

and you should change the style for the a element inside li having class blocked-month, something like this:

#calendar-nav-button li.blocked-month a{
		background-color: #000000;
		color: #ffffff;
	}
	#calendar-nav-button li.blocked-month a:hover{
		background-color: #000000;
		color: #ffffff;
	}