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

Aula 1 - Vídeo 05 - Imagens (icone-bolos.svg e icone-bebidas.svg) não carregam.

Referente ao curso Cordova & PhoneGap: Apps mobile com HTML, CSS e JS

por Weslly
| 93.3k xp | 13 posts

Olá Galera, boa tarde!

Os ícones (bolos e bebidas não carregam) . Estou usando o navegador Chrome mas testei no firefox e IE e não obtive sucesso.

Ainda continuo com outros 2 problemas ( Já abri um tópico para o primeiro e abrirei outro para o segundo).

Meu index.html

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="estilo.css">
     <title>Só de Cenoura</title>

</head>
<body>
    <input type="radio" name="opcao" id="opcao‐bolos" checked>
    <label for="opcao‐bolos">Bolos</label>

    <input type="radio" name="opcao" id="opcao‐bebidas">
    <label for="opcao‐bebidas">Bebidas</label>

    <img src="imagens/menu-bolos.png" alt="Menu Bolos" 
        id="menu‐bolos" class="menu">

    <img src="imagens/menu-bebidas.png" alt="Menu Bebidas" 
        id="menu‐bebidas" class="menu">

</body>
</html>

Meu arquivo estilo.css


#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos{
    display:none;
}

.menu{
width:100%;
}

body{
    background:#3d1a11;
    font-family:sans-serif;
    margin: 0;
    text-align:center;
}

input[type=radio]{ 
    display:none;
}

label{
    background-color:#563429;
    background-size:4em;
    background-position:center-top;
    color:white;
    display:block;
    font-size:75%;
    padding:4em 0 1em;
    text-transform:uppercase;
}

label[for=opcao-bolos]{
    background-image: url(imagens/icone-bolos.svg);
}
label[for=opcao-bebidas]{
    background-image: url(imagens/icone-bebidas.svg);
}

input[type=radio]:checked + label{
    background-color: #E4876D;
}

label{
    width: 50%;

    position: fixed;
    bottom: 0;
    z-index: 1;
}

label[for=opcao-bolos]{
    left: 0;
}

label[for=opcao-bebidas]{
    right: 0;
}
3 respostas
por Gabriel da Silva Costa Rocha
| 58.4k xp | 3 posts
Estudante

Boa tarde Weslly, uma vez utilizando o Ionic tive um problema parecido. Para resolver, tive que colocar todas as imagens na pasta wwwroot, após a inserção das imagens nesta pasta, elas funcionaram normal.

por Weslly
| 93.3k xp | 13 posts

Boa tarde Lucas,

Muito obrigado pelo seu post:)

Fiz a alteração que sugeriu. Mas, não funcionou. Estou cursando Cordova & PhoneGap e talvez por isso não tenha dado certo. Assim que terminar esse vou fazer o de Ionic e já deixei guardado essa sua dica.

Vou deixar o código que alterei para você visualizar quando puder. Obrigado e bons estudos!

index.html

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="estilo.css">
     <title>Só de Cenoura</title>

</head>
<body>
    <input type="radio" name="opcao" id="opcao‐bolos" checked>
    <label for="opcao‐bolos">Bolos</label>

    <input type="radio" name="opcao" id="opcao‐bebidas">
    <label for="opcao‐bebidas">Bebidas</label>

    <img src="wwwroot/menu-bolos.png" alt="Menu Bolos" 
        id="menu‐bolos" class="menu">

    <img src="wwwroot/menu-bebidas.png" alt="Menu Bebidas" 
        id="menu‐bebidas" class="menu">

</body>
</html>

estilo.css


#opcao-bolos:checked ~ #menu-bebidas,
#opcao-bebidas:checked ~ #menu-bolos{
    display:none;
}

.menu{
width:100%;
}

body{
    background:#3d1a11;
    font-family:sans-serif;
    margin: 0;
    text-align:center;
}

input[type=radio]{ 
    display:none;
}

label{
    background-color:#563429;
    background-size:4em;
    background-position:center-top;
    color:white;
    display:block;
    font-size:75%;
    padding:4em 0 1em;
    text-transform:uppercase;
}

label[for=opcao-bolos]{
    background-image: url(wwwroot/icone-bolos.svg);
}
label[for=opcao-bebidas]{
    background-image: url(wwwroot/icone-bebidas.svg);
}

input[type=radio]:checked + label{
    background-color: #E4876D;
}

label{
    width: 50%;

    position: fixed;
    bottom: 0;
    z-index: 1;
}

label[for=opcao-bolos]{
    left: 0;
}

label[for=opcao-bebidas]{
    right: 0;
}
solução!
por Weslly
| 93.3k xp | 13 posts

Olá Galera, Estava com outros problemas e com a solução de um outro post, esse problema também acabou resolvendo. Vou deixar o link para quem desejar visualizar o que foi alterado: https://cursos.alura.com.br/forum/topico-aula-1-video-05-problema-com-radio-buttons-2-40206

Obrigado e bons estudos!