Entrar Ainda não tem acesso?
5
respostas

Dúvida me torturando

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Salatiel Aizza
| 108k xp | 82 posts

Olá pessoal. Minha página do João da Silva, na section "Blog" tem uma faixa branca na parte inferior que não consigo tirar de jeito nenhum. Seguem as parte do cógico pertinentes e um print:

print: https://imgur.com/a/4f6mndh

html:

<section class="secao-inicio blog">
            <h1>Blog</h1>
            <p class="links">Últimos posts</p>
            <ol>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">O essencial de design responsivo</a>
                    <p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
                </li>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">Por que fazer páginas acessíveis?</a>
                     <p class="inicio-post">Paginas acessiveis te darao mais acessos e consequentemente mais divulgaçao e dinheiro.</p>
                </li>
                <li class="link-blog">
                    <a class="post-destaque" href="blog.html">JavaScript não obstrusivo</a>
                    <p class="inicio-post">Javascript e a principal linguagem de programaçao da web, que precisa ser bem escrita para nao tornar seu conteudo pesado e a pagina lenta.</p>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>

css:


.blog {
    background-color: #999;
    color: #FFF;
    position: relative;
}

.blog li a {
    color: #FCF;
    margin-left: 2rem;
}

.blog li {
    width: 30%;
    margin-bottom: 1rem;
}

.blog .link-blog a:hover {
    padding: .5rem .5rem .5rem;
    color: black;
}




.secao-inicio h1 {
    padding-top: 2rem;
    text-transform: uppercase;
    font-size: 3rem;
    color: white;
    margin: 0rem 0rem 0rem 2rem;
}

.secao-inicio ul {
    margin: 0 2rem;
}
.secao-inicio h2 {
    text-shadow: 3px 3px #000;
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

Eu acredito que o problema está na classe .blog, pois em uma section anterior que utiliza a classe .secao-inicio está tudo ok, porém deixei ai devido minha baixíssima experiência. Tomara que eu tenha conseguido explicar o problema.

5 respostas
por Paulo Ricardo
| 60.6k xp | 3 posts

Olá, amigo. Você pode estar tendo alguns problemas que já tive. Não tenho a certeza se conseguirei resolver, mas vou tentar.

Você pode ter usado algum float e esqueceu do "both". Faça o seguinte, crie uma div com a classe clearfix e ponha no local onde está branco. No css você colocar a propriedade "clear: both" para limpar o float. Segue o exemplo:

html:

css: .clearfix{ clear: both; }

Você também pode ter esquecido de dar um display naquele botão roxo na parte inferior da sua página:

.botao-roxo{ display: inline-block; } Caso isso não resolva sugiro que me envie um email e me passe todo o código para que eu possa analisar.

paulo.ricardo@boldcomunicacao.com.br

por Axell Brendow Batista Moreira
| 110.7k xp | 130 posts
Software Engineer

Não consegui identificar o problema nesse trecho de código que enviou. Se quiser, poste todo o código CSS e HTML aqui que com certeza iremos conseguir te ajudar.

por Salatiel Aizza
| 108k xp | 82 posts

Obrigado Paulo e Axell pela ajuda rápida. O problema estava na classe botao-index

.botao-index {
    font-size: 1.25em;
    background-color: rgb(133, 25, 68);
    color: rgb(255, 255, 255);
    padding: .5em;
    border: .2em solid rgb(0, 0, 0);
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;

Alterei o display para inline-block e resolveu parcialmente, pois já não tem a faixa branca abaixo, porém eu não consigo mais centralizar o botao-index automaticamente. Tive que fazer manualmente na propriedade margin. 

margin: 2em 24em 2em;
display: inline-block;
por Axell Brendow Batista Moreira
| 110.7k xp | 130 posts
Software Engineer

É uma forma de fazer, porém, mesmo usando medidas relativas, ainda não fica 100% reaproveitável. Afinal, se um dia existir uma barra lateral e as seções diminuírem, provavelmente o botão não irá ficar centralizado. O ideal seria descobrir o motivo da faixa branca e então usar esse CSS no botão 

display: block;
margin: 2em auto;

Estou disposto a ajudar, mas é sua escolha.

por Salatiel Aizza
| 108k xp | 82 posts

Beleza Axell, seguem os link do meu gist:

html: https://gist.github.com/salatielaizza/40f7b9a8456fdd5eb98a4612055dc94b

css: https://gist.github.com/salatielaizza/354f62dc7c3b860370cf7536e02fcdf4

Já aproveitando também não consigo fazer as imagens da section trabalhos ocupar todo o espaço até a borda. segue link do print: https://imgur.com/a/7uXtwnG

Desde já muito agradecido.