The Technical Bits

… and pieces

Thursday, June 3, 2010

Extending and Wrapping Functions

Quite easy using prototype.js:

Prototype’s wrap function.

posted by gurnaik at 9:16 am  

Friday, July 27, 2007

Firefox and localhost.com

Firefox seems to want to visit www.localhost.com if my local web server is not running. To alter this behaviour set the keyword.enabled value to false in about:config.

posted by gurnaik at 4:04 pm  

Friday, July 13, 2007

Python Tutorials

Python appears to be a language worth learning. As well as the standard tutorial, there’s also a “10-minute” potted version on Poromenos’ site.

posted by gurnaik at 1:46 pm  

Friday, March 2, 2007

Simple CSS Tabs

There a number of websites that cover how to do simple navigational tabs
using only CSS and HTML. One of the top hits in a Google search is Joshua Kaufman‘s excellent CSS Tabs 2.0. There is also Adam Kalsey’s implementation, although this has problems if the user changes the font size on the page.

I thought I would share my implementation as well. The fully working example is here. Clicking on each tab will load the appropriate page. Rather than having separate files for each tab, some JavaScript could be used to show/hide the content as appropriate.

The HTML Markup

The basis of this example is a fairly simple HTML file (tabsrc1.html).

<html>
  <head>
    <title>Tab Test Page</title>
    <link rel="stylesheet" href="tabs.css" type="text/css" />
  </head>
  <body>
    <div id="tabbar">
      <a href="#" title="Tab 1" class="first current">Tab 1</a>
      <a href="tabsrc2.html" title="Tab 2">Tab 2</a>
      <a href="tabsrc3.html" title="Tab 3">Tab 3</a>
      <a href="tabsrc4.html" title="Tab 4">Tab 4</a>
    </div>
    <div id="tabcontent">
      <p>This is the first tab.</p>
    <div>
  </body>
</html>

This basically contains two divs: one for the tab bar and one for the
content. The tab bar contains the tab anchor markup.
For the purposes of this exercise, this page is cloned (and adjusted accordingly) for each tab anchor.

The import thing to note is that the currently selected tab has a CSS
class assigned to it.

The CSS

First, turn off the underlining of the anchors.

a {
  text-decoration: none;
}

Then, style the tab bar div to have a border at the bottom.

#tabbar {
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid;
}

For every anchor in the tab bar, give it a border, but omit the bottom border as that is taken care of with the tab bar border.

#tabbar a {
  border: 1px solid #778899;
  border-bottom: 0px;
  margin: 0px 0px 0.2em 0.2em;
  padding: 0.2em 0.2em 0em 0.2em;
  font-size: 80%;
}

For stylistic purposes, the first tab in the tab list is indented.

 
#tabbar a.first {
  margin-left: 1em;
}

This is the styling for the currently selected tab. It is positioned
relatively so that the bottom overlaps the tab bar.

 
#tabbar a.current {
  position: relative;
  top: 0.1em;
  color: #0066FF;
  background-color: #FFFFFF;
  font-weight: bold;
  border-bottom: 1px solid #FFFFFF;
  border-top: 2px solid #0066FF;
}

Finally, some minimal styling for the tab content.

 
#tabcontent {
  margin-left: 0.5em;
  padding: 1em;
}

A fairly simple tabbed interface with a minimal amount of CSS. The example directory containing all the files is here.

posted by gurnaik at 5:48 pm  

Powered by WordPress