Rounded Tabs

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,809 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,853 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3061 | Replies: 9

•

Join Date: Apr 2007

Posts: 18

Reputation: Arch_Bytes is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Arch_Bytes Arch_Bytes is offline

Offline

Newbie Poster

Rounded Tabs

Apr 12th, 2007

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

•

Join Date: Oct 2006

Location: India

Posts: 1,289

Reputation: vishesh is on a distinguished road

Rep Power: 5

Solved Threads: 32

vishesh

Offline

Nearly a Posting Virtuoso

Re: Rounded Tabs

Apr 12th, 2007

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

•

Join Date: Apr 2007

Posts: 18

Reputation: Arch_Bytes is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Arch_Bytes Arch_Bytes is offline

Offline

Newbie Poster

Re: Rounded Tabs

Apr 12th, 2007

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

•

Join Date: Mar 2005

Location: Nebraska, U.S.

Posts: 190

Reputation: stupidenator is an unknown quantity at this point

Rep Power: 4

Solved Threads: 4

stupidenator stupidenator is offline

Offline

Junior Poster

Re: Rounded Tabs

Apr 12th, 2007

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

•

Join Date: Apr 2007

Location: Amsterdam, the Netherlands

Posts: 2

Reputation: kidslimmer is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

kidslimmer kidslimmer is offline

Offline

Newbie Poster

Re: Rounded Tabs

Apr 16th, 2007

You might want to check this article:

A List Apart - Sliding Doors of CSS

•

Join Date: Apr 2007

Posts: 18

Reputation: Arch_Bytes is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Arch_Bytes Arch_Bytes is offline

Offline

Newbie Poster

Re: Rounded Tabs

Apr 16th, 2007

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

Help with Code Tags

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

•

Join Date: Feb 2002

Location: Lawn Guylen, NY

Posts: 10,949

Reputation: cscgal is just really nice

Rep Power: 32

Solved Threads: 116

cscgal

Online

The Queen of DaniWeb

Re: Rounded Tabs

Apr 16th, 2007

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.

Dani the Computer Science Gal
Do you run a computer-related website? Feature it in our niche link directory!

•

Join Date: Apr 2007

Location: FL

Posts: 16

Reputation: connor4312 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

connor4312 connor4312 is offline

Offline

Newbie Poster

Re: Rounded Tabs

Apr 16th, 2007

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

•

Join Date: Apr 2007

Posts: 18

Reputation: Arch_Bytes is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

Arch_Bytes Arch_Bytes is offline

Offline

Newbie Poster

Re: Rounded Tabs

May 3rd, 2007

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?

•

Join Date: Apr 2007

Location: FL

Posts: 16

Reputation: connor4312 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

connor4312 connor4312 is offline

Offline

Newbie Poster

Re: Rounded Tabs

#10

May 6th, 2007

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

•

Only community members can participate in forum threads. You must register or log in to contribute.

•

DaniWeb HTML and CSS Marketplace

•

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

•

Thread Tools	Display Modes
Show Printable Version Email this Page	Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

•

Other Threads in the HTML and CSS Forum

Previous Thread: Help with menu disappearing.
Next Thread: Copying styles from one window to another...

DaniWeb Home > Forums > Web Development > Web Design > HTML and CSS

Rounded Tabs

Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs

Re: Rounded Tabs