Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Arquivos CSS não estão funcionando

Referente ao curso Acessibilidade web parte 1: tornando seu front-end inclusivo, no capítulo HTML e os leitores de tela e atividade Apresentando a Apeperia

por Estudante
| 71.4k xp | 32 posts

Olá, baixei o arquivo (zipado) com o conteúdo que é mostrado nessa aula, fiz uma pasta para meu editor joguei o index.html , as fotos, os arquivos CSS um por um, no editor (Sublime Text)os códigos tudo ok, para prosseguir os estudos, porém ao abrir no Crhone (para ver o visual) só esta funcionando o index.html , as fotos não aparecem, nem os CSS. Abri a aba de ferramentas (F12) DEvtools, aparentemente (estou iniciando nessa carreira) esta dando erro em tudo que esta no CSS. O que pode ser!? Obrigado,

9 respostas
por Daniela Michely da Silva
| 311.3k xp | 196 posts

Olá, Lauro.

Coloca um print da tua tela com o sublime aberto na janela do html. É importante estar mostrando a sidebar(aba lateral onde mostra todos os arquivos), para darmos uma analizada nos links.

por Estudante
| 71.4k xp | 32 posts

Olá, Daniela.

Acredito que seja isso que tu me pediu, segue abaixo os prints.

Print da minha tela com o Sublime aberto

Segundo print da tela

Print da tela de navegação com o arquivo citado não funcionando, que gerou minha duvida

por Daniela Michely da Silva
| 311.3k xp | 196 posts

Oi, Lauro.

Você mostrou o print da sidebar direitinho mas no html o print está mostrando a partir do h1 e para vermos o caminho é preciso mostrar o cabeçalho. Mas pelo erro, ele diz que não encontrou o arquivo, talvez ele não esteja linkado, ou está com o caminho errado. Tenta colar essas linas de código dentro do teu head, cola depois da tag META e antes da tag do TITTLE. Se faltar algo, cola o print novamente, mostrando o head dessa vez. Conta aqui se mudou algo.

<link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/tema-padrao.css">
  <link rel="stylesheet" href="css/secaoDestaque.css">
  <link rel="stylesheet" href="css/cabecalho.css">
  <link rel="stylesheet" href="css/diferenciais.css">
  <link rel="stylesheet" href="css/secaoSobre.css">
  <link rel="stylesheet" href="css/secaoPlanos.css">
  <link rel="stylesheet" href="css/secaoBlog.css">
  <link rel="stylesheet" href="css/listaDeArtigos.css">
  <link rel="stylesheet" href="css/secaoDestaques.css">
  <link rel="stylesheet" href="css/secaoContato.css">
  <link rel="stylesheet" href="css/contatoCampo.css">
  <link rel="stylesheet" href="css/secaoInstitucional.css">
  <link rel="stylesheet" href="css/rodape.css">    
  <link rel="stylesheet" href="css/dialogNewsletter.css">
por Allan Ribeiro Santos
| 166.8k xp | 30 posts

Lauro, o seu head tem que ficar exatamente assim:

HTML

<head>
  <meta charset="UTF-8">
  <title>Apeperia - aplicativos sob medida</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Open+Sans:300,400,700" rel="stylesheet">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/tema-padrao.css">
  <link rel="stylesheet" href="css/secaoDestaque.css">
  <link rel="stylesheet" href="css/cabecalho.css">
  <link rel="stylesheet" href="css/diferenciais.css">
  <link rel="stylesheet" href="css/secaoSobre.css">
  <link rel="stylesheet" href="css/secaoPlanos.css">
  <link rel="stylesheet" href="css/secaoBlog.css">
  <link rel="stylesheet" href="css/listaDeArtigos.css">
  <link rel="stylesheet" href="css/secaoDestaques.css">
  <link rel="stylesheet" href="css/secaoContato.css">
  <link rel="stylesheet" href="css/contatoCampo.css">
  <link rel="stylesheet" href="css/secaoInstitucional.css">
  <link rel="stylesheet" href="css/rodape.css">    
  <link rel="stylesheet" href="css/dialogNewsletter.css">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

Mas vou falar pra você, eu acessei o curso referente, baixei os arquivos e tá tudo certo lá. Se continuar dando problema eu recomendo você baixar tudo de novo.

por Allan Ribeiro Santos
| 166.8k xp | 30 posts

Lauro eu peço que, se seu problema foi solucionado, marque o tópico como Resolvido, caso contrário diga se tem ainda alguma dúvida que eu (ou quem souber) tentará ajudar.

por Estudante
| 71.4k xp | 32 posts

Olá, desculpe-me a demora, vocês foram muito gentis, porem fiquei fora esses tempos, retomando minha rotina no dia de hoje!

problema não solucionadoPrezados Daniela e Allan,

Coloquei depois do Meta e ANTES do Tittle , também como já estava (exatamente como vc mostrou como deveria estar) segue abaixo o print:

head da forma corretaEstão tudo correto dentro de uma única pasta e ainda não consigo compreender o que ocorre, estou acompanhando e até aqui nenhum problema. Obrigado mais uma vez pela gentileza, se despor a ajudar!

pagina ainda com css não funcionando correto Olá Allan, baixei de novo e ainda não sei solucionar. Print abaixo:

todo conteúdo da pasta zipada baixada 1todo conteúdo 2

por Allan Ribeiro Santos
| 166.8k xp | 30 posts

Cara, tenta remover o "css/" de todos os href, exemplo:

HTML

<link rel="stylesheet" href="reset.css">

Faça isso em todos os links de css. Por algum motivo todos os arquivos estão vindo na mesma pasta e não aparentemente não arrumaram isso.

solução!
por Estudante
| 71.4k xp | 32 posts

Allan fiz conforme você indicou. Print abaixo:

print do meu editor sem o ''css/"

Agora aparece assim no navegador...

print navegador agora 1

print navegador 2Tem erro ainda, certo? Hum, no sidebar do meu edito se eu clico na imagem que esta em png , aparece no editor a imagem, sem problemas e no navegador um dos problemas notado é por exemplo a foto não carregar, certo?

por Renato Silveira Nunes
| 88.4k xp | 110 posts
Analista programador pleno

Olá Lauro.

Parece erro no caminho da imagem também.

Tente fazer assim, adicionando ./ antes do nome da imagem se estiver na mesma pasta do index.html:

<img src='./sua_imagem.png' />

<!-- ou se estiver em outra pasta -->

<img src='./pasta_de_imagens/sua_imagem.png' />

Na url do print está com #new1, talvez isso interfira no carregamento da imagem se na tag estiver somente o nome dela desse jeito: src='imagem.png'

Se continuar com erro posta um exemplo com print do HTML onde está a tag img.

Abraço.