Tabs Extending Beyond Content

Pixel-Industry · 09-26-2010, 10:46 AM

A recent, possibly fading, trend in design is to have little tabs or buttons extend beyond the content as seen in the picture above. As far as coding this what is the best technique?

A. Extending the container div wider and use margins to push content further over

or

B. Use position: absolute; to extend the tab beyond that container...

Also, what is the most effective and compliant way to achieve vertical text as seen in the above picture?

DylanButler · 10-03-2010, 12:27 PM

1. B. Use position:absolute and then javascript to hide it when the user's browser is not wide enough to achieve consistent horizontal scrollbars in all browsers.

2. Use transform:rotate. See Text Rotation with CSS - Snook.ca.

09-26-2010, 10:46 AM	THREAD STARTER #1 (permalink)
Pixel-Industry NamePros Member Join Date: Jun 2007 Posts: 53	Tabs Extending Beyond Content A recent, possibly fading, trend in design is to have little tabs or buttons extend beyond the content as seen in the picture above. As far as coding this what is the best technique? A. Extending the container div wider and use margins to push content further over or B. Use position: absolute; to extend the tab beyond that container... Also, what is the most effective and compliant way to achieve vertical text as seen in the above picture? __________________ cPanel-Hosters - High-End cPanel Hosting at Great Prices

10-03-2010, 12:27 PM	#2 (permalink)
DylanButler NamePros Regular Join Date: Jan 2006 Location: San Diego, CA Posts: 734	1. B. Use position:absolute and then javascript to hide it when the user's browser is not wide enough to achieve consistent horizontal scrollbars in all browsers. 2. Use transform:rotate. See Text Rotation with CSS - Snook.ca. __________________ -Dylan Butler EXAMP - San Diego Web Design

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)