Estou com o problema estou personalizando o menu so que toda a vez que passa o mouse sobre ele a imagem repete mesmo com o comando CSS de background-repeat to usando o primefaces.
Imagem se repete quando passo o mouse por cima
R
5 Respostas
M
Posta o código para eu tentar ajudar
R
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:form>
<p:growl id="messages" showDetail="false" />
<p:menu toggleable="true" style="width:209px">
<p:menuitem value="Inicio" update="messages" sytleClass="btn-home" url="/Home.xhtml" />
<p:submenu expanded="false" label="Estoque">
<p:menuitem value="Manifestação do Destinatário" update="messages" styleClass="btn-computer" />
<p:menuitem value="Entrada de Produtos" update="messages" icon="ui-icon-circle-plus"
url="/telasEstoque/Entrada_Produtos.xhtml" />
<p:menuitem value="Contagem de Estoque" update="messages" icon="ui-icon-clipboard" />
<p:menuitem value="Transferência de Depósito" update="messages" icon="ui-icon-transfer-e-w" />
</p:submenu>
<p:submenu expanded="false" label="Vendas">
<p:menuitem value="Pré-Vendas" update="messages" icon="ui-icon-cart" />
<p:menuitem value="Venda (PDV)" update="messages" icon="ui-icon-cart" />
<p:menuitem value="Orçamentos" update="messages" icon="ui-icon-calculator"
url="/telasVenda/Orcamentos.xhtml" />
</p:submenu>
M
Faltou o css
R
/* TOGGLE */
.aw-toggle {
float: right;
line-height: 50px;
margin-right: 15px;
color: #fff;
}
/* MENU */
.aw-menu {
font-size: 1.1em;
}
.aw-menu>ul {
margin: 0;
padding: 0;
list-style: none;
}
.aw-menu>ul a {
display: block;
padding: 10px 15px;
text-decoration: none;
font-weight: 500;
color: #373737;
}
.aw-menu>ul i {
margin-right: 6px;
}
.aw-menu>ul a:hover, .aw-menu>ul a:focus {
background-color: #dfdfdf;
}
.aw-menu>ul .is-selected {
border-left: 3px solid #1e94d2;
background-color: #f3f3f3;
}
.aw-menu>ul .is-selected a {
margin-left: -3px;
color: #1e94d2;
}
/* PAGE-TITLE */
.aw-page-title {
margin: 0;
padding: 20px 0;
font-size: 1.5em;
color: #373737;
}
.ui-growl {
margin-top: 35px;
}
.ui-datatable .ui-datatable-data tr {
height: 15px;
}
.ui-datatable .ui-state-highlight {
background: #009999 !important;
font-weight: bold;
}
.ui-autocomplete-input.ui-inputfield {
font-weight: bold !important;
background-color: #edeff2 !important;
}
.inputId {
text-align: right !important;
font-weight: bold !important;
}
.inputCenter {
text-align: center !important;
}
.btn-inserir {
background-image: url("#{resource[’/compracam/icon/database_add.png’]}")
!important;
}
.btn-alterar {
background-image:
url("#{resource[’/compracam/icon/database_edit.png’]}") !important;
}
.btn-excluir {
background-image:
url("#{resource[’/compracam/icon/database_delete.png’]}") !important;
}
.btn-pesquisar {
background-image: url("#{resource[’/compracam/icon/zoom.png’]}")
!important;
}
.btn-sair {
background-image: url("#{resource[’/compracam/icon/cancel.png’]}")
!important;
}
.btn-ajuda {
background-image: url("#{resource[’/compracam/icon/help.png’]}")
!important;
}
.btn-voltar {
background-image:
url("#{resource[’/compracam/icon/arrow_rotate_clockwise.png’]}")
!important;
}
.btn-salvar {
background-image: url("#{resource[’/compracam/icon/disk.png’]}")
!important;
}
.btn-confirmar {
background-image: url("#{resource[’/compracam/icon/accept.png’]}")
!important;
}
.btn-cancelar {
background-image: url("#{resource[’/compracam/icon/cancel.png’]}")
!important;
}
.btn-seta {
background-image: url("#{resource[’/compracam/icon/bullet_arrow_down.png’]}")
!important;
background-repeat: no-repeat;
background-position: 12px;
margin-left: 15px;
}
.btn-house {
background-image: url("#{resource[’/compracam/icon/house.png’]}")
!important;
width:15px;
height:11px;
background-repeat: no-repeat
margin-left: 15px;
}
M
Faça a seguinte alteração no seu css para mudar o background-image
background: url(…/_imagens/house.png) no-repeat;
e apaga esse
background-repeat: no-repeat
Criado 16 de novembro de 2016
Ultima resposta 18 de nov. de 2016
Respostas 5
Participantes 2
Alura O que é Python? — um guia completo para iniciar nessa linguagem de programação Acesse agora o guia sobre Python e inicie sua jornada nessa linguagem de programação: o que é e para que serve, sua sintaxe e como iniciar nela!
Casa do Codigo Back-end Java: Microsservicos, Spring Boot e Kubernetes Por Eduardo Felipe Zambom Santana — Casa do Codigo