We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now


Tab Style

tonelm54 asked
Medium Priority
Last Modified: 2012-05-11
Good morning,
Im still very early in learning CSS and I need to develop a Tab style menu option.

I can design the tab nicely by putting 3 divs in (1 for left side slant of tab, 1 with the background set as grey, and the last for the right side of the tab). What Im wondering is it is possible to put it all in one div, so to call it all I just need to put the text in, so for example:-
<div class="tabStyle">Tab Text</div>

And it automatically puts in the left slant, the right slant, and fills the middle in with whatever colour I want?

Thanks in advance for any assistance.
Watch Question

Unlock this solution with a free trial preview.
(No credit card required)
Get Preview


Sorry, but I wanted to get away from putting everything in the page.
What I wanted to do, is do something like:-
               <div class="tabStyle">Tab Text</div>

And then declare tabStyle like:-
          tabStyle{include: tabStyle.tabLeft; include: tabStyle.tabRight;}
          tabStyle.tabLeft{background-image:url('img_tabLeft.png'); background-repeat:no-repeat;}
          tabStyle.tabRight{background-image:url('img_tabRight.png'); background-repeat:no-repeat;}


What I actually did in the end was whenever I needed to draw a tab call a php function, which drew in the left and the right parts of the tab and the middle without having to code it every time.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.