mboehler3 Posted September 4, 2009 Share Posted September 4, 2009 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> Link to comment Share on other sites More sharing options...
Jerry62704 Posted September 4, 2009 Share Posted September 4, 2009 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2009 Share Posted September 5, 2009 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/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.