CSS Styles mit JSF: relative Angaben ignoriert

Status
Nicht offen für weitere Antworten.
B

bananenkasper

Gast
Hallo zusammen!

ich probiere gerade mein Layout über CSS zu definieren.

Das sieht momentan so aus:
Code: 
<body>
	<h:outputText value="Testing Version!" styleClass="testing" id="testVersion" ></h:outputText>
</body>

Die zugehörige css-Datei:
Code: 
.testing
{
	font-size:200%; 
	color:red;
	text-align:center;
	text-decoration:underline;
}

Das klappt auch alles soweit, nur das "text-align:center" nicht!

Ein Ähnliches Problem habe ich auch an anderer Stellte mit "width:100%".
Ich habe den Eindruck, dass die Verfügbare Bildschirmbreite nicht ermittelt werden kann, wodurch relative Angaben wie "center" oder "100%" nicht berücksichtigt werden können.

Woran könnte das liegen?
 
Prismapanda

Prismapanda

Aktives Mitglied
Wenn ich mich recht erinnere, dann wird h:eek:utputText standardmäßig als span Element im Quelltext gerendert. Also ein inline HTML Element. Es ist nur so breit wie der Text, daher bringt der text-align nicht. Genausowenig lässt sich die Breite einstellen.

Eine Lösung wäre die Konvertierung in ein block Element:

.testing
{
display:block;
width:100%;
font-size:200%;
color:red;
text-align:center;
text-decoration:underline;
}

Nicht besonders schön und auch darauf angewiesen, dass der Browser mitspielt. Würde einfach ein block Element darum legen (z.B. <p style="text-align:center"> oder <div ...>).
 
B

bananenkasper

Gast
Habe jetzt
Code: 
<body>
	<h:outputText value="Testing Version!" styleClass="testing" id="testVersion" ></h:outputText>
</body>

geändert in

Code: 
<body>
<h:panelGrid styleClass="testing">
	<h:outputText value="Testing Version!" ></h:outputText>
</h:panelGrid>
</body>

jetzt klappt es auch mit dem TextAlign!
Allerdings ist der Text jetzt nicht mehr unterstrichen...
 
J

JanHH

Top Contributor
Na da brauchst Du wohl je eine style-class für das panelGrid und eine für den Text.

So richtig der Weisheit letzter Schluss ist das aber eh nicht, weil ein panelGrid ja eine table erzeugt, und dies mir nur um einen Text zentriert anzuzeigen etwas übertrieben aufwändig wirkt.

Ich würde da wohl entweder "ganz brutal" direkt HTML-Code schreiben, oder eine JSF-Komponentenbibliothek benutzen, die div-Elemente zur Verfügung stellt.
 
Noctarius

Noctarius

Top Contributor
Code: 
.testing, .testing span
{
	font-size:200%; 
	color:red;
	text-align:center;
	text-decoration:underline;
}

Einfach den selben Style für Parent- und Child Tag setzen :)
 
B

bananenkasper

Gast
Noctarius hat gesagt.:
Code: 
.testing, .testing span
{
	font-size:200%; 
	color:red;
	text-align:center;
	text-decoration:underline;
}

Einfach den selben Style für Parent- und Child Tag setzen :)
Zum Vergrößern anklicken....

Wenn ich das mache, zb. so:
Code: 
{
<h:panelGroup styleClass="testing">
	<h:outputText value="Testing Version!" styleClass="testing" ></h:outputText>
	</h:panelGroup>
}
hab ich im Endeffekt eine Schriftgröße von 400% und der Text ist wieder nicht zentriert...


Edit:

Code: 
<h:panelGroup styleClass="testing" layout="block">
	<h:outputText value="Testing Version!" ></h:outputText>
	</h:panelGroup>

So klappt es!
panelgroup mit layout="block" rendert ein "div" statt ein "span".
Vielen Dank an alle!
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.
Ähnliche Java Themen
  Titel Forum Antworten Datum
S JSF: Ändern von CSS Styles in commandLink nach Klick Web Tier 4
K [GWT] Relative Pfade auf dem Server Web Tier 18
X Properties-File und relative Pfadangaben Web Tier 5
egrath Servlet -> JSP forward und relative Pfade Web Tier 5
I Wie bekomme ich Angaben zum letzten Login Web Tier 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben