• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 186
  • Last Modified:

Tab Style

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.
0
tonelm54
Asked:
tonelm54
  • 2
1 Solution
 
khan_webguruCommented:
yes you can do this by using table in your div just create three column for the table and set color that you want like this

Just copy and paste the code in html file and see in browser you will get the idea

 
<div class="tabStyle">
<table>
                                                                <tr>
                                                                    <td id="tdLink1" style="text-align:center;list-style-type: none;float: left;margin: 0 0 0 4px;padding: 0 0 0 10px;border-bottom: 1px solid #999;background: url(http://localhost/Morc_Demo/Common/default.gif) #cbb77a top left no-repeat;min-width: 126px;min-height: 28px;"><a enableviewstate="true" runat="server" id="lnkOne" style="text-decoration:none;color: #fff;background: url(http://localhost/Morc_Demo/Common/default.gif) transparent top right no-repeat;display: block;padding: 0 10px 0 0;" href="http://www.google.com" target="_blank">Consulation Request</a></td>
                                                                    <td id="tdLink2" style="text-align:center;list-style-type: none;float: left;margin: 0 0 0 4px;padding: 0 0 0 10px;border-bottom: 1px solid #999;background: url(http://localhost/Morc_Demo/Common/default.gif) #cbb77a top left no-repeat;min-width: 126px;min-height: 28px;"><a enableviewstate="true" runat="server" id="lnkTwo" style="text-decoration:none;color: #fff;background: url(http://localhost/Morc_Demo/Common/default.gif) transparent top right no-repeat;display: block;padding: 0 10px 0 0;" href="http://www.macrosoftinc.com" target="_blank">Loan Request</a></td>
                                                                    <td id="tdLink3" style="text-align:center;list-style-type: none;float: left;margin: 0 0 0 4px;padding: 0 0 0 10px;border-bottom: 1px solid #999;background: url(http://localhost/Morc_Demo/Common/default.gif) #cbb77a top left no-repeat;min-width: 126px;min-height: 28px;"><a enableviewstate="true" runat="server" id="lnkThree" style="text-decoration:none;color: #fff;background: url(http://localhost/Morc_Demo/Common/default.gif) transparent top right no-repeat;display: block;padding: 0 10px 0 0;" href="http://www.experts-exchange.com" target="_blank">Start The Application Process</a></td>
                                                               </tr>                                                            </table>
    <div style="position:relative;min-width:100%;min-height:150px;background-color:#cbb77a;"></div>
</div>

Open in new window


Change accordingly I am currently using like this in my project so just giving you.

You can see the Live demo here

http://jsfiddle.net/TeWsw/115/

see the bottom-right pane of this link as a output

Thanks,

Asif Ahmed KHan
0
 
tonelm54Author Commented:
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;}
0
 
tonelm54Author Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now