Databases
StackOverflow2013
Postsdbo
POCSS question. How can I get blueprint css to work rails tabnav widget?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS question. How can I get blueprint css to work rails tabnav widget?
    text
    copied!<p>I need a quick solution to getting some decent layout working within the <a href="http://wiki.github.com/paolodona/rails-widgets/tabnav" rel="nofollow noreferrer">tabnav widget</a> display area. I'm already using blueprint css for other aspects of the layout but I don't have enough CSS chops to figure out how to get blueprint containers to display within the tabnav's content area.</p> <p>The tabnav's content area is <code>&lt;div class="main_tabnav_content" id="main_tabnav_content"&gt;</code> and this is the related css:</p> <pre><code>.main_tabnav { color: #000; border-bottom: 1px solid #ccc; margin: 13px 0px 0px 0px; padding: 0px; z-index: 1; padding-left: 10px } .main_tabnav ul { margin: 0px; padding: 0px; } .main_tabnav li { display: inline; overflow: hidden; list-style-type: none; } .main_tabnav li span.disabled { color: #888888; background: #FAFAFA; border: 2px solid #DDDDDD; border-bottom: none; padding: 2px 5px 0px 5px; margin: 0; text-decoration: none;} .main_tabnav a, main_tabnav a.active { color: #000000; background: #EEEEEE; font-weight: bold; border: 1px solid #ccc; padding: 2px 5px 0px 5px; margin: 0; text-decoration: none; } .main_tabnav a.active { background: #FFFFFF; border-bottom: 3px solid #FFFFFF; } .main_tabnav a:hover { color: #FFFFFF; background: #CCCCCC; } .main_tabnav a:visited { color: #000000; } .main_tabnav a.active:hover { background: #FFFFFF; color: #000000; } .main_tabnav_content { background: #FFFFFF; padding: 20px; border:1px solid #ccc; border-top: none; z-index: 2; } </code></pre> <p>I'd like to be able to put some columns inside the main_tabnav_content area like this</p> <pre><code> &lt;div class="span-5 colborder"&gt; stuff &lt;/div&gt; &lt;div class="span-5 colborder"&gt; stuff &lt;/div&gt; &lt;div class="span-5 colborder"&gt; stuff &lt;/div&gt; </code></pre> <p>At the moment the columns are displayed but the <code>main_tabnav_content</code> box doesn't expand around them. Any suggestions for how to get the blueprint layout nested inside the <code>main_tabnav_content</code> area?</p> <p>From Blueprint: screen.css:</p> <pre><code>.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;} .last, div.last {margin-right:0;} .span-1 {width:30px;} .span-2 {width:70px;} .span-3 {width:110px;} .span-4 {width:150px;} .span-5 {width:190px;} </code></pre> <p>and also:</p> <pre><code>div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;} </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload