Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Caminho das imagens

Conforme explicado o direcionamento das imagens no CSS, fiz mas nao apresentou corretamente.

.github{
    background-image:url(../img/github.png);
}

.twitter{
    background-image:url(../img/twitter.png);
}

.linkedin{
    background-image:url(../img/linkedin.png);
}

minha estrutura esta da seguinte forma

  • img (twitter, github...)
  • blog. html
  • biografia.html
  • site.css
  • reset.css

oque deu de errado?

6 respostas

Qual endereço que vc ta acessando no navegador para exibir a página?

boa tarde, tiago. verifica si o seu cogigo site.css ficou assim:

body { font-family: "Crimson Text", "Times New Roman", serif; background-color: #F2FFFC; font-size: 120%; line-height: 1.5; }

h1, h2 { font-family: "Open Sans Condensed", "Arial", sans-serif; }

.titulo-principal { text-align: center; background-color: #851944; color: #FFF; padding: 25px; border-bottom: 10px solid black; font-size: 60px; text-transform: uppercase; }

p { text-align: justify; margin: 20px 0; }

.navegacao-site { text-align: center; background-color: #3C1D3D; color: #F2FFFC; }

.rodape-pagina { background-color: #000; color: #F2FFFC; clear: both; position: fixed; bottom: 0; left: 0; width: 100%; }

main a { color: #851944; }

.navegacao-site a { color: inherit; font-family: "Open Sans Condensed", sans-serif; }

.navegacao-site, .rodape-pagina { padding: 20px; }

.container { width: 720px; margin: auto; padding: 30px 0; }

.navegacao-site h1 { font-size: 30px; margin-bottom: 25px; }

strong { font-weight: bold; }

em { font-style: italic; }

.subtitulo-texto { font-size: 30px; clear: both; }

.icones-redes-sociais li { display: inline-block; }

nav a { text-transform: lowercase; }

.icones-redes-sociais a { width: 40px; height: 40px; display: block; text-indent: -99999px; }

.github { background-image: url(../img/github.png); }

.twitter { background-image: url(../img/twitter.png); }

.linkedin { background-image: url(../img/linkedin.png); }

main { float: left; width: 85%; padding-bottom: 80px; }

.minha-foto, .navegacao-site { float: right; box-sizing: border-box; border-left: 10px solid black; border-bottom: 10px solid black; }

.minha-foto { position: absolute; top: 0; right: 0; }

.navegacao-site { width: 15%; position: relative; top: 310px; }

Tiago,

Como as suas páginas e seu arquivo css estão no mesmo nível da pasta img, no seu background-img não precisa voltar um nível de pasta, então pode remover aquele '../' do nome dos arquivos. Só fazendo isso já deve funcionar tudo normalmente. Outro detalhe que você poderia ver é dentro do Url colocar o caminho arquivo entre aspas.

.github{
    background-image:url("img/github.png");
}

.twitter{
    background-image:url("img/twitter.png");
}

.linkedin{
    background-image:url("img/linkedin.png");
}

Não tenho certeza se isso é necessariamente obrigatório, mas não custa tentar.

Abraço.

Cara , só olhando da parece que seus arquivos .css não tão em uma pasta então não precisa usar o ../ . ou coloca todos os arquivos .css em uma pasta

solução!

Como os colegas já disseram: a coisa mais simples a se fazer é criar uma pasta chamada css e colocar suas folhas de estilo nela.

Obs: ao fazer isso, não se esqueça de alterar os caminhos nos atributos href das tags link de seus arquivos HTML, para algo como:

<link rel="stylesheet" href="css/arquivo.css">

Para mim os ícones das redes sociais não estava aparecendo com o "../img/linkedin.png", alterei para "img/linkedin.png" e funcionou...

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software