{"id":12,"date":"2007-03-02T17:48:48","date_gmt":"2007-03-02T17:48:48","guid":{"rendered":"http:\/\/www.gurnaik.com\/blog\/?p=12"},"modified":"2007-04-03T08:29:37","modified_gmt":"2007-04-03T08:29:37","slug":"simple-css-tabs","status":"publish","type":"post","link":"https:\/\/www.gurnaik.com\/blog\/2007\/03\/02\/simple-css-tabs\/","title":{"rendered":"Simple CSS Tabs"},"content":{"rendered":"

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

I thought I would share my implementation as well. The fully working example is here<\/a>. 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.<\/p>\n

The HTML Markup<\/strong><\/p>\n

The basis of this example is a fairly simple HTML file (tabsrc1.html).<\/p>\n

\n
\r\n<html>\r\n  <head>\r\n    <title>Tab Test Page<\/title>\r\n    <link rel=\"stylesheet\" href=\"tabs.css\" type=\"text\/css\" \/>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"tabbar\">\r\n      <a href=\"#\" title=\"Tab 1\" class=\"first current\">Tab 1<\/a>\r\n      <a href=\"tabsrc2.html\" title=\"Tab 2\">Tab 2<\/a>\r\n      <a href=\"tabsrc3.html\" title=\"Tab 3\">Tab 3<\/a>\r\n      <a href=\"tabsrc4.html\" title=\"Tab 4\">Tab 4<\/a>\r\n    <\/div>\r\n    <div id=\"tabcontent\">\r\n      <p>This is the first tab.<\/p>\r\n    <div>\r\n  <\/body>\r\n<\/html><\/pre>\n<\/blockquote>\n
This basically contains two divs: one for the tab bar and one for the
\ncontent. The tab bar contains the tab anchor markup.
\nFor the purposes of this exercise, this page is cloned (and adjusted accordingly) for each tab anchor.<\/p>\n
The import thing to note is that the currently selected tab has a CSS
\nclass assigned to it.<\/p>\n
The CSS<\/strong><\/p>\n
First, turn off the underlining of the anchors.<\/p>\n
\n
\r\na {\r\n  text-decoration: none;\r\n}<\/pre>\n<\/blockquote>\n
Then, style the tab bar div to have a border at the bottom.<\/p>\n
\n
\r\n#tabbar {\r\n  margin: 0px;\r\n  padding: 0px;\r\n  border-bottom: 1px solid;\r\n}<\/pre>\n<\/blockquote>\n
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.<\/p>\n
\n
\r\n#tabbar a {\r\n  border: 1px solid #778899;\r\n  border-bottom: 0px;\r\n  margin: 0px 0px 0.2em 0.2em;\r\n  padding: 0.2em 0.2em 0em 0.2em;\r\n  font-size: 80%;\r\n}\r\n<\/pre>\n<\/blockquote>\n
For stylistic purposes, the first tab in the tab list is indented.<\/p>\n
\n
 \r\n#tabbar a.first {\r\n  margin-left: 1em;\r\n}\r\n<\/pre>\n<\/blockquote>\n
This is the styling for the currently selected tab. It is positioned
\nrelatively so that the bottom overlaps the tab bar.<\/p>\n
\n
 \r\n#tabbar a.current {\r\n  position: relative;\r\n  top: 0.1em;\r\n  color: #0066FF;\r\n  background-color: #FFFFFF;\r\n  font-weight: bold;\r\n  border-bottom: 1px solid #FFFFFF;\r\n  border-top: 2px solid #0066FF;\r\n}\r\n<\/pre>\n<\/blockquote>\n
Finally, some minimal styling for the tab content.<\/p>\n
\n
 \r\n#tabcontent {\r\n  margin-left: 0.5em;\r\n  padding: 1em;\r\n}\r\n<\/pre>\n<\/blockquote>\n
A fairly simple tabbed interface with a minimal amount of CSS. The example directory containing all the files is here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-12","post","type-post","status-publish","format-standard","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":0,"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gurnaik.com\/blog\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}