html - Right-aligned tabs have an undesired gap to the side -


i have problems:

  1. i have tab-div - can find code here: http://pastebin.com/kppgebi6. can see in http://i.stack.imgur.com/u2mun.png arrows point, there space, tab doesn't start @ right corner, how can fix it?
  2. there underline continues behind content div.

what do?

<!-- latest compiled , minified css -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">    <!-- optional theme -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">    <!-- latest compiled , minified javascript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <div class="container" style="width: 45%;float: right;">      <ul class="nav nav-tabs navbar-right">          <li><a data-toggle="tab" href="#sub_cats_{cid}">{sub_categories}</a></li>          <li class="active"><a data-toggle="tab" href="#category_{cid}">{category}</a></li>      </ul>      <div class="clearfix"></div>      <div class="tab-content" style="height: 100%;">          <div id="category_{cid}" class="tab-pane fade in active category" style="background-image: url('{category_image}');">  	        <h1> {category_name} </h1>          </div>          <div id="sub_cats_{cid}" class="tab-pane fade">              <ul class="sub_categories">  	            <li><a href="products.php?act=scat&id=7">one</a></li>                  <li><a href="products.php?act=scat&id=8">two</a></li>                  <li><a href="products.php?act=scat&id=12">three</a></li>                  <li><a href="products.php?act=scat&id=13">four</a></li>              </ul>          </div>      </div>  </div>

you don't want applying inline styles primary grid elements that. work with framework, not against it.

the fix here seems to align tabs right:

<div class="container">     <ul class="nav nav-tabs navbar-right pull-right">

demo

update: issue application of rtl across site. reverse nav tabs:

.nav-tabs {   direction: ltr; }

demo 2


Comments

Post a Comment

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

i working latest mpandroidchart library , looking way add annotations or images clickable. example: once data reaches value event occurs want able display user - there multiple events can occur annotations (not sure if right word) or image added @ point in chart. any pointers welcome. check documentation of yaxis . focus on setspacetop(...) , setaxismaxvalue(...) methods. for background: bar-shadow , disable calling: barchart.setdrawbarshadow(false) or change color: bardataset.setbarshadowcolor(int color)
Read more

javascript - Add class to another page attribute using URL id - Jquery -

i have attached id url. ex: when click link 1 , has #tab-2 id , takes me landing page. in landing page have find element has #tab-2 id have add class .active . i tried no luck. please 1 correct code. thanks js fiddle link html <div class="menu"> <ul> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-2">link 1</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-44">link 2</a></li> <li><a href="http://jsfiddle.net/gscyoa0j/1/#tab-74">link 3</a></li> </ul> </div> landing page <div class="tab"> <ul> <li><a id="tab-2" class="active" >link 1 content</a></li> <li><a id="tab-44" >link 2 content</a></li> <li><a id="tab-74" >link 3 content</a></l...
Read more

firefox - Where is 'webgl.osmesalib' parameter? -

i'm trying webgl running on firefox (v37.0.2) via software acceleration mesa. tried following steps have been stated in article: http://www.binarytides.com/enable-webgl-firefox-ubuntu/ however, unable find parameter named ' webgl.osmesalib ' in about:config section? has been removed (or renamed)? if yes, how should instruct firefox use mesa's software acceleration webgl? looks support osmesa removed in favour llvmpipe.
Read more