Extending and Wrapping Functions
Quite easy using prototype.js:
… and pieces
Quite easy using prototype.js:
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
.
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.
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.
Powered by WordPress