SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:
    Code:
    <div class="calendar-nav">
            <ul id="calendar-nav-button">
    
            <li class="blocked-month"><a href=”#” title="January, 2010">&nbsp;JAN&nbsp;</a></li>
            <li><a href=”#” title="February, 2010">FEB</a></li>
            <li><a href=”#” title="March, 2010">MAR</a></li>
            <li><a href=”#” title="April, 2010">APR</a></li>
            <li><a href=”#” title="May, 2010">MAY</a></li>
            <li><a href=”#” title="June, 2010">JUN</a></li>
            <li><a href=”#” title="July, 2010">JUL</a></li>
            <li><a href=”#” title="August, 2010">AUG</a></li>
        <li><a href=”#” title="September, 2010">SEP</a></li>
            <li><a href=”#” title="October, 2010">OCT</a></li>
            <li><a href=”#” title="November, 2010">NOV</a></li>
            <li><a href=”#” title="December, 2010">DEC</a></li>
    
        </ul>
        </div>
    And the CSS:
    Code:
    #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. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    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.
    my understanding is that you want wider, so 20px left and right padding would do just that.

    Code CSS:
    #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;		
    	}

    Quote Originally Posted by martinfamily2005 View Post
    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?
    also about padding. take 10px from bottom and put 20px at top.

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



    Quote Originally Posted by martinfamily2005 View Post
    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.

    if your html markup is
    Code HTML4Strict:
    <li class="blocked-month">
    as my understanding is, then your css selector should look like this
    Code CSS:
    #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:
    Code CSS:
    #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;
    	}

  3. #3
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, did you manage to fix this? The boxes aren't growing on hover for me
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    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)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh . Well in CHrome they also grow. What browser are you using that it isn't growing on? Chrome/FF good.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Addict martinfamily2005's Avatar
    Join Date
    Jul 2010
    Posts
    235
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by martinfamily2005 View Post
    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
    Ah, well I was looking at the wrong dates, the blacked ones
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •