Skip to content

CSS Tabs

June 13, 2008

First I needed to understand how to get the edges to the tabs:

1. Create a list in html and set its style to display:inline

2. Then set its bg color and also an image that tapers in the left

3. for the right image – create a span element and taper it with another image positioned top right

Very neat – understood this from the site : http://www.sitepoint.com/article/accessible-menu-tabs

Stumbled on the site: http://labs.silverorange.com/archives/2004/may/updatedsimple

Silverorange looks to be such a wonderful company to work for – but it is in canada and I am no CSS Expert 🙂

Now – downloaded the css cheatsheat – pdf and settings all css properties to get the right look and feel for my tabs. Apparently the tab. js in liferay 4.4.1 is not working as expected – that is it expects all the classes set for each list item – so got hold of the latest jquery.tabs.js from the owner’s site and then modifying the css for it to work in liferay.

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: