Hallo allerseits,
Ich versuche gerade einen CSS Stylesheet auf eine .xhtml Datei meiner JSF Anwendung anzuwenden. Der Code dafür erscheint mir nach meiner Internetrecherche relativ schlüssig, doch leider zeigt die geladene Seite keinerlei CSS-Formatierung.
Ich nutze Eclipse EE und Glassfish als Server.
Zu erwähnen ist ggf. noch, dass weder die CSS-Styles aus der .css Datei, noch der Stype-tag, direkt in der .xhtml Datei eine Reaktion zeigen. Weitere Anpassungen im Projekt habe ich bzgl. CSS nicht vorgenommen, falls dort noch etwas notwendig sein sollte.
Vielen Dank schon mal fürs ansehen
und anbei der Code.
Ich versuche gerade einen CSS Stylesheet auf eine .xhtml Datei meiner JSF Anwendung anzuwenden. Der Code dafür erscheint mir nach meiner Internetrecherche relativ schlüssig, doch leider zeigt die geladene Seite keinerlei CSS-Formatierung.
Ich nutze Eclipse EE und Glassfish als Server.
Zu erwähnen ist ggf. noch, dass weder die CSS-Styles aus der .css Datei, noch der Stype-tag, direkt in der .xhtml Datei eine Reaktion zeigen. Weitere Anpassungen im Projekt habe ich bzgl. CSS nicht vorgenommen, falls dort noch etwas notwendig sein sollte.
Vielen Dank schon mal fürs ansehen
und anbei der Code.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Container</title>
<link href = "testcss.css" rel = "stylesheet" type = "text/css"/>
<style type ="text/css">
h3 {
color: "orange";
background: "red";
}
</style>
</h:head>
<h:body>
<h3>PanelGrid</h3>
<h:form>
<h:panelGrid columns = "3"
styleClass = "tableBackground"
columnClasses = "oddColumn, evenColumn, oddColumn, evenColumn"
rowClasses = "oddRow, evenRow"
headerClass = "tableHeader"
footerClass = "tableFooter">
<f:facet name="header">
<h:outputText value = "Headline"></h:outputText>
</f:facet>
<h:outputLabel value = "Name: " id = "txtName" ></h:outputLabel>
<h:inputText for = "txtName" value = "#{containerView.name}" > </h:inputText>
<h:outputLabel value = "#{containerView.name}"></h:outputLabel>
<h:outputLabel value = "Value 2: " id = "txtValue2" ></h:outputLabel>
<h:inputText for = "txtValue2" value = "#{containerView.value2}" > </h:inputText>
<h:outputLabel value = "#{containerView.value2}"></h:outputLabel>
<h:outputLabel value = "Value 3: " id = "txtValue3" ></h:outputLabel>
<h:inputText for = "txtValue3" value = "#{containerView.value3}" > </h:inputText>
<h:outputLabel value = "#{containerView.value3}"></h:outputLabel>
<f:facet name="footer">
<h:commandButton value = "Send"></h:commandButton>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
CSS:
@charset "ISO-8859-1";
.tableBackground {
background-color: "red";
}
.oddColumn {
background-color: "grey";
}
.evenColumn {
background-color: "white";
}
.oddRow {
font-weight: "bold";
color: "aqua";
}
.evenRow {
font-style: "italic";
color: "green";
}
.tableHeader {
font-size: "larger";
}
.tableFooter {
font-size: "x-small";
}
