JSF JSF und CSS?

J

JayGabriel

Aktives Mitglied
Hallo,

ich komme erneut nicht weiter.
Ich versuche gerade die WebSeite mit einem neuen Layout zu bestücken. Soweit so gut, die CSS Datei wird gefunden und auch berücksichtigt, doch in bekomme einfach die Ränder um die Bilder nicht weg. Das was links an Rand zu viel ist, schauen die Banner- und Headerbilder über den rechten Rand drüben hinaus. Ebenso wie ein Teil der Navigationsleiste...

Mit
Code: 
margin: 0px;
und
Code: 
padding: 0px;
sowie
Code: 
border: none;
hab ich schon alles versucht. Da JSF so viele 'gefühlte tausend' Tabellen anlegt, hab ich auch die Tabellen an sich bedacht, doch irgendetwas schein ich vergessen zu haben?

Mein CSS:
HTML: 
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	border: 0px none;
	background: transparent url('../pics/bg.jpg') repeat-x fixed top left;
	background-color: #8E8B7C;
	font-family: Verdana, sans-serif;
	text-align: left;
	vertical-align: top;
}

table {
	margin: 0px;
	padding: px;
	border: 0px none;
	text-align: left;
	vertical-align: top;
}

td {
	margin: 0px;
	padding: 0px;
	border: 0px none;
	text-align: left;
	vertical-align: top;
}

.grd_website {
	width: 834px;
	background-color: white;
	margin-left:auto;
	margin-right:auto;
	padding: 0px;
	border: 0px none;
	display: block;
}

.grd_header {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

.banner {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

.header {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

.navigation {
	text-align: right;
	margin: 0px;
	padding: 0px;
	border: 0px none;
	background: transparent url('../pics/nav_bg.jpg') repeat-x scroll top left;
}

.grd_content {
	width: 170px;
	margin: 0px;
	padding: 0px;
	border: 0px none;
	display:block;
}

.menu {
	width: 170px;
	margin: 0px;
	padding: 0px;
	border: 0px none;
	display:block;
}

.content {
	width: 660px;
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

Zusätzlich muss ich noch sagen, dass ich mit Apache Tiles arbeite.

Mein Template:
HTML: 
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<f:view>
<!DOCTYPE html>
<html lang="en">
<head>
	<title><tiles:getAsString name="title" /></title>
	<link rel="stylesheet" type="text/css" href="../css/layout.css"></link>
</head>
<body>
	<h:panelGrid columns="1" styleClass="grd_website">
		<h:form styleClass="grd_header">
			<tiles:insertAttribute name="banner" flush="false"/>
			<tiles:insertAttribute name="navigation" flush="false"/>
			<tiles:insertAttribute name="header" flush="false"/>
		</h:form>
		<h:panelGrid columns="2" styleClass="grd_content">
			<tiles:insertAttribute name="menu" flush="false"/>
			<tiles:insertAttribute name="content" flush="false"/>
		</h:panelGrid>
	</h:panelGrid>
</body>
</html>
</f:view>

Banner Tile:
HTML: 
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<h:panelGroup styleClass="banner" layout="block">
	<h:graphicImage value="../pics/header.png" alt="Web Abo"/>
</h:panelGroup>

Navi Tile:
HTML: 
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<h:panelGroup styleClass="navigation" layout="block">
	<h:outputText value="Sie sind nicht angemeldet..."/>
	<h:commandLink value="Startseite" action="logout"/>
</h:panelGroup>

Header Tile:
HTML: 
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<h:panelGroup styleClass="header" layout="block">
	<h:graphicImage value="../pics/head_grafik.jpg" alt=""/>
</h:panelGroup>

Menu Tile:
HTML: 
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk"%>
<h:form styleClass="menu">
	<t:collapsiblePanel title="Leser">
		<h:panelGrid columns="1">
			<h:commandLink value="Online anmelden"/>
			<h:commandLink value="Adressänderung"/>
			<h:commandLink value="Nachsendungen"/>
			<h:commandLink value="Unterbrechungen"/>
			<h:commandLink value="Reklamationen"/>
			<h:commandLink value="Anfrage"/>
			<h:commandLink value="Passwort vergessen"/>
			<h:commandLink value="Benutzer/Passwort"/>
		</h:panelGrid>
	</t:collapsiblePanel>
	
	<t:collapsiblePanel title="Abonnements">
		<h:panelGrid columns="1">
			<h:commandLink value="Das TAGESBLATT jetzt abonnieren"/>
		</h:panelGrid>
	</t:collapsiblePanel>
</h:form>

Content Tile (wo noch nix weiter drin steht):
HTML: 
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<h:form styleClass="content">

</h:form>

Kann mir da einer von euch helfen? Sieht einer von euch, dass ich irgendwo noch etwas vergessen habe?

Ich möchte im Endeffekt, dass mein Banner, meine NavigationsLeiste und mein Headerbild genau Kannte an Kannte anliegen und kein weißer Rand drumherum zu sehen ist.

mfg
Jay
 
N

nillehammer

Gast
Du definierst die gewünschen Border-Einstellungen in den css-Klassen .banner und .header. Den h:graphicImage-Elementen weist Du diese Klassen aber garnicht zu, sondern ihren Elternelementen (h:panelGroup). Ich kenn mich mit JSF nicht aus, nehme aber mal an, dass h:graphicImage als <img>-Tag gerendert wird. Dann müsstest Du dein CSS wie folgt schreiben, damit die Border-Einstellungen auf die img-Tags angewandt werden:
Code: 
.banner>img {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

.header>img {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

Die ">" besagen, dass alle direkten Kindelemente von .banner und .header die Eigenschaften haben sollen. Ältere IE-Versionen haben damit Schwierigkeiten. Wenn's nicht klappt, ersetze die ">" durch ein Leerzeichen.
 
J

JayGabriel

Aktives Mitglied
Vielen Dank für deine Antwort, nillehammer!

Im Endeffekt bin ich über das relative Ausrichten und deinem Tip zum gewünschten Ergebnis gekommen.
Mit
Code: 
.header img {width:100%;}
hab ich schließlich alle noch so minimalen Ränder wegbekommen und gleichzeitig den 'irrwitzigen' Nebeneffekt, dass meine Icons plötzlich so groß wie die Seitenbreite wurden, behoben. ;)

Zu JSF mit CSS:
Da ich nicht viel sonst mit CSS zu tun habe, irritiert es mich immer von neuem. Es scheint zum Beispiel wichtig zu sein, um auf die Elemente von JSF mittels CSS zuzugreifen und zu formatieren zu können, dass die StyleClass vorher im PanelGrid und nicht direkt im Element selbst eingetragen werden. Kann sein, dass das normal ist, aber seltsam ist es schon irgendwie - für mich.

Daher hatte ich auch gedacht, dass es für die ImageTags ebenfalls ausreicht in den PanelGrids oder PanelGroups die jeweiligen Angaben zu machen. Teilweise hat dies auch geklappt, aber ohne das direkte Ansprechen mit dem
Code: 
img
blieb auch weiterhin ein minimaler Rand übrig... Übrigens hat nur das
Code: 
width: 100%;
das ausschlagende Ergebnis erzeugt, es musste nur auf den HeaderBereich begrenzt werden, da sonst, wie oben schon geschrieben, auch die Icons riesig wurden.

mfg
Jay
 

Aktuelle Jobs

Neue Themen


Oben