?
Solved

Tab Style

Posted on 2011-04-19
3
Medium Priority
?
183 Views
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.
0
Comment
Question by:tonelm54
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
khan_webguru earned 2000 total points
ID: 35422654
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
 

Author Comment

by:tonelm54
ID: 35423503
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
 

Author Comment

by:tonelm54
ID: 35481300
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month16 days, 6 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question