Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    need help with css menu

    I am trying to get this menu to show a white tap all of the time, which would be a separate background color from all the the tabs. It seems that the following code should work, but it does not. As you can see, I created a class "custom_current" on the tab which I want to have a white background at all times. Any suggestions greatly appreciated:


    HTML:

    Code:
    <div class="custom_nav">
    <ul>
    <li><a href="/link1/">Tab 1</a></li>
    <li><a href="/link2/">Tab 1</a></li>
    <li><a href="/link3/">Tab 1</a></li>
    <li class="custom_current"><a href="/link4/">Tab 1</a></li>
    <li><a href="/link5/">Tab 1</a></li>
    <li><a href="/link6/">Tab 1</a></li>
    <li><a href="/link7/">Tab 1</a></li>
    <li><a href="/link8/">Tab 1</a></li>
    </ul>
    </div>
    CSS:

    Code:
    .custom_nav{
    	width: 100%;
    	background-color: #333;
    }
    	
    .custom_nav ul{
    	padding: 0;
    	float: right;
    	margin-top: 12px;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    }
     
    .custom_nav ul li{
        display: inline;
    		}
    	 
    .custom_nav ul li a{
    	float: left;
    	text-decoration: none;
    	background-color: #EFEFEF;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-top-color: #999999;
    	border-right-color: #999999;
    	border-bottom-color: #999999;
    	border-left-color: #999999;
    	color: #003399;
    	-moz-border-radius: 10px 10px 0px 0px;
    	-webkit-border-radius: 10px 10px 0px 0px;
    	-khtml-border-radius: 10px 10px 0px 0px;
    	border-radius: 10px 10px 0px 0px;
    	padding-top: 4px;
    	padding-right: 7px;
    	padding-bottom: 4px;
    	padding-left: 7px;
    	margin-right: 5px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	}
     
    .custom_nav ul li a:visited{
    	color: #003399;
    }
    
    .menu ul li a:hover{
        color: #fff;
        background-color:#555555;}
     
    .custom_current {
        background-color:#fff;
    	background:#fff;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello andrew55,
    Since the #efefef background and rounded corners are on the anchor, applying a #fff background on the li is not going to show up.

    Even when you put your .custom_current on an anchor, it is still not specific enough to override your
    Code:
    lor: #fff;
    	background: #555555;
    }
    #custom_current {background: #fff;}
    </style>
    </head>
    <body>
        <div class="custom_nav">
            <ul>
                <li><a href="/link1/">Tab 1</a></li>
                <li><a href="/link2/">Tab 2</a></li>
                <li><a href="/link3/">Tab 3</a></li>
                <li><a href="/link4/">Tab 4</a></li>
                <li><a href="/link5/">Tab 5</a></li>
                <li><a href="/link6/">Tab 6</a></li>
                <li><a id="custom_current" href="/link7/">Tab 7</a></li>
                <li><a href="/link8/">Tab 8</a></li>
            </ul>
        <!--end .custom_nav--></div>
    </body>
    </html>
    Have a quick look at an easy way to have your menu indicate what page your guest is on. It's done with the body id.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Excavator - thanks for the response. Although that is a great menu, I'm not sure if it would work for me for this purpose. I need the menu tab to stay white for multiple pages (all actually), not just one page.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by andrew55 View Post
    Excavator - thanks for the response. Although that is a great menu, I'm not sure if it would work for me for this purpose. I need the menu tab to stay white for multiple pages (all actually), not just one page.
    So, does switching to an id applied to the anchor work for you then?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •