1

Im design a navigation bar for a webpage in jsf.

I want some links to be on the right of the bar and some on the left. It doesnt seem to work.

Any ideas?

<h:panelGrid columnus="2">
<h:panelGroup styleClass="alignmentLeft">
    <h:panelGrid columns = "2" columnsClasses = "alignmentLeft">
        <h:outputLink>... </h:outputLink>
            <h:outputText/>
        <h:outputLink>... </h:outputLink>
        <h:outputText/>
    </h:panelGrid>
</h:panelGroup>
<h:panelGroup styleClass="alignmentRight">
    <h:panelGrid columns = "2" columnsClasses = "alignmentRight">
        <h:outputLink>... </h:outputLink>
            <h:outputText/>
        <h:outputLink>... </h:outputLink>
            <h:outputText/>
    </h:panelGrid>
</h:panelGroup>
</h:panelGrid>


.alignmentRight {
 text-align : right;
}
4

1 に答える 1

1

これを試してみてください。コーディングにも入力ミスがありました。「columnus」と入力した最初の h:panelGrid の列です。

スタイルシート内<h:head>で宣言する必要があります。

<h:head>
<h:outputStylesheet name="styles.css"
        library="css" />
</h:head>

次に<h:body>

<h:body> 
<h:panelGrid columns="2" width="600">
        <h:panelGroup>
            <h:panelGrid columns="2" columnClasses="alignmentLeft" width="200">
                <h:outputLink>...1 </h:outputLink>
                <h:outputLink>...2 </h:outputLink>
            </h:panelGrid>
        </h:panelGroup>
        <h:panelGroup>
            <h:panelGrid columns="2" columnClasses="alignmentRight" width="200">
                <h:outputLink>...3 </h:outputLink>
                <h:outputLink>...4 </h:outputLink>
            </h:panelGrid>
        </h:panelGroup>
    </h:panelGrid>
</h:body>

スタイル シート (styles.css) では、スタイルは次のとおりです。

.alignmentLeft {
 text-align : left;
 border: 1px solid black;
 background-color: orange;
}
.alignmentRight {
 text-align : right;
 border: 1px solid black;
 background-color: lime;
}
于 2012-12-06T06:38:44.927 に答える