Dúvida. Exercício | HTML5 e CSS3 II: Turbinando as suas páginas

Solucionado (ver solução)

Solucionado
(ver solução)

6
respostas

por Vitor Kindrat

| 96.2k xp | 91 posts

Eu coloquei o código igual do instrutor pra testar, porém estou usando select e option ao invés de radio. Quando selecione a opção outro nao acontece nada. Queria conseguir resolver sozinho, mas já tentei um monte de coisa e nada.

    <fieldset>

                <legend>Assunto</legend>

                    <label>
                    <select>
                    <option value="blog">Blog</option>
                    <option value="serviço">Serviço</option>
                    <option value="outro">Outro</option>
                    </select>
                    </label>


                </fieldset>

fieldset > fieldset {
    display: inline;
}


label[for="outro"] {
    display: inline;
}

input[name="outro"] {
    width: auto;
}

input[value="outro"]~input{
display: none;
}
input[value="outro"]:checked ~ input {
    display: inline;
}

6 respostas

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

25/04/2019

Oi, Vitor, tudo bem?

Tu pode postar o link do teu GitHub com esse código? O seu código completo tá lá né? Vai ajudar a entender o que tá impedindo de estilizar, já que, está igual ao do instrutor.

Aguardo :}

por Vitor Kindrat

| 96.2k xp | 91 posts

26/04/2019

https://vkindrat.github.io/

Meu código está completo aqui, porém está com alguns problemas que eu não consigo identificar, como fontes diferente, e algumas coisas desatualizadas. Todos os arquivos do github estão iguais aos meus.

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

26/04/2019

Oi Vitor tudo bem?

Desculpa, em que linha da página https://vkindrat.github.io/ está o input onde o usuário irá digitar o outros.

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

26/04/2019

Oi, Vitor.

Vê só, como você tá vendo que o seu código tá com algumas incompatibilidades, inclusive, algumas já tentamos sanar esses dias, mas já que vem surgindo outras, amanhã vou analisar ele mais a fundo e te ajudar a refatorá-lo, certo? :}

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

27/04/2019

Oi, Vitor, voltei aqui

Dei uma boa olhada no seu código que tá lá no GitHub e fiz algumas considerações:

1) Lá no GitHub não estão todas as páginas HTML, o que dificultou pra que eu te pudesse ajudar mais. Lá só tá a index.html.

2) O código da parte contato tá no arquivo site.css. Faça um arquivo só para ele: contato.css

3) O arquivo index.html não se refere ao arquivo index.css. Uma boa prática é manter o paralelismo entre os arquivos, por exemplo: bio.html -> bio.css

4) A nomeclatura de alguns arquivos css que está cssblog.css. Deixe-os assim: blog.css.

5) O arquivo cssblog.css está muito grande com estilizações misturadas. Por exemplo, a tag aside tá três estilizações para ele espelhadas no arquivo, e mais outras 3 que está com outras tags.

É um dos seus primeiros contatos com CSS? CSS não é fácil. Quando eu tive o meu primeiro contato, numa disciplina da faculdade (eu tinha que fazer um site simples), foi complicado, nada que eu fazia dava muito certo, não sabia no que tava errando, enfim, quase desisti do trabalho. Mas depois, analisei com calma, conversei com o professor e ele me indicou a fazer do 0. Raciocinando com calma as estilizações que tava fazendo, por que as vezes chega num momento que os arquivos CSS viram monstros se a gente não souber dominá-los. No fim, o trabalho deu super certo, tirei 9, rs, e, hoje, adoro mexer com css, é quase uma diversão pra mim.

O que quero te dizer com isso? Que é normal esses problemas de imcopatibilidade acontecerem com o código css: entender a organização, a sequência, tags, id's, níveis de especificidade, qual nome por nos arquivos css, etc. É muita coisa, mas com o tempo vai ficando mais fácil.

Te aconselho a pegar o código do instrutor e dar uma olhada na organização dele, tentar se seguir, por que ele vai ter dar uma base e uma referência muito segura pro seu código. Veja, não necessariamente é pra deixar tudo igual, mas se você seguir a organização, seja dos arquivos, das sequencia dos códigos, de identação, vai te ajudar a compreender melhor e, daí, você refatora o seu código. Isso vai te fazer entender e aprender mais como funciona o CSS.

solução!

por Henrique Lustosa Ribeiro Faria

| 297k xp | 168 posts

Analista de Sistemas

28/04/2019

Olá, Vitor.

Vou tentar explicar o código e o motivo de não funcionar no seu caso. Primeiro segue o html e depois css.

<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" href="css/index.css">
</head>
<body>  
   <fieldset>


                <legend>Assunto</legend>

                    <label>
                    <select>
                    <option value="blog">Blog</option>
                    <option value="serviço">Serviço</option>
                    <fieldset>
                        <option value="Outro">Outro</option>
                        <option value="Oculto">Oculto</option>
                    </fieldset>
                    </select>
                    </label>


                </fieldset>    
    </body>
</html>

option[value="Outro"] ~ option {
    display: none;
}
option[value="Outro"]:checked ~ option {
    display: inline;
}

Se você abrir a página html perceberá que o item oculto só aparece quando você clica o a opção Outro.

O sinal ~ no arquivo css só funciona para tags iguais, do mesmo tipo.

Isso ocorre porque as tags são "irmãs", do mesmo tipo( Option e Option). No caso do seu exemplo não funciona, pois o que você está querendo é, que a partir de uma tag option, você mude o comportamento, pelo sinal ~, uma tag input.