[Resolvido] Não aparece as imagens e as letras no brownser

Gustavo Pereira SMLB · Dezembro 13, 2009

Olá pessoal do Imasters! Bem, sou iniciante no css, e estou com o seguinte problema: Estou fazendo um site, porém, coloquei o background, mas... quando eu aperto F12 no dreamweaver cs3, ele não aparece, mas sim, aparece no dreamweaver, vou colocar o código fonte:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nome - Produções e Eventos</title>
<link href="luna.css" rel="stylesheet" type="text/css" />
</head>

<body>

Nome do site

</body>
</html>

CSS:

body {

   background: #000000 image url(lunafundo.jpg) 
  
}

RafaelNMNM · Dezembro 13, 2009

Este "image" dentro do background é incorreto.

Experimente assim:

body {
   background: #000000 url(lunafundo.jpg);
}

Gustavo Pereira SMLB · Dezembro 13, 2009

E pra mim colocar uma image dentro de uma div? por exemplo: criei um topo pelo div, e fiz a imagem e quero colocar dentro do topo, como é possivel ?

RafaelNMNM · Dezembro 13, 2009

Depende do propósito da imagem.

Pode inserir por css no caso de imagens decorativas do tipo utilizadas em menus e itens de lista, barras separadoras ou mesmo as do tipo que se encontra no topo esquerdo desta página, "coloca-se a imagem em background":

background-image: url(caminho/imagem.gif);

ou com a tag IMG para imagens que não são meramente decorativas:

<div>
<img src="caminho/imagem.gif" alt=" " title=" " />
</div>

Gustavo Pereira SMLB · Dezembro 13, 2009

Não aparece a imagem inserindo por CSS. Agora, com a tag IMG, é possivel inserir, porem, não tem como eu colocar nada em cima da imagem, posisiona-la e afin's.

RafaelNMNM · Dezembro 13, 2009

Se a imagem inserida por CSS não está aparecendo deve ser porque seu “caminho” está incorreto, verifique e tente novamente.

Exemplo css interno:

background-image: url(imagens/fotos/imagem.gif);

Exemplo css externo:

background-image: url(../imagens/fotos/imagem.gif);

Sobre a tag IMG, basta trabalhar ela com css também.

Ex:

CSS

img {margin-top:10px;}

XHTML

<img src="caminho/imagem.gif" alt=" " title=" " />

Gustavo Pereira SMLB · Dezembro 13, 2009

Desculpe a minha ignorancia. Mas... com CSS/XHTML, eu não consigui agora... com o CSS,tbm não, e a imagem está certinho, segue o código fonte:

#topo {
   
	height:20px;
	background-image: url(topo.jpg)
	border-top:1px  #4A4A4A;
	border-bottom:1px dotted #4A4A4A;
	color:#999999;
	text-align:center;
}

RafaelNMNM · Dezembro 13, 2009

O caminho está correto "url(topo.jpg)"? Se estiver declare uma largura.

width:XXpx;

Dica: Quando for colocar um código, coloque dentro de

; )

Gustavo Pereira SMLB · Dezembro 13, 2009

Bem, eu declarei a largura e nada! E o caminho está devidamente correto.

RafaelNMNM · Dezembro 13, 2009

Posta seu código completo.

Gustavo Pereira SMLB · Dezembro 13, 2009

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

body {
background: url(lunafundo.jpg)



}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nome - Produções e Eventos</title>
<link href="luna.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="topo">
</div>
<hr />
<div id="menu">
 <ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li><a href="">HOME</a></li>
   <li><a href="">PRODUÇÕES E EVENTOS</a></li>
   <li><a href="">CADASTRE-SE</a></li>
   <li><a href="">FAÇA SUA FESTA</a></li>
   <li><a href="">NOTÍCIAS</a></li>
   <li><a href="">EVENTOS</a></li>
   <li><a href="">SERVIÇOS</a></li>
   <li><a href="">CONTATO</a></li>
  </ul>
</div>


<p> </p>
</body>

</html>

CSS:

* {
 
 padding: 10;
 margin: 0;
 
}

#topo {
   
	height:20px;
	background-image: url(topo.jpg)
	width:300px;
	border-top:2px  #4A4A4A;
	border-bottom:2px dotted #4A4A4A;
	color:#999999;
	
}

#menu li a  {
  
  
  display: block;
  width: 200px;
  color: #CCCCCC;
  height: 18px;
  line-height: 20px;
  padding:16px;
  text-decoration: none;
  font: 16px Rockwell, tahoma, Geneva, sans-serif;
  font-weight: normal; 
  font-variant: normal; 
}

RafaelNMNM · Dezembro 13, 2009

Ops, nem tinha visto... rs

Tem que fechar o css com ";"

background-image: url(topo.jpg);

e no body se for colocar mais propriedades também.

Gustavo Pereira SMLB · Dezembro 13, 2009

Rafael, vlw cara.. consigui... mais uma coisa, como faço para a imagem ficar no meio da tela? e pra ela não ficar repetindo, ficar apenas no meio da tela?

RafaelNMNM · Dezembro 13, 2009

"margin:0 auto;" Centraliza na horizontal.

* {
 
 padding: 10;
 margin: 0 auto;
 
}

Para centralizar na horizontal e vertical: http://aprendacss.wordpress.com/2008/06/28/centralizar-layout-na-horizontal-e-na-vertical/

Não repete a imagem.

background-repeat:no-repeat;

Leia mais em: http://www.w3schools.com/css/pr_background-repeat.asp

[]'s

Gustavo Pereira SMLB · Dezembro 13, 2009

Obrigado Rafael! A fonte do menu não está alterando, pq ?

RafaelNMNM · Dezembro 13, 2009

É por causa da fonte "Rockwell", prefira usar uma fonte nativa do SO, como Arial, Times New Roman e etc.

Gustavo Pereira SMLB · Dezembro 13, 2009

Obrigado pela ajuda! Um grande abraço!

RafaelNMNM · Dezembro 13, 2009

De nada ; )

Abraços []'s

Arquivado

[Resolvido] Não aparece as imagens e as letras no brownser

Recommended Posts

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pereira SMLB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

RafaelNMNM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real