 |  |  |  |  |  |  |  |
Rounded Tabs
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
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
-ArchAngel
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: 
Solved Threads: 36
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...s-boxes-curves
http://www.sitepoint.com/article/css...s-boxes-curves
I don't believe that you can have two backgrounds for one element. However, Let's say you have a <div>, and then inside that, you use something like <h1>. Both the <div> and the <h1> element can have their own background
alright.. i was able to create the rounded tabs.. using <div><ul><li> 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><br><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> <br><br><br> <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}"/> <br> <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}"/> <br> <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}"/> <br> <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 }"/> <br> <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 }<br>" escape="false"/> <h:outputText value="#{addEditController.supplier.attachmentsSize} of #{addEditController.currentListingLevel.attachmentSize}KB<br>" 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>
•
•
Join Date: Feb 2002
Posts: 12,036
Reputation: 
Solved Threads: 130
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
CSS3 will also have built-in support for rounded corners on divs, customizable by setting a radius parameter.
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.
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?
|
Other Threads in the HTML and CSS Forum
- Previous Thread: Help with menu disappearing.
- Next Thread: Copying styles from one window to another...
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
