how to make a text overlay an image on a CommandButton

UI Components for JSF
Post Reply
JR@Protheus
Posts: 6
Joined: 19 Dec 2011, 03:37

19 Dec 2011, 15:03

Hello friends,

Very Good Day!

I have a problem in getting a text from a commandButton an image overlay.

I have in my CSS file:
===============================================================

.ButtonGeneral
{
background: url ("../images/ButtonUnClicked.png") no-repeat top center! important;
width: 110px! important;
height: 30px! important;
border: none! important;
padding: 0px 0px 0px 0px! important;
margin-left:-55px! important;
margin-top:-15px! important;
overflow: hidden! important;
outline: none! important;
font-family: arial, verdana, ms sans serif, Lucida Sans! important;
font-size: 10pt! important;
font-weight: bold! important;
color: # ffffff! important;
cursor: pointer! important; / * goes by the cursor as a hand passing over the button * /
cursor: hand! important; / * for IE 5.x * /
}

.ButtonGeneral: hover
{
background: url ("../images/ButtonDisabled.png") no-repeat top center! important;
}

.ButtonGeneral: active
{
background: url ("../images/ButtonClicked.png") no-repeat top center! important;
}

In xhtml form:
===============================================================

...
<f:facet name="footer">
<p:spacer width="1px" height="25px"/>
<p:commandButton id="BtnClose" value="Close" image="ButtonGeneral" style="float: right !important; margin-right: 0px !important; margin-top: -1px !important; width: 110px !important; height: 30px !important;"/>
<p:commandButton id="BtnCheck" value="Check" image="ButtonGeneral" style="float: right !important; margin-right: 0px !important; margin-top: -1px !important; width: 110px !important; height: 30px !important;"/>
<p:commandButton id="BtnUpdate" value="Update" image="ButtonGeneral" style="float: right !important; margin-right: 0px !important; margin-top: -1px !important; width: 110px !important; height: 30px !important;"/>
</f:facet>
...

PS: Images size: height = 30px and width = 110px

The images to render the button, the image appears to hover over the button and also the image when clicking on the button. The problem is that the text value is below the images.

I've tried everything and ask you to help me solve this problem.

Many thanks,

Janir Junior

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 36 guests