PDA

View Full Version : Fix width for tab menu



rudisugi
02-09-2007, 04:53 PM
1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:
In the demo, the tab can expand depending the size/length of the text. Is there a way to make it to a certain width, because i'm using a rounded background image and has certain width associated with it. I've tried specifying the width in the css file but wont work. I've also specified the float to left rather than using display:inline but it is not showing properly in Firefox. Can this be part of the feature of the script, to make the width to a certain pixel? Thanks.

ddadmin
02-09-2007, 11:39 PM
Since the menu items are inline links (<a>), specifying a width won't do. You can try using float in combination with display: block:


.shadetabs li a{
display: block;
float: left;
width: 100px;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

And inside .tabcontentstyle, clear that float:


.tabcontentstyle{ /*style of tab content oontainer*/
clear: left;
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

rudisugi
02-23-2007, 09:56 PM
Thank you for the solution, i have yet to try it but will do so this weekend. I will let you know how that goes. Thanks again.