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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tabbed Navigation using HTML and CSS only

    I'm trying to make navigation tabs using a table - HTML and CSS only (I know this is not the best or best-practices way to do it). The selected tab should have a different background than the unselected one. I'm trying to do this using a non displayed radio button, and the "checked" attribute, but for some reason, I can't use a complex compound selector.

    Here is my HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
    		<head>
    			<title>Tabs</title>
    			
    			<link rel="stylesheet" type="text/css" href="tab2.css" /> 
    		</head>
    		
    		<body>
    			<table class="tabs">
    				<tr>
    					<td><input type="radio" name="choices" id="inventory" checked="checked" /><span class="before"><span class="after"><span class="middle"><a href="inventory.html" class="linked">Inventory</a></span></span></span></label></td>
    					<td><span class="before"><span class="after"><span class="middle"><input type="radio" name="choices" /><a href="orderInfo.html">Order Information</a></span></span></span></td>
    					<td><span class="before"><span class="after"><span class="middle"><a href="accounts.html">Accounts</a></span></span></span></td>
    					<td><span class="before"><span class="after"><span class="middle"><a href="shippers.html">Shippers</a></span></span></span></td>
    					<td><span class="before"><span class="after"><span class="middle"><a href="suppliers.html">Suppliers</a></span></span></span></td>
    				</tr>			
    			</table>
    			
    			<hr />
    			
    		
    		</body>
    	
    	
    
    
    
    
    
    
    	</html>
    and here is my CSS
    Code:
    .tabs{
    	font-family: Tahoma;
    	font-size: 13px;
    	border-spacing:5px;
    }
    
    
    
    a:link{
    	text-decoration:none;
    	color:black;
    }
    	
    a:hover{
    	color:#cc6600;
    	cursor:pointer;
    }
    
    
    
    hr{
    	border:none;
    	background-color:#cccccc;
    	margin-top:-5px;
    	height:1px;
    }
    
    
    
    .middle {
    	background-image:url('mid.gif');
    	background-repeat: repeat;
    	background-position: left top;
    	padding-left:4px;
    	padding-right:2px;
    	padding-top:3px;
    	margin-left:-3px;
    	padding-bottom: 3px;
    }
    
    .after {
    	background-image:url('right.gif');
    	background-repeat: no-repeat;
    	background-position: right top;
    	padding:3px;
    	
    
    }
    
    .before{
    	background-image:url('left.gif');
    	background-repeat: no-repeat;
    	background-position: left top;
    	padding:3px;
    	
    }
    
    
    
    input[checked="checked"] + .before{
    	background-image:url('left-selected.gif');
    	background-repeat: no-repeat;
    	background-position: left top;
    	padding:3px;
    }
    
    input[checked="checked"] + .before + .after{
    	background-image:url('right-selected.gif');
    	background-repeat: no-repeat;
    	background-position: right top;*/
    	padding:3px;
    }
    
    input[checked="checked"] + .before + .after + .middle{
    	background-image:url('mid.gif');
    	background-repeat: repeat;
    	background-position: left top;
    	padding-left:4px;
    	padding-right:2px;
    	padding-top:3px;
    	margin-left:-3px;
    	padding-bottom: 3px;
    }

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Is there any rational reason to use tables here?

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts


  •  

    Tags for this Thread

    Posting Permissions

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