css thoughts tag:gabriel.prat.name,2009-10-12:/css/1 2009-11-08T20:02:15Z xhtml and css solutions to create standard, semantic and simple layouts and widgets for your web pages. Movable Type 5.12 Nice css/xhtml accessible tabbed navigation tag:gabriel.prat.name,2009:/css//1.3 2009-11-08T17:18:14Z 2009-11-08T20:02:15Z Why is it better than other tabbed navigations? The tab size change to fit its text Tabs keep the elements' inline display so it can be used in a line of text As they are not a block elements,... Gabri Why is it better than other tabbed navigations?
  • The tab size change to fit its text
  • Tabs keep the elements' inline display so it can be used in a line of text
  • As they are not a block elements, no float is needed so they can be centered or used inside a floated container
  • They have a pure CSS [CSS] rollover and pushed effects (except in IE6)
  • They use only one image to improve download speed and avoid delays showing the rollover or pushed effects
  • They have simple semantic valid XHTML strict markup and valid CSS 2.1 without any hacks or tricks
  • They set WAI-ARIA [ARIA] role attributes on the elements to help user agents and assistive technology understand what the markup semantics.
  • Tested with IE5, IE5.5, IE6, IE7, IE8, FF1, FF2, FF3, Opera 9, Opera 10, Konkeror 4.2, Epiphany 2.2, Safari 3, Safari 4, Chrome 3 and Chrome 4. Available versions for Windows and Ubuntu linux.

Doctype

In the current WAI-ARIA Best Practices [ARIA-PRACTICES] we can read:

WAI-ARIA markup is currently not included in (X)HTML. The W3C WAI PF working group will be creating DTDs for XHTML 1.0 and HTML 4.01 for those wishing to validate their markup with WAI-ARIA embedded into these host languages.

But I wanted my documents to validate using the w3c validator so I decided to host a copy of the provisional XHTML+ARIA DTD and set it as the doctype.

<!DOCTYPE html PUBLIC "Accessible Adaptive Applications//EN" 
    "http://gabriel.prat.name/css.back/xhtml-aria.dtd">

Basically the document is XHTML 1.1 plus an extension module [XHTMLMOD] with all the WAI-ARIA attributes.

If you don't care about XHTML validation, you could use a normal XHTML 1.0 doctype instead.

Markup

The markup consists of an ul for the tab list containing a link in each child li. The tab panel consists of a div with two sections: a header and a footer. The header consists of another div (necessary to display the rounded corners) with a child h2 which could easily be replaced with another level heading if needed. The body of the tab panel is just another div that also helps displaying the rounded corners of the panel.

No element is floated, the list elements have display:inline to display them one next to another, so they can be centered, floated or used within a line of text.

In the example the markup of the navigation tabs is below the main content of the page to preserve the logical information structure of the page. Showing the main content in the first place to the user (and to the search engines) to give it more importance than the navigation links. To position them they are both included in a div with id="content".

<div id="content">
<div class="tabpanel" role="tabpanel main">
        <div class="hd">
                <h2>This is the tab contents title</h2>
        </div>
        <div class="bd">
		<p>Some paragraphs of text</p>
	</div>
</div>
<h2 class="hide" id="main-nav-label">Main navigation</h2>
<ul class="tablist" role="navigation tablist" aria-labelledby="main-nav-label">
        <li role="tab" tabindex="-1"><a href="#"><span>A tab</span> </a></li>
        <li role="tab" tabindex="-1"><a href="#"><span>Another tab</span> </a></li>
        <li role="tab" class="selected" tabindex="0"><a href="#"><span>Current tab</span></a></li>
        <li role="tab" tabindex="-1"><a href="#"><span>The last tab</span> </a></li>
</ul>
</div>
</div>

Background images

Two background images are used. One for the tabs and another for the tab panel.

The tabs background image has three sprites, the upper one is used to display the tab in its normal state, the middle one to show the rollover effect and the bottom one is for the selected tab.

button

The tab panel background image is just a rounded corners square as big as the maximum desired size of the panel (1000x1000 pixels on our example). Not fully displayed in the image below.

button

WAI-ARIA roles and attributes

The main content of the page is placed inside the tab panel, so the tab panel has the main role. From the specification [ARIA] in the main role definition:

This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by an assistive technology.

It is also given the tabpanel role following the tabpanel design pattern in the WAI-ARIA best practices [ARIA-PRACTICES].

The ul are given the tablist and tab roles following the same design pattern linked above. In this way the user-agent or the assistive technologies can identify the list and the panel to be part of a single tab panel widget and help the user interact with it.

Finally, as in our example the tab panel is not a simple panel in a page but it is also the main navigation of the site, the role navigation is also given to the tab list.

Some other WAI-ARIA attributes are used following the tabpanel design pattern linked above.

CSS

The first part of the CSS controls the global position of the tabs and tab panel inside the content div. It basically positions the tabs at the top of the content div and the tab panel just below them.

#content {
	position: relative;
	width: 80%;
	margin: auto;
}

#content .tablist {
	position: absolute;
	top: 0;
	left: 50px;
	width: 100%;
}

#content .tabpanel {
	position: relative;
	top: 44px;
	left: 0;
	margin-bottom: 50px;
}

The next section sets the inline display of the tabs and adjusts font sizes and line heights to make the images align properly. It also sets the background images for the different states of the tabs

ul.tablist {
	display: inline;
	font-size: 38px;
	height: 44px;
	line-height: 44px;
	list-style-image: none;
	list-style-type: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

ul.tablist li {
	background: #e4e4e4 url(tabs.gif) no-repeat left top;
	display: inline;
	margin: 0 0.1em 0 0;
	padding: 0 0 0 0.5em;
}

ul.tablist li a span {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 16px;
	vertical-align: middle;
	line-height: 51px;
}

ul.tablist li a {
	background: url(tabs.gif) no-repeat right top;
	color: #888;
	display: inline;
	padding: 0 0.5em 0 0;
	text-decoration: none;
}

ul.tablist li.selected {
	background-position: left -88px;
}

ul.tablist li.selected a {
	background-position: right -88px;
	color: #000;
}

ul.tablist li:hover {
	background-position: left -44px;
}

ul.tablist li:hover a {
	background-position: right -44px;
}

ul.tablist li.selected:hover {
	background-position: left -88px;
}

ul.tablist li.selected:hover a {
	cursor: default;
	background-position: right -88px;
}

ul.tablist li.selected {
	cursor: default;
}

Finally the last section controls the display of the tab panel, setting the background image to its different elements to produce the effect of the rounded corners.

.tabpanel {
	background: #e4e4e4;
	margin: auto;
}

.tabpanel h2 {
	margin: 0 0 1em 0;
	color: #2e2e2e;
	font-size: 2em;
	font-style: normal;
	font-weight: bold;
}

.tabpanel  ,.tabpanel .bd,.tabpanel .hd,.tabpanel .hd h2 {
	background: transparent url(round-box.gif) no-repeat bottom right
}

.tabpanel {
	padding-right: 15px;
	margin: auto;
	max-width: 1000px;
	max-height: 1000px;
}

.tabpanel .hd {
	background-position: top right;
	margin-right: -15px;
	padding-right: 40px
}

.tabpanel .hd h2 {
	background-position: top left;
	margin: 0;
	border: 0;
	padding: 25px 0 15px 40px;
}

.tabpanel .bd {
	background-position: bottom left;
	margin-right: 25px;
	padding: 15px 0 15px 40px;
}

Example

In the following page you can see an accessible tabbed navigation example.

References

[ARIA]
Accessible Rich Internet Applications (WAI-ARIA) Version 1.0. L. Seeman, M. Cooper, R. Schwerdtfeger, L. Pappas, Editors, W3C Working Draft (work in progress), 24 February 2009. This version of WAI-ARIA is available at http://www.w3.org/TR/2009/WD-wai-aria-20090224/. Latest version of WAI-ARIA available at http://www.w3.org/TR/wai-aria/.
[ARIA-PRACTICES]
WAI-ARIA Best Practices. L. Pappas, R. Schwerdtfeger, M. Cooper, Editors, W3C Working Draft (work in progress), 24 February 2009. This version of WAI-ARIA Best Practices is available at http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/. Latest version of WAI-ARIA Best Practices available at http://www.w3.org/TR/wai-aria-practices/.
[CSS]
Cascading Style Sheets, level 2 (CSS2) Specification, I. Jacobs, B. Bos, H. Lie, C. Lilley, Editors, W3C Recommendation, 12 May 1998, http://www.w3.org/TR/1998/REC-CSS2-19980512/. Latest version of CSS2 available at http://www.w3.org/TR/CSS2/.
[XHTMLMOD]
XHTML™ Modularization 1.1 , S. Peruvemba, S. McCarron, D. Austin, M. Ishikawa, M. Birbeck, Editors, W3C Recommendation, 8 October 2008, http://www.w3.org/TR/2008/REC-xhtml-modularization-20081008/. Latest version available at http://www.w3.org/TR/xhtml-modularization/.
]]> Cross-browser inline rounded-corners input buttons and links tag:gabriel.prat.name,2009:/css//1.2 2009-10-12T18:04:31Z 2011-09-26T21:18:34Z Why are they better than other rounded corners input buttons and links? Their size change to fit the button text They keep the elements' inline display so it can be used in a line of text As thay are not... Gabri Why are they better than other rounded corners input buttons and links?
  • Their size change to fit the button text
  • They keep the elements' inline display so it can be used in a line of text
  • As thay are not a block elements, no float is needed so they can be centered or used inside a floated container
  • They have a pure css rollover and pushed effects (except in IE6)
  • They use only one image to improve download speed and avoid delays showing the rollover or pushed effects
  • They have simple semantic valid XHTML strict markup and valid CSS 2.1 without any hacks or tricks
  • Tested with IE5, IE5.5, IE6, IE7, IE8, FF1, FF2, FF3, Opera 9, Opera 10, Konkeror 4.2, Epiphany 2.2, Safari 3, Safari 4, Chrome 3 and Chrome 4. Available versions for Windows and Ubuntu linux.

Doctype

This example requires an xhtml-transitional doctype to work, but it can be easily adapted to xhtml strict by adding position: relative; and top: -3px; to the .button span span code to correct the vertical alignment of the text. The number of pixels in the top may vary according to the button and font sizes.

Markup

The markup of the link consists of an a tag around two span tags. The button's text is written into the inner span. Note that all tags are inline tags so the button can be used both in a line of text or in a block container. The use of the three tags is needed to support the sliding door technique and make the code work in FF2 that does not implement the inline-block display type. The a tag displays the right corner of the image and the outer span displays the left one. The elements have the same background image but they display different parts of it to create the effect of the sliding door. The background image has to be wide enough to fit the desired button's text. In this example the button can be at most 400px wide, but wider buttons can be displayed by creating a bigger image.

A button class has been applied to the a tag to give it the button look and feel. Styles for the span tags are assigned with descendant selectors.

<a href="#" class="button"><span><span>button text</span></span></a>

The markup of the input version follows the same principles and consists of two span tags surrounding the input button.

<span class="button"><span><input type="submit" value="button text" /></span></span>

Background image

The background image has three buttons, the upper one is used to display the button in its normal state and the middle one to show the rollover effect and the bottom one is for the pushed button effect. The white space between them is necessary to avoid a bug in the vertical alignment in IE6 display unwanted parts of the image.

button

CSS

.button {
	cursor:pointer;
	text-decoration:none;
	background:url(bg-btn-corp2.gif) no-repeat right top; 
	padding-right:10px; 
	display:inline-block;
	line-height:29px;
	height:29px;
	font-size:24px;
	color:#FFFFFF;
	font-weight:bold;
}

span.button {
	vertical-align: middle;
}

.button span { 
	background:url(bg-btn-corp2.gif) no-repeat left top; 
	padding-left:10px;
	line-height:29px;
	height:29px;
	display:inline-block;
}

.button span span {
	background:transparent;
	padding:0;
	
	font-size:14px;
}

.button span input {
	cursor:pointer;
	font-family: inherit;
	font-weight:bold;
	background:transparent;
	border:0;
	padding-top:5px;
	font-size:14px;
	color:#FFFFFF;
}


.button:hover {
	background-position:right -39px;
}

.button:hover span {
	background-position:left -39px;
}

.button:active {
  background-position:right -78px;
}

.button:active span {
  background-position:left -78px;
}

Examples

In a line of text

These and links are used as inline in a line of text.

Within lists

  2. link1

In floated containers

This example shows the use of button-like links inside floated containers.
This div is left floated and contains a and a link
This div is right floated and contains and another link

Centered

Centered link
]]>