Rounded Tabs

[Arch_Bytes]

hey guys.. im kinda new to Web App development especially CSS.. so I was woundering what would be the best way to create rounded tabs without using the AJAX thingy or JavaScript.. thanks in advance..^_^

-ArchAngel

[vishesh]

You could do that using images, css and tables too. There are also few snippets available in javascript over the web.
http://www.sitepoint.com/article/css-round-corners-boxes-curves

[Arch_Bytes]

is there a way that i can have two background images for one class in CSS?

[stupidenator]

I don't believe that you can have two backgrounds for one element. However, Let's say you have a , and then inside that, you use something like . Both the and the element can have their own background

[kidslimmer]

You might want to check this article:

A List Apart - Sliding Doors of CSS

[Arch_Bytes]

alright.. i was able to create the rounded tabs.. using tags.. and it turned out great.. the tabs were also horizontal.. so i tried to do it again.. you know create another horizontal row.. not tabs just plain texts.. but then it didn't work.. the UL now became vertical.. why is that? how will i solve this? here's my code..

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>

<f:subview id="steps">
<%-- call to set the step --%>
<h:outputText value="#{addEditController.step}"/>

 
 
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td colspan="8" align="center">Your Listing Level is <b><h:outputText value="#{addEditController.currentListingLevel.title }"/></b><h:outputText rendered="#{addEditController.supplierTnid > 1}" value="Listing ID #{addEditController.supplierTnid}"/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<div id= "navtab2">
<ul>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 0}"/><h:outputText value="" rendered="#{addEditController.currentStep != 0}"/>"NOWRAP>
<span><h:commandLink value="Step 0: Admin" action="#{addEditController.adminStep}"/></span>
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 1}"/><h:outputText value="" rendered="#{addEditController.currentStep != 1}"/>"NOWRAP>
<span><h:commandLink value="Step 1: General " action="#{addEditController.generalStep}"/></span> 
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 2}"/><h:outputText value="" rendered="#{addEditController.currentStep != 2}"/>"NOWRAP>
<span><h:commandLink value="Step 2: Contacts " action="#{addEditController.contactsStep}"/></span>
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 3}"/><h:outputText value="" rendered="#{addEditController.currentStep != 3}"/>" NOWRAP>
<span><h:commandLink value="Step 3: Categories " action="#{addEditController.categoriesStep}"/></span>
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 4}"/><h:outputText value="" rendered="#{addEditController.currentStep != 4}"/>"NOWRAP>
<span><h:commandLink value="Step 4: Brands " action="#{addEditController.brandsStep}"/></span>
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 5}"/><h:outputText value="" rendered="#{addEditController.currentStep != 5}"/>"NOWRAP>
<span><h:commandLink value="Step 5: Ports " action="#{addEditController.portsStep}"/></span>
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 6}"/><h:outputText value="" rendered="#{addEditController.currentStep != 6}"/>"NOWRAP>
<span><h:commandLink value="Step 6: Media " action="#{addEditController.mediaStep}"/></span>
</li>
<li id="<h:outputText value="current" rendered="#{addEditController.currentStep == 7}"/><h:outputText value="" rendered="#{addEditController.currentStep != 7}"/>"NOWRAP>
<span><h:commandLink value="Step 7: Publish " action="#{addEditController.publishStep}"/></span>
</li>
</ul>
</div> 
</tr>
</table>


<div id = "stepStatus">
<ul>
<li>
<h:outputText value="For Administrators Only" style="font-size:9px;"/>
</li>
<li>
<h:outputText value="Complete" rendered="#{addEditController.supplier.generalComplete}" style="font-weight:bold;color:green;"/>
<h:outputText value="Incomplete" rendered="#{not addEditController.supplier.generalComplete}" style="font-weight:bold;color:red;"/>
</li>
<li>
<h:outputText value="#{addEditController.supplier.contactPersonsSize}"/> of <h:outputText value="#{addEditController.currentListingLevel.contacts }" rendered="#{addEditController.currentListingLevel.contacts < 2147483647}"/>
<h:outputText value="Unlimited" rendered="#{addEditController.currentListingLevel.contacts == 2147483647}"/>

<h:outputText rendered="#{!addEditController.supplier.haveAdminContact}" value="Incomplete" style="font-weight:bold;color:red;"/>
<h:outputText style="font-weight:bold;color:green;" rendered="#{addEditController.supplier.haveAdminContact}" value="Complete"/>
</li>
<li>
<h:outputText value="#{addEditController.supplier.categoriesSize}"/> of <h:outputText value="#{addEditController.currentListingLevel.categories }" rendered="#{addEditController.currentListingLevel.categories < 2147483647}"/>
<h:outputText value="Unlimited" rendered="#{addEditController.currentListingLevel.categories == 2147483647}"/>

<h:outputText rendered="#{addEditController.supplier.categoriesSize < 1}" value="Incomplete" style="font-weight:bold;color:red;"/>
<h:outputText style="font-weight:bold;color:green;" rendered="#{addEditController.supplier.categoriesSize >=1}" value="Complete"/>
</li>
<li>
<h:outputText value="#{addEditController.supplier.brandsSize}"/> of <h:outputText value="#{addEditController.currentListingLevel.brands }" rendered="#{addEditController.currentListingLevel.brands < 2147483647}"/>
<h:outputText value="Unlimited" rendered="#{addEditController.currentListingLevel.brands == 2147483647}"/>

<h:outputText rendered="#{addEditController.supplier.brandsSize < 1}" value="Incomplete" style="font-weight:bold;color:red;"/>
<h:outputText style="font-weight:bold;color:green;" rendered="#{addEditController.supplier.brandsSize >=1}" value="Complete"/>
</li>
<li>
<h:outputText value="#{addEditController.supplier.portsSize}"/> of <h:outputText value="#{addEditController.currentListingLevel.ports }"/>

<h:outputText rendered="#{addEditController.supplier.portsSize < 1}" value="Incomplete" style="font-weight:bold;color:red;"/>
<h:outputText style="font-weight:bold;color:green;" rendered="#{addEditController.supplier.portsSize >= 1}" value="Complete"/>
</li>
<li>
<h:panelGroup rendered="#{addEditController.currentListingLevel.media > 0}">
<h:outputText value="#{addEditController.supplier.mediaSize} of #{addEditController.currentListingLevel.media }" escape="false"/> 
<h:outputText value="#{addEditController.supplier.attachmentsSize} of #{addEditController.currentListingLevel.attachmentSize}KB" escape="false"/>
<h:outputText rendered="#{addEditController.supplier.mediaSize < 1 }" value="Incomplete" style="font-weight:bold;color:red;"/>
<h:outputText style="font-weight:bold;color:green;" rendered="#{addEditController.supplier.mediaSize >=1}" value="Complete"/>
</h:panelGroup>
<h:panelGroup rendered="#{addEditController.currentListingLevel.media == 0}">
<h:outputText style="font-size:9px;" value="Only Available to subscribed Suppliers"/>
</h:panelGroup>
</li>
</ul>
</div>
</f:subview>

[cscgal]

CSS3 (still wildly unsupported) will have support for multiple backgrounds per div. For now you'll have to use nested divs, each with its own background (ie one for top right corner and one for top left corner).

However, a single element can have multiple classes ... ie class="class1 class2" although, should both have a background image, they won't both apply.

CSS3 will also have built-in support for rounded corners on divs, customizable by setting a radius parameter.

[connor4312]

Go to dynamicdrive.com and if ur desperate they have neat CSS menus there

[Arch_Bytes]

ok.. so i've created an image of a full rounded tab.. and I'm using a table so that I can align it the way I want it without having the tab wrapped.. no my problem is that the css doesn't seem to be working cause the tab image and the value its supposed to have are side by side.. is it possible for the text to go on the Tab image not beside it?

[connor4312]

Yes, if you have it alinged as a background image, and aling the text on it.