My Train Result:
Reference Result:
Difference between my version and the reference (On adjusting the browser):
TrainStop.jsf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="TrainStopPage.jsf" id="d1">
<af:form id="f1">
<af:outputText value="Difference" id="ot6" inlineStyle="font-weight:bold; text-align:center;"/>
<af:panelBox id="pb1">
<af:panelList id="pl1" styleClass="customBreadcrumb">
<af:outputText id="ot1" value="Step 1" clientComponent="true"/>
<af:outputText id="ot2" value="Step 2" clientComponent="true"/>
<af:outputText id="ot3" value="Step 3" clientComponent="true"/>
<af:outputText id="ot4" value="Step 4" clientComponent="true"/>
<af:outputText id="ot5" value="Step 5" clientComponent="true"/>
</af:panelList>
</af:panelBox>
</af:form>
</af:document>
</f:view>
CSS:
/* Custom Breadcrumb - Start */
.customBreadcrumbBeforeAfter:alias {
content: no-open-quote;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
position: absolute;
left: 100%;
margin-top: -21px;
}
.customBreadcrumbTrainHighlight:alias{
font-size: 12px;
font-weight: bold;
}
af|panelList.customBreadcrumb ul {
overflow: hidden;
}
af|panelList.customBreadcrumb li {
float: left;
}
af|panelList.customBreadcrumb li span:hover {
text-decoration: underline;
font-style: italic;
}
af|panelList.customBreadcrumb li, af|panelList.customBreadcrumb li span {
color: white;
padding: 10px 5px 10px 15px;
background: blue;
display: block;
position: relative;
}
af|panelList.customBreadcrumb li:not( last-child), af|panelList.customBreadcrumb li:not( last-child) span {
background-color: yellow;
color: black;
font-size: 12px;
font-weight: bold;
}
af|panelList.customBreadcrumb li:first-child, af|panelList.customBreadcrumb li:first-child span {
background-color: blue;
color: black;
-tr-rule-ref: selector("customBreadcrumbTrainHighlight:alias");
}
af|panelList.customBreadcrumb li:last-child, af|panelList.customBreadcrumb li:last-child span {
background-color: maroon;
color: black;
-tr-rule-ref: selector("customBreadcrumbTrainHighlight:alias");
}
af|panelList.customBreadcrumb li span:before {
border-left: 28px solid white;
z-index: 1;
margin-left: 2px;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}
af|panelList.customBreadcrumb li span:before {
border-left: 28px solid white;
z-index: 1;
margin-left: 2px;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}
af|panelList.customBreadcrumb li:not( last-child) span:after {
border-left: 28px solid yellow;
z-index: 2;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}
af|panelList.customBreadcrumb li:first-child span:after {
border-left: 28px solid blue;
z-index: 2;
-tr-rule-ref: selector("customBreadcrumbBeforeAfter:alias");
}
af|panelList.customBreadcrumb li:last-child span:before {
border-left: 0px solid maroon;
}
af|panelList.customBreadcrumb li:last-child span:after {
border-left: 0px solid maroon;
}
/* Custom Breadcrumb - End */
Reason why ul, li, span elements are used in CSS:
Note: To view Reference result - Go to the link mentioned above and copy paste the code.
Cool, thanks for improving. Now it is more responsive :)
ReplyDelete