Sunday, August 18, 2013

Bootstrap tabs and the curious case of the missing bottom border

I'm a big fan of Twitter bootstrap. It's a big help for the design impaired. But as helpful Bootstrap is it still has a few things that you have to do yourself. It is where my story begins. I needed to get to here:

Tabs pulled right with an H4 element on the left WITH a bottom border


From here. This is how it should look like with the default markup using Bootstrap.

Tabs pulled right with an H4 element on the left WITHOUT a bottom border

I will post the markup here. The HTML markup is pretty standard.

     <div class="col-8 subheader">  
       <h4 class="pull-left">Postings</h4>  
       <ul class="nav nav-tabs pull-right" id="myTab">  
         <li><a href="#interesting" data-toggle="tab">Interesting</a></li>  
         <li><a href="#freshest" data-toggle="tab">Freshest</a></li>  
         <li><a href="#popular" data-toggle="tab">Popular</a></li>  
       </ul>   
     </div> 

The interesting part is getting the bottom border to work out. If all goes to plan it should stretch from the "Postings" element up to the first tab. My solution isn't that good if you're into strict semantic HTML5 but I'd rather get it working than worrying about writing proper semantic HTML5. At least it will validate.
     
     <div class="col-8 subheader">  
       <div id="btm-border"></div>
       <h4 class="pull-left">Postings</h4>  
       <ul class="nav nav-tabs pull-right" id="myTab">  
         <li><a href="#interesting" data-toggle="tab">Interesting</a></li>  
         <li><a href="#freshest" data-toggle="tab">Freshest</a></li>  
         <li><a href="#popular" data-toggle="tab">Popular</a></li>  
       </ul>   
     </div> 

The other half is the CSS rule. I write CSS using Less. Why? BECAUSE REASONS!

.subheader{
    position: relative;

    #btm-border{
        border-bottom: 1px solid #ddd;
        position: absolute;
        width: 446px;
        top: 42px;
    }
}

Friday, August 2, 2013

WTF Win8! No adhoc networking? No wonder it sucks.

This is more rant than developer talk.

A few nights ago, my laptop's hard disk was failing and I had to replace it and while I was at it I decided to update to Windows 8. I thought why the hell not? I did have a valid key and who know I might like it. I WAS SOOO FUCKING WRONG!!

The install process was painless, then there's a lot of eye candy and then it started to go downhill from there. First is that ribbon, strip on the right side, what is that all about? And why doesn't have to pop out ONLY WHEN I put my mouse pointer to the TOP RIGHT corner of the screen? And if I can customize it, WHERE THE FUCK is the customization screen so I can change it's behavior.

Second, WHY THE FUCK NO wireless adhoc connections? Yes, I found the couple of blogs telling how it can be done but involves opening the command line and THAT IS BULLSHIT! And if you make the argument of using third-party software like Connectify, FUCK YOU!

There's a third one, fourth one, fifth one but I don't want to talk about BECAUSE REASONS!

The only bright spot for me is that my laptop boots up and shuts down faster and my Visual Studio runs better. Almost everything else was a disaster.