Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ThiagoBosque

Criar caixa de mensagem, info, erro, alerta, conf

Por , em Desenvolvimento frontend

Recommended Posts

ThiagoBosque    0

ThiagoBosque
Postado

olá pessoal estou estudando um pouco de css e estou tendo problemas para fazer aparecer a imagem da caixa de mensagem, o problema ocorre no chrome e mozila. No IE funciona normalmente. Alguem poderia ajudar? o codigo para o estudo é este:

<html>
 <head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css">
   body {
   font-family:Arial, Helvetica, sans-serif;
   font-size:20px;
   }
.info, .success, .warning, .error, .validation {
   border: 1px solid;
   margin: 10px 0px;
   padding:15px 10px 15px 50px;
   background-repeat: no-repeat;
   background-position: 10px center;
}

.info {
   color: #00529B;
   background-color: #BDE5F8;
   background-image: url("Info.png");
}
.success {
   color: #4F8A10;
   background-color: #DFF2BF;
   background-image:url("Info.png");
}
.warning {
   color: #9F6000;
   background-color: #FEEFB3;
   background-image: url("Info.png");
}
.error {
   color: #D8000C;
   background-color: #FFBABA;
   background-image: url("Info.png");
}
 </style>
 </head>
 <body>

     <div class="info">Mensagem de informação</div>
     <div class="success">Successful operation message</div>
     <div class="warning">Warning message</div>
     <div class="error">Error message</div>

 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

jcalebe    0

jcalebe
Postado

tente apagar essa linha e ver o que acontece:

background-position: 10px center;

 

Outra coisa, as imagens estão acessíveis ao CSS?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Feiten    0

Feiten
Postado

Substitua as aspas por aspas simples, como no exemplo abaixo:

 

.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}

 

Deverá funcionar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o TAmAnHO dA CAiXa é importante, verifique se a imagem começa com letra maiuscula mesmo...

além disso, defina uma largura/altura 'se puder'.

 

não deixe de usar DOCTYPE

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito