I'm using dock on the top of my page, using a template, but when a roll the mouse over the icons, the icons get bigger but behind page's content.
I have tried to use z-index but whith no success.
template.xhtml
Code: Select all
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
<title> <ui:insert name="title">NEW SOLLUS</ui:insert> </title>
<meta content='text/html; charset=ISO-8859-1' http-equiv='Content-Type'/>
<p:resources/>
</head>
<body>
<p:layout fullPage="true">
<p:layoutUnit id="top" position="top" spacingOpen="0" height="65" style="height:65; padding:0; overflow:visible; margin:0; background: url(imagens/logo.png) no-repeat;" zindex="10">
<ui:insert name="header">top</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center" resizable="true" minWidth="500" style="vertical-align:top;margin:0;padding:0;overflow:auto;">
<ui:insert name="content">page's content</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="bottom" position="bottom" height="30" style="margin:0;padding:0;">
<ui:insert name="bottom">footer</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="left" position="left" resizable="true" collapsible="true" collapsed="true" width="200" minWidth="200" maxWidth="500" style="width:200;margin:0;padding:0;overflow:auto">
<ui:insert name="tree">trees</ui:insert>
</p:layoutUnit>
</p:layout>
</body>
</html>
Code: Select all
<!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://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
<title>Title</title>
<meta content='text/html; charset=ISO-8859-1' http-equiv='Content-Type'/>
<p:resources/>
</head>
<body>
<f:view>
<ui:composition template="template.xhtml">
<ui:define name="header">
<p:dock position="top" maxWidth="25">
<p:menuitem style="color:#333333;" value="1" icon="/image/1.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="2" icon="/image/2.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="3" icon="/image/3.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="4" icon="/image/4.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="5" icon="/image/5.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="6" icon="/image/6.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="7" icon="/image/7.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="8" icon="/image/8.PNG" url="#"/>
<p:menuitem style="color:#333333;" value="9" icon="/image/9.PNG" url="#"/>
</p:dock>
</ui:define>
<ui:define name="tree">
<p:accordionPanel activeIndex="0" multiple="true">
<p:tab title="Tree Lógica">
<ui:include src="pageTree.jsp"/>
</p:tab>
<p:tab title="Tree Física">
<ui:include src="pageTreeFisica.jsp"/>
</p:tab>
</p:accordionPanel>
</ui:define>
<ui:define name="content" zindex="-10">
<a4j:include viewId="#{url.url}" style="z-index:-1;margin:0;padding:0;vertical-align:top"/>
</ui:define>
<ui:define name="bottom">
</ui:define>
</ui:composition>
</f:view>
</body>
</html>
