SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast schwim's Avatar
    Join Date
    Jan 2005
    Location
    Western NC, US
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help modifying css menu to suit

    Hi there everyone!

    I'm trying to set up a css hover-over menu that I found in an online tutorial to suit my needs but am having an issue getting certain things to change and was wondering if I could ask for some assistance.

    First off, here's my test page: http://www.aircooledaddiction.com/menu.html

    And here's the implementation in the forum: http://www.aircooledaddiction.com/forum

    My questions:

    1) What do I need to do to get the non-hover text to be white on the main bar in the forum like it is on menu.html?

    2) How would I get the bar to span the width of the content on the page(like the orange header bar below it)?

    3) Once I manage to get it to spread the content, How would I orientate the links to be on the left and not centered? I would want just blank orange from the last link to the rounded end on the right and then I'd add additional links as needed.

    Thanks for your time!
    If at first you don't succeed, then skydiving's not for you.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #1 you probably have some specificity conflict with some other rule in your stylesheet (or other stylesheets). There is really a LOT of stuff it could be and it would be optimal for you to inspect your code for rules which have more specificity than: nav ul li a. Quick fix would be to add and ID or class to your markup.
    <nav id='mainNav'>
    then use nav#mainNav ul li a{...}

    you could still run into conflict, which may mean you may need to add another ID

    <nav id='mainNav'> <ul class='mainNavList'>
    then use nav#mainNav .mainNavList li a {...}


    as far as #2 and #3 adding nav > ul { width:100%; } should do it. REMEMBER specificity above as this rule will make all ULs that are direct children of NAVs the same width the parent NAV element.

    hope that helps

  3. #3
    SitePoint Enthusiast schwim's Avatar
    Join Date
    Jan 2005
    Location
    Western NC, US
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your help!

    I added and ID as suggested and it did resolve the font color. I'm having an issue following through with your instructions for the final two issues, however.

    I will post the code I'm using so you don't have to dig through the page.

    URL: http://aircooledaddiction.com/forum

    CSS:

    Code:
    /* Nav Bar
     ----------------*/
    
    nav#topNav {
        margin: 10px auto; 
        text-align: center;
    }
    
    nav#topNav ul ul {
        display: none;
    }
    
        nav#topNav ul li:hover > ul {
            display: block;
        }
    
    
    nav#topNav ul {
        background: #fe9b00; 
        background: linear-gradient(top, #fe9b00 0%, #bf7500 100%);  
        background: -moz-linear-gradient(top, #fe9b00 0%, #bf7500 100%); 
        background: -webkit-linear-gradient(top, #fe9b00 0%,#bf7500 100%); 
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 20px;
        border-radius: 10px;  
        list-style: none;
        position: relative;
        display: inline-table;
        width:100%;
    }
        nav#topNav ul:after {
            content: ""; clear: both; display: block;
        }
    
        nav#topNav ul li {
            float: left;
        }
            nav#topNav ul li:hover {
                background: #4b545f;
                background: linear-gradient(top, #ffffff 0%, #ffbd56 40%);
                background: -moz-linear-gradient(top, #ffffff 0%, #ffbd56 40%);
                background: -webkit-linear-gradient(top, #ffffff 0%,#ffbd56 40%);
            }
                nav ul li:hover a {
                    color: #757575;
                }
            
            nav#topNav ul li a {
                display: block; padding: 6px 12px;
                color: #ffffff; text-decoration: none; font-weight: bold;
            }
                
            
        nav#topNav ul ul {
            background: #fe9b00; border-radius: 0px; padding: 0;
            position: absolute; top: 100%;
        }
            nav#topNav ul ul li {
                float: none; 
                border-top: 1px solid #ae6a00;
                border-bottom: 1px solid #ae6a00; position: relative;
            }
                nav#topNav ul ul li a {
                    padding: 6px 12px;
                    color: #fff;
                }    
                    nav#topNav ul ul li a:hover {
                        background: #ffcd7e;
                    }
            
        nav#topNav ul ul ul {
            position: absolute; left: 100%; top:0;
        }
    HTML:

    Code:
    <nav id="topNav">
    	<ul>
    		<li><a href="/index.php">Home</a></li>
    		<li><a href="/forum">Forum</a>
    			
    			<ul>
    				<li><a href="./search.php">Search</a></li><li><a href="./memberlist.php">Members</a></li><li><a href="./ucp.php">User Control Panel</a></li>
    			</ul>
    			
    		</li>
    	</ul>
    </nav><nav id="topNav">
    	<ul>
    		<li><a href="/index.php">Home</a></li>
    		<li><a href="/forum">Forum</a>
    			
    			<ul>
    				<li><a href="./search.php">Search</a></li><li><a href="./memberlist.php">Members</a></li><li><a href="./ucp.php">User Control Panel</a></li>
    			</ul>
    			
    		</li>
    	</ul>
    </nav>
    My two issues are now:

    1) The 100% did widen the bar, but it's shifted to the right of the rest of the page. It doesn't sit inside the content box.

    2) I'm not sure how to add a second ID in addition to the first one to make the child boxes not span 100%.

    Thank you again for all your help.
    If at first you don't succeed, then skydiving's not for you.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the orange bar to be full width then do this:

    Code:
    nav#topNav >  ul{
    display:table;
    width:100%;
    padding:0;
    margin:0;
    text-align:center;
    }

    If you still want the menu items centred then add this code (or don't add if left-aligned is ok):
    Code:
    nav#topNav ul li {
    float:none;
    display:inline-block;
    vertical-align:middle;
    *display;inline;/* ie7/6/ inline block hack */
    *zoom:1.0;/* ie7/6/ hack */
    }


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
  •