Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 8307

Apr 12th, 2007

Rounded Tabs

Expand Post »

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

Arch_Bytes

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Apr 2007

Permalink

Apr 12th, 2007

Re: Rounded Tabs

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

vishesh

Reputation Points: 85

Solved Threads: 42

Nearly a Posting Virtuoso

Offline

1,362 posts
since Oct 2006

Permalink

Apr 12th, 2007

Re: Rounded Tabs

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

Arch_Bytes

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Apr 2007

Permalink

Apr 12th, 2007

Re: Rounded Tabs

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

stupidenator

Reputation Points: 18

Solved Threads: 4

Junior Poster

Offline

192 posts
since Mar 2005

Permalink

Apr 16th, 2007

Re: Rounded Tabs

You might want to check this article:

A List Apart - Sliding Doors of CSS

kidslimmer

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Apr 2007

Permalink

Apr 16th, 2007

Re: Rounded Tabs

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..

(Toggle Plain Text)

<%@ 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>

<%@ 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>

Arch_Bytes

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Apr 2007

Permalink

Apr 16th, 2007

Re: Rounded Tabs

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.

cscgal

Administrator

Staff Writer

Reputation Points: 1422

Solved Threads: 162

The Queen of DaniWeb

Offline

13,645 posts
since Feb 2002

Permalink

Apr 16th, 2007

Re: Rounded Tabs

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

connor4312

Reputation Points: 9

Solved Threads: 0

Newbie Poster

Offline

16 posts
since Apr 2007

Permalink

May 3rd, 2007

Re: Rounded Tabs

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?

Arch_Bytes

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

18 posts
since Apr 2007

Permalink

May 6th, 2007

Re: Rounded Tabs

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

connor4312

Reputation Points: 9

Solved Threads: 0

Newbie Poster

Offline

16 posts
since Apr 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Help with menu disappearing.

Next Thread in HTML and CSS Forum Timeline: Copying styles from one window to another...

DaniWeb Message

Cancel Changes

User Name
Password