0

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

6
Contributors
9
Replies
10
Views
11 Years
Discussion Span
Last Post by connor4312
0

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

0

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

0

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

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.

0

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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.