Jump to content
Sign in to follow this  
mboehler3

Adding A Margin, Width To A Bottom-border?

Recommended Posts

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:3tab-border.gifAnd I want it to look like this:3tab-border-fix.gifSo 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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites
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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...