Ir para conteúdo
paulo_crash

Dúvidas com Caixa de Avisos - HTML e CSS

Recommended Posts

Fiz um código HTML básico que seria uma caixa de aviso, aparentemente está tudo certo.

 

Só que não quer exibir a imagens antes dos texto.

 

Segue o código HTML:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<!-- Caixa de Aviso -->
		<link rel="stylesheet" href="assets/css/style.css" media="screen" />
		
		<title>Balões de aviso com CSS</title>
	</head>
	
	<body>
		<div class="sucesso radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="alerta radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="erro radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="pergunta radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
	</body>
</html>

E o código CSS que estou usando:

*{margin50px; padding:0;}

.radius10{
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.sombra{
	box-shadow: 1px 1px 2px #855;
	-moz-box-shadow: 1px 1px 2px #855;
	-webkit-box-shadow: 1px 1px 2px #855;
}
.sucesso{
	background: #eff4d4 url("images/sucesso.png") no-repeat scroll 10px 10px;
	border:1px solid #8fad3d;
	color:#596c26;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.alerta{
	background: #ffea97 url("images/alerta.png") no-repeat scroll 10px 10px;
	border:1px solid #e2b500;
	color:#995f5b;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.erro{
	background: #efcec9 url("images/erro.png") no-repeat scroll 10px 10px;
	border:1px solid #ad3f30;
	color:#943728;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.pergunta{
	background: #c6d8f0 url("images/pergunta.png") no-repeat scroll 10px 10px;
	border:1px solid #4381cc;
	color:#5c58b9;
	padding:10px 10px 10px 68px;
	min-height:48px;
}

O que poderia ser, porque não está exibindo a imagem?

 

O resultado final seria esse: http://rbtech.info/demos/boxcss/

Mas só mostra a caixa e a mensagem, sem os ícones.

Compartilhar este post


Link para o post
Compartilhar em outros sites
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<!-- Caixa de Aviso -->
		<link rel="stylesheet" href="assets/css/style.css" media="screen" />
		
		<title>Balões de aviso com CSS</title>
		<style type="text/css">
			*{margin50px; padding:0;}

.radius10{
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.sombra{
	box-shadow: 1px 1px 2px #855;
	-moz-box-shadow: 1px 1px 2px #855;
	-webkit-box-shadow: 1px 1px 2px #855;
}
.sucesso{
	background: #eff4d4 url("http://rbtech.info/demos/boxcss/images/sucesso.png") no-repeat scroll 10px 10px;
	border:1px solid #8fad3d;
	color:#596c26;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.alerta{
	background: #ffea97 url("http://rbtech.info/demos/boxcss/images/alerta.png") no-repeat scroll 10px 10px;
	border:1px solid #e2b500;
	color:#995f5b;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.erro{
	background: #efcec9 url("http://rbtech.info/demos/boxcss/images/erro.png") no-repeat scroll 10px 10px;
	border:1px solid #ad3f30;
	color:#943728;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.pergunta{
	background: #c6d8f0 url("http://rbtech.info/demos/boxcss/images/pergunta.png") no-repeat scroll 10px 10px;
	border:1px solid #4381cc;
	color:#5c58b9;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
		</style>
	</head>
	
	<body>
		<div class="sucesso radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="alerta radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="erro radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="pergunta radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
	</body>
</html>

 

  • Obrigado! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 horas atrás, Aphrodi disse:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<!-- Caixa de Aviso -->
		<link rel="stylesheet" href="assets/css/style.css" media="screen" />
		
		<title>Balões de aviso com CSS</title>
		<style type="text/css">
			*{margin50px; padding:0;}

.radius10{
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.sombra{
	box-shadow: 1px 1px 2px #855;
	-moz-box-shadow: 1px 1px 2px #855;
	-webkit-box-shadow: 1px 1px 2px #855;
}
.sucesso{
	background: #eff4d4 url("http://rbtech.info/demos/boxcss/images/sucesso.png") no-repeat scroll 10px 10px;
	border:1px solid #8fad3d;
	color:#596c26;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.alerta{
	background: #ffea97 url("http://rbtech.info/demos/boxcss/images/alerta.png") no-repeat scroll 10px 10px;
	border:1px solid #e2b500;
	color:#995f5b;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.erro{
	background: #efcec9 url("http://rbtech.info/demos/boxcss/images/erro.png") no-repeat scroll 10px 10px;
	border:1px solid #ad3f30;
	color:#943728;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
.pergunta{
	background: #c6d8f0 url("http://rbtech.info/demos/boxcss/images/pergunta.png") no-repeat scroll 10px 10px;
	border:1px solid #4381cc;
	color:#5c58b9;
	padding:10px 10px 10px 68px;
	min-height:48px;
}
		</style>
	</head>
	
	<body>
		<div class="sucesso radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="alerta radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="erro radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class="pergunta radius10 sombra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
	</body>
</html>

 

Fiz a alteração no caso apenas no link de localização das imagens.

Obrigado!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Salve as imagens e sete o caminho, para não ficar sem as imagens em casos como: Perda de internet, ou, site que dá as imagens ficar offline.

 

Sugiro criar uma pasta "images" em assets>css.

 

E deixar as imagens aí com os mesmos nomes e apenas alterar o caminho.

  • Obrigado! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
    • Por MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
×

Informação importante

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