# CSS Styles mit JSF: relative Angaben ignoriert



## bananenkasper (17. Okt 2009)

Hallo zusammen!

ich probiere gerade mein Layout über CSS zu definieren.

Das sieht momentan so aus:

```
<body>
	<h:outputText value="Testing Version!" styleClass="testing" id="testVersion" ></h:outputText>
</body>
```

Die zugehörige css-Datei:

```
.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 (17. Okt 2009)

Wenn ich mich recht erinnere, dann wird hutputText 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 ...>).


----------



## bananenkasper (17. Okt 2009)

Habe jetzt 

```
<body>
	<h:outputText value="Testing Version!" styleClass="testing" id="testVersion" ></h:outputText>
</body>
```

geändert in


```
<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...


----------



## JanHH (18. Okt 2009)

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.


----------



## bananenkasper (18. Okt 2009)

mann mann, ist das ein gehampel....


----------



## Noctarius (18. Okt 2009)

```
.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


----------



## bananenkasper (18. Okt 2009)

Noctarius hat gesagt.:


> ```
> .testing, .testing span
> {
> font-size:200%;
> ...



Wenn ich das mache, zb. so:

```
{
<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:


```
<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!


----------

