CSS Forum

**flexdesigns** · 10-13-2011, 05:25 AM

ok i dont know whats going on with me and css lately but i have another problem. ( maybe i have been looking at the same code for too long

)

for some reason im trying to add a background to the nav tabs but the background is only forming around the text not the full tab area

I've tried everything but just cant seem to get it to work :'(

heres my code

Code:

.tabbed_area {
}  

.tabz {
	
	margin:0;
	padding:0;
	background: #a9d670; /* Old browsers */
background: -moz-linear-gradient(top, #a9d670 0%, #9bb972 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9d670), color-stop(100%,#9bb972)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9d670 0%,#9bb972 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9d670 0%,#9bb972 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a9d670 0%,#9bb972 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9d670', endColorstr='#9bb972',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a9d670 0%,#9bb972 100%); /* W3C */
	
}

ul.tabs {  

    margin:0px; padding:0px;  
}  
ul.tabs li {
	
    list-style:none;  
    display:inline;  
	background-image:url(tab1.png);
	background-repeat:repeat-x;
	height:25px;
}

ul.tabs li a {  
    color:#ffebb5;  
    padding:8px 14px 8px 14px;  
    text-decoration:none;  
    font-size:18px;  
    font-family:Arial, Helvetica, sans-serif; 
    border:1px solid #ebebeb;  
	
	
}  
ul.tabs li a:hover {    
    border-color:#2f343a;  
}  
ul.tabs li a.active {  
    background-color:#ffffff;  
    color:#282e32;  
    border:1px solid #ebebeb;  
    border-bottom: 1px solid #ffffff;  
}  

.content {  
    background-color:#ffffff;  
    border:1px solid #ebebeb;
	padding:0px 20px 20px 20px;; 
	width:480px; 
	height:428px;
	
	/*  Gradient  */
	
	background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 40%, #efefef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 40%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 40%,#efefef 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 40%,#efefef 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 40%,#efefef 100%); /* W3C */
}  
#content_2, #content_3 { display:none; }  

ul.tabs {  

	height:25px;
    margin:0px; 
	padding:0px;  
    margin-top:5px;  
    margin-bottom:3px;  
}

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" xml:lang="en" lang="en">  
<head>  
    <title>title</title>  
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />  
    
</head>  
  
<body>  
  
  <br /><br />
    <div class="tabbed_area"> 
     
    <script src="functions.js" type="text/javascript"></script>  
<ul class="tabs">  
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">About</a></li>  
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Video</a></li>  
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Facebook</a></li> 
</ul>  
  
        <div id="content_1" class="content"><br /><p>Welcome to Adamsons Law, a Solicitors firm based in Bolton. We aim to deliver the best possible result whatever the nature of your legal problem. Our dedicated team of staff work around the clock to try and help, whatever your case/claim.</p><p>
We have a lot of experience dealing with many different aspects of law. Our team are highly qualified, efficient and down to earth. We will work with you as best we can.</p><p>
We have an excellent track record and reputation and use all our skills, knowledge, expertise and experience to help win your cases. We operate in both England and Wales and are gaining a reputation for our services, expanding our client base day by day.</p><p>
Please browse the site and read all relevant information presented on each page, if there are any further queries/comments please feel free to contact us via the contact page.</p>
<p>Thank you.</p></div>  
        <div id="content_2" class="content"><br />Content for Tab 2</div>  
        <div id="content_3" class="content"><br />Content for Tab 3</div>  
  
    </div>  
   
  
</body>  
</html>

and a screen shot:

Uploaded with ImageShack.us

**qwerty** · 10-14-2011, 11:35 AM

It has to be you are targeting the txt rather than the tab itself. Try simple css first and then jazz it up when you know your rules and targets are correct

**vangogh** · 10-14-2011, 01:56 PM

It could also be from margins or paddings. Try setting the background image on the link instead of the list-item. Let the size of the list-item come from the link instead of setting it explicitly. If you haven't yet, set the link to display block so it fills the list-item.

**chrishirst** · 10-14-2011, 03:02 PM

Quote:

for some reason im trying to add a background to the nav tabs but the background is only forming around the text not the full tab area

Set the text container to display:block and set 100% height and width

**flexdesigns** · 10-19-2011, 06:35 AM

Quote:

Try setting the background image on the link instead of the list-item.

yeah this was it thanks, i was sure i already did that -_-

**vangogh** · 10-19-2011, 03:36 PM

Glad I could help.

**angelsdev** · 03:28 AM

Just use this one

Code:

ul.tabs li a {
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:18px;
display:block;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #ebebeb;
height:(height in pixel);
width:(width in pixels)
}

Just use it and it will be done...