Adding A Margin, Width To A Bottom-border?

[mboehler3]

Is this even possible?I am modifying a tab system that I found here.I want to add a margin and width to the bottom border of my tab list. Here is how my tab system looks:And I want it to look like this:So I'd want to not have the border extend 100% of the screen, and start under the first tab, giving about 20 pixels of left padding/margin.Here is my CSS:

.tabberlive .tabbertabhide { display:none;}/*--------------------------------------------------  .tabber = before the tabber interface is set up  .tabberlive = after the tabber interface is set up  --------------------------------------------------*/.tabber {}.tabberlive { margin-top:1em;}/*--------------------------------------------------  ul.tabbernav = the tab navigation list  li.tabberactive = the active tab  --------------------------------------------------*/ul.tabbernav{ margin:0; padding: 3px 0; background-image: url('/images/v1_1/surechoice/tabber-top2.gif'); background-repeat: no-repeat; border-bottom: solid 1px #ccc; font: bold 12px Verdana, sans-serif;}ul.tabbernav li{ list-style: none; margin: 0; display: inline;}ul.tabbernav li a{ padding: 3px 0.5em; margin-left: 20px; margin-right: -20px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}ul.tabbernav li a:link { color: #448; }ul.tabbernav li a:visited { color: #667; }ul.tabbernav li a:hover{ color: #000; background: #AAE; border-color: #227;}ul.tabbernav li.tabberactive a{ background-color: #fff; border-bottom: 1px solid #fff;}ul.tabbernav li.tabberactive a:hover{ color: #000; background: white; border-bottom: 1px solid white;}/*--------------------------------------------------  .tabbertab = the tab content  Add style only after the tabber interface is set up (.tabberlive)  --------------------------------------------------*/.tabberlive .tabbertab { width:625px; padding:5px; background-image: url(/images/v1_1/surechoice/tabber-bckground.gif); background-repeat: repeat-y; border-top:0; /* If you don't want the tab size changing whenever a tab is changed	you can set a fixed height */ /* height:200px; */ /* If you set a fix height set overflow to auto and you will get a	scrollbar when necessary */ /* overflow:auto; */}/* If desired, hide the heading since a heading is provided by the tab */.tabberlive .tabbertab h2 { display:none;}.tabberlive .tabbertab h3 { display:none;}/* Example of using an ID to set different styles for the tabs on the page */.tabberlive#tab1 {}.tabberlive#tab2 {}.tabberlive#tab2 .tabbertab { height:200px; overflow:auto;}

And my HTML:

<div class="tabber">	 <div class="tabbertab">	  <h2>Tab 1</h2>	  <p style="margin-left:25px;">Tab 1 content.</p>	 </div>	 <div class="tabbertab">	  <h2>Tab 2</h2>	  <p>Tab 2 content.</p>	 </div>	 <div class="tabbertab">	  <h2>Tab 3</h2>	  <p>Tab 3 content.</p>	 </div></div>

[Jerry62704]

Let's start with this. Is your goal to have a vertical menu list? "tabber" is an empty class. Why put in the <h> tags and then hide them? Further, this is an incorrect use of an <h> tab. You have a lot of CSS geared to a <ul> list, but I don't see any. Sorry, but this isn't making any sense to me.

<div class="tabber">	 <div class="tabbertab">	  <h2>Tab 1</h2>	  <p style="margin-left:25px;">Tab 1 content.</p>	 </div>	 <div class="tabbertab">	  <h2>Tab 2</h2>	  <p>Tab 2 content.</p>	 </div>	 <div class="tabbertab">	  <h2>Tab 3</h2>	  <p>Tab 3 content.</p>	 </div></div>

[dsonesuk]

Let's start with this. Is your goal to have a vertical menu list? "tabber" is an empty class. Why put in the <h> tags and then hide them? Further, this is an incorrect use of an <h> tab. You have a lot of CSS geared to a <ul> list, but I don't see any. Sorry, but this isn't making any sense to me.

if i remember rightly, this tab method uses javascript to convert it to an unordered list, and uses id reference and h2 tags for <ul> and <li> tags.would help if all the info was produced.Edit: found it http://www.barelyfitz.com/projects/tabber/ Edited September 5, 2009 by dsonesuk