Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder ein alternativer Browser verwenden.
ich habe ein p:layout und möchte den Inhalt von der Position "center" zentrieren. Dazu habe ich folgendes angegeben:
[XML]<p:layoutUnit position="center" style="text-align: center !important">[/XML]
Das funktioniert soweit auch. Text und Images werden zentriert. Aber eine dataTable wird linksbündig in das Layout eingefügt. Wie schaffe ich es auch die dataTable zu zentrieren?
An deiner Stelle würde ich diesen ganzen LayoutUnit-Mist vergessen und erstmal mit dem Design anfangen und das mit HTML und CSS. Dann kannst du auf die Funktion gehen. Kannst es auch anderes herum machen, kümmere dich nicht um das Design und geh erstmal auf die Funktion.
Wenn du CSS und HTML lernen willst, mach eine Webseite und zwar vom Layout bis zum HTML. Mach doch mal ein Standarddesign welches du für dein aktuelles Project nutzen willst. Wenn das mit reinem HTML und CSS läuft, wird es das auch mit JSF. Ein weiterer vorteil ist, dass du dann gleich ein Template daraus basteln kannst und deine JSF-Seiten sauberer und übersichtlicher sind.
Wenn du damit eigentlich nichts zu tun haben willst, lass es ganz weg und überlass diese Dinge einem Medieninformatiker / Webdesigner.
Kurzum: Das Geraffel wird dich auch weiterhin wahnsinnig machen wenn du dich nicht expliziet nur damit mindestens drei bis vier Monate auseinander setzt. Dann hast du wenigstens die Basics.
Ich will dich hier nicht nieder machen aber ich mag dir klar machen, dass das als J2EE-Entwickler nicht deine Aufgabe ist. Du kannst es aber zu deiner machen, das erfordert aber Einarbeitung in ein komplexes Thema und das nennt sich Webdesign.
So meine Meinung zu Design und Programmierung kennst du nun, damit ich hier aber nicht nur "trolle" eine zwar etwas unschöne aber wahrscheinlich funktionierende Lösung für dein aktuelles Design-Problem:
position: relative --> eine relative position ist ein verschieben ausgehend von der eigentlich normalen position innerhalb des Elternelements. Man kann das Element allerdings auch über den "Rand" des Elternelementes hinausschieben.
left: 100px; --> +100px von links also 100px NACH RECHTS verschoben.
Mit der Pixelanzahl solange spielen bis es mittig ist ( Breite-Elternelement minus Breite-Datatable geteilt durch zwei ) oder zumindest mittig aussieht ( Breite Dynamisch ).
An deiner Stelle würde ich diesen ganzen LayoutUnit-Mist vergessen und erstmal mit dem Design anfangen und das mit HTML und CSS. Dann kannst du auf die Funktion gehen. Kannst es auch anderes herum machen, kümmere dich nicht um das Design und geh erstmal auf die Funktion.
Wenn du CSS und HTML lernen willst, mach eine Webseite und zwar vom Layout bis zum HTML. Mach doch mal ein Standarddesign welches du für dein aktuelles Project nutzen willst. Wenn das mit reinem HTML und CSS läuft, wird es das auch mit JSF. Ein weiterer vorteil ist, dass du dann gleich ein Template daraus basteln kannst und deine JSF-Seiten sauberer und übersichtlicher sind.
Wenn du damit eigentlich nichts zu tun haben willst, lass es ganz weg und überlass diese Dinge einem Medieninformatiker / Webdesigner.
Kurzum: Das Geraffel wird dich auch weiterhin wahnsinnig machen wenn du dich nicht expliziet nur damit mindestens drei bis vier Monate auseinander setzt. Dann hast du wenigstens die Basics.
Das ist mir schon alles klar. HTML ist auch nicht mehr ganz das Problem. Aber CSS in den Details und vor allem das Zusammenspielen der Klassen ist mir noch nicht ganz klar. Einen Webdesigner möchte ich eher nicht anheuern da das ganze ein privates Projekt ist 😉
Ich will dich hier nicht nieder machen aber ich mag dir klar machen, dass das als J2EE-Entwickler nicht deine Aufgabe ist. Du kannst es aber zu deiner machen, das erfordert aber Einarbeitung in ein komplexes Thema und das nennt sich Webdesign.
position: relative --> eine relative position ist ein verschieben ausgehend von der eigentlich normalen position innerhalb des Elternelements. Man kann das Element allerdings auch über den "Rand" des Elternelementes hinausschieben.
left: 100px; --> +100px von links also 100px NACH RECHTS verschoben.
Mit der Pixelanzahl solange spielen bis es mittig ist ( Breite-Elternelement minus Breite-Datatable geteilt durch zwei ) oder zumindest mittig aussieht ( Breite Dynamisch ).
Danke für den Vorschlag. Aber das ist ja nicht wirklich zentriert sondern nur vom Rand verschoben. Der Unterschied ist der, das bei einer anderen Bildschirmauflösung diese Art der Zentrierung schon nicht mehr greift. Oder?
Hmm Ja und Nein. Wenn dein Elternelement eine Fixe Breite hat, greift es bei jeder Auflösung. Wenn dein Design dynamisch ist und sich der Auflösung anpasst ( Damit meine ich die Elemente die den Content halten, nicht den Rand ) dann greift es nicht mehr, das ist richtig. ABER wir können ja auch in die Trickkiste greifen ;D
Der Trick ist, das du der DataTable sowohl ein prozentuales Verschieben als auch eine Prozentuale breite geben kannst. Allerdings funktioniert dieser Trick auch nur bedingt. Ab einer Auflösung über 1300px wird das kritisch werden da sich die Tabelle dan sehr dolle streken wird. Das sieht dann auch nicht mehr estetisch aus.
Aber wie gesagt: Wenn das Elternelement eine fixe Breite hat ist das alles kein Problem. Das ist halt der feine unterschied zwischen statischen und dynamischen Layouts. Statische sind zu anfang meist einfacher. Ich ziehe statische Layouts auch aus estetischen Gründen vor aber das ist Geschmackssache.
Sorry das es etwas dauert bis ich antworte. Ich habe aus anderen Gründen nicht wirklich den Kopf frei für das Projekt.
Aber ich möchte hier ja sowas wie eine Mischung aus dynamischen und festem Layout. Bleiben wir mal bei Layout und den Units, West, Center und East. West und East haben eine feste Breite und Center den Rest des Bildschirms. Die darin enthaltene dataTable hat eine feste Breite soll dann aber in dem Center zentriert werden.
ich kann mir das derzeit einfach schlecht vorstellen, poste doch bitte mal dein Layout also die HTML-Geschichte damit ich das nachbauen kann. Dann kann ich mir nen kopf über das CSS machen und testen. Dazu brauche ich ja die Beans nicht, kann mir ja nen dummyproject erstellen.
Wenn ich das sehe ist es wahrscheinlich einfacher das ganze nachzuvollziehen.
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.twi.entity;
/**
*
* @author Willi
*/
public class TableData {
/**
* Creates a new instance of TableBean
*/
public TableData(Integer id, String name) {
this.id = id;
this.name = name;
}
private Integer id;
/**
* Get the value of id
*
* @return the value of id
*/
public Integer getId() {
return id;
}
/**
* Set the value of id
*
* @param id new value of id
*/
public void setId(Integer id) {
this.id = id;
}
private String name;
/**
* Get the value of name
*
* @return the value of name
*/
public String getName() {
return name;
}
/**
* Set the value of name
*
* @param name new value of name
*/
public void setName(String name) {
this.name = name;
}
}
Java:
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.twi.backing;
import com.twi.entity.TableData;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
/**
*
* @author Willi
*/
@ManagedBean
@RequestScoped
public class TableBean {
private List<TableData> table;
/**
* Get the value of table
*
* @return the value of table
*/
public List<TableData> getTable() {
return table;
}
/**
* Set the value of table
*
* @param table new value of table
*/
public void setTable(List<TableData> table) {
this.table = table;
}
}
Ich hätte nun gerne die dataTable auch gerne zentriert und stehe da auf dem Schlauch.
