8
respostas

Ajuda com código

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pixels? e atividade Nova página

por Shellen Lorreny Miranda
| 97k xp | 82 posts

Olá fiz o meu portfólio, mas por algum motivo não consigo pegar a altura da tela completa, veja o print:

http://prntscr.com/hesspc

Observe que no bio.html, pega a página inteira, ver o print:

http://prntscr.com/hestey

Não sei se fiz algo errado no código, mas a página saiu conforme deveria.

Código CSS portfolio.css

figcaption{ /*Cor para o link do menu principal*/
    color: #851944;
    text-decoration: underline;
}

.bmw, .ibm, .uol, .g1{
    border: 8px solid black;/*parte 2 8/16=0.5em*/
    background: #FAFFFC;
    width: 400px;
    padding: 16px;/*Espaçamento interno*/
/*    margin: 16px; /*Espaçamento externo*/
    margin-bottom: 16px;
    margin-left: 16px;
    box-sizing: border-box; /*para pegar a medida da largura de todo o conteúdo*/
    font-size: 22px;
    display: inline-block;
}

.bmw{
    clear: right;
    position: absolute;
    left: 160px;
    display: inline-block;
}

.uol{
    float: right;
    position: absolute;
    top: 270px;
    right: 340px;

}

.ibm{
    clear: right;
    position: absolute;
    top: 590px;
    left: 160px;
}

.g1{
    float: right;
    position: absolute;
    top: 590px;
    right: 340px;
 /*   margin-bottom: 10%;*/
}
8 respostas
por Shellen Lorreny Miranda
| 97k xp | 82 posts

Código site.css

.navegacao-site h1 { /*parte 2*/
    font-size: 1.5em;
    margin-bottom: 1em;
}

.rodape {
    background-color: black;/*Parte 1*/
    color: #F2FFFC;    /*Parte 1*/
    clear: both; /*Parte 1*/
    position: fixed;/*Parte 1*/
    bottom: 0px;/*Parte 1*/
    width: 100%; /*Parte 1 - Parte 2 200000/1905=104,98*/
    padding: 1em; /*Parte 1".navegacao, .rodape" - Parte 2 - 20/20=1em ou 20/16=1,25em */
}

.corpopagiprincipal > figure:last-child{ 
    margin-bottom:10%;
}

.corpopagiprincipal{ /*Parte 1 -> Exercício 03 - cap-5* conteúdo principal - *Exercício 06 - módulo 8 Feito troca main div por classe texto-*/
    width: 80ch;/*Parte 1 - Parte 2 720px para ch*/
    margin: auto;/*Parte 1*/
    padding: 1.5em 0;/*Parte 1 - Parte 2 - 30/20=1.5em // 40/20=2em ou 40/16=2,5em */
    /*padding-bottom: 4em;/*Parte 1 - Parte 2 80/20=4*/
}

.navegacao h1 { /*Parte 1 - trocado por classe de aside para .navegacao*/
    font-size: 30px;/*Parte 1 - 30/20=1.5em ou 30/16=2.0*/
    margin-bottom: 2rem;/*Parte 1*/
}

strong{
    font-weight: bold; /*Parte 1*/
}

em{
    font-style: italic;/*Parte 1*/
}

.icones-sociais li{
    display: inline-block;/*Parte 1*/
}

.social-rodape{
    margin:10px;/*Parte 1 - Parte 2 10/20=0.5em ou 10/16=0.5em */
}

.icones-sociais a{ /*Parte 1 - A unica coisa que muda é a imagem do ícone social, para isso criasse uma classe para cada um deles*/
    width: 40px;/*Parte 1 - ajuste na largura*/
    height: 40px; /*Parte 1 - ajuste na altura*/
    display: inline-block;/*Parte 1*/
    text-indent: -9999px;  /*Parte 1*/
}

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

.linkedin{
    background-image: url(img/linkedin.png); /*Parte 1 - a imagem aparece*/    
}

.twitter{
    background-image: url(img/twitter.png); /*Parte 1 - a imagem aparece*/    
}

main{
    float: left;/*Parte 1*/
    width: 80%;/*Parte 1 -> Parte 2 - 86% da largura da tela do nosso navegador, a % é uma medida diferente e depende do contexto que será usada (no aside estamos usando 14% de largura) e funciona com relação a largura da tela, mas nem sempre é (exemplo citação)*/
    box-sizing: border-box;/*Parte 1*/
    padding-bottom: 4em;/* Parte 2 80/20=4**/
}

.navegacao, .fotosite{ /*Parte 1 - tag aside e img*/
    float: right;/*Parte 1*/
    box-sizing: border-box;/*Parte 1*/
    border-left: .5em solid black;/*Parte 1 - Parte 2 */
    border-bottom: .5em solid black;/*Parte - Parte 2 10/20=.5em1*/
}

.navegacao {
    width: 20%;/*Parte 1*/
    position: relative;/*Parte 1*/
    top: 300px;/*Parte 1*/
}

.fotosite{
    position: absolute; /*Parte 1 - Relative = relativo à posição original*/
    top: 0px; /*Parte 1 - o topo desce 10 px*/
    right: 0px; /*Parte 1 - arreda o lado direito*/
}
por Shellen Lorreny Miranda
| 97k xp | 82 posts

E meu html portfolio.html

<!DOCTYPE html> 
<html>
    <head> 
        <meta charset="utf-8">
        <title>Site HTML e CSS Shellen</title>
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/portfolio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>

    <body> 
    <main>
        <h1 class="tituloprincipal">Portfólio</h1>
        <div class="corpopagiprincipal">
            <p>Veja abaixo a lista dos meus projetos mais relevantes</p>
            <figure class="bmw">
                <img src="img/bmw.png" alt="Projeto BMW">
                <figcaption><a href="https://bmw.com">bmw.com</a>: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
            </figure>

            <figure class="uol">
                <img src="img/uol.png" alt="Projeto UOL">
                <figcaption><a href="https://uol.com.br">uol.com</a>: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
            </figure>
            <figure class="ibm">
                <img src="img/ibm.png" alt="Projeto IBM">
                <figcaption><a href="https://ibm.com">ibm.com</a>: aplicação de progresive enhancement em conjunto com aplicação back-end</figcaption>
            </figure>
            <figure class="g1">
                <img src="img/g1.png" alt="Projeto Globo G1">
                <figcaptin><a href="https://g1.com.br">g1.com.br</a>: reformulação de design e implementação de HTML, CSS e JavaScript</figcaptin>
            </figure>

        </div>
    </main>
        <img class="fotosite" src="img/shellen.jpg" alt="Foto Shelle Lorreny">
    <aside class="navegacao"> <!-- Conteúdo auxiliar ao conteúdo principal como links relacionados ao conteúdo. Conteúdo extra, complementar-->
        <h1>Shellen Lorreny</h1>    
        <nav> <!-- Indica regição da página que cotém link de navegação -->
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
            <ul class="icones-sociais"> 
                <li><a class="github" href="#">
                    Github
                    </a>
                </li>
                <li><a class="linkedin" href="#">
                    Linkedin
                    </a>
                </li>
                <li><a class="twitter" href="#">
                    Twiter
                    </a>
                </li>
            </ul>
    </aside>
        <footer class="rodape"> &copy; Shellen Lorreny - 2017
        </footer>
    </body>
</html>

Espero que alguém consiga me ajudar, pq não to conseguindo achar onde está o erro e quero que a página funcione certinho.

Obrigada.

por guilherme.urbinatti
| 341.9k xp | 171 posts
Analista de Sistemas

Observe que no canto do seu print. Está em vermelho 3 erros. (abaixo da sua foto) . Se conseguir mandar os erros. Ajuda. Clique em console para exibir os erros.

por Shellen Lorreny Miranda
| 97k xp | 82 posts

Veja o print do erro:

http://prntscr.com/hetwj9

Mas está tudo certo.

Coloquei o site em um servidor de hospedagem que eu tenho, você pode acessar pelo link:

http://peritia.com.br/alura/

Nele da a mesma inconsistência:

Print portfólio:

http://prntscr.com/hetya3

Página inicial:

http://prntscr.com/hetz0v

por Shellen Lorreny Miranda
| 97k xp | 82 posts

Coloquei a pasta no diretório que estava informando, mas a "falha da altura persiste", veja:

http://prntscr.com/heu0wz

por guilherme.urbinatti
| 341.9k xp | 171 posts
Analista de Sistemas

Não entendi ainda seu problema. Sobre o link no qual você mandou, está tudo certo aqui no meu navegador. http://peritia.com.br/alura/

Segue: https://www.dropbox.com/s/s5nvn9b0gmow4r1/paint.PNG?dl=0

por Shellen Lorreny Miranda
| 97k xp | 82 posts

A página inicial está correta, veja:

http://prntscr.com/hev0am

O meu problema é na página Portfólio, ele pega uma altura de 459, não pega a altura da página inteira, veja:

http://prntscr.com/hev001

por guilherme.urbinatti
| 341.9k xp | 171 posts
Analista de Sistemas

Realmente o sua tag HTML não está acompanhando o tamanho da tela no portifólio tanto no Firefox quanto no Chrome. Consegui resolver da seguinte maneira: height: 100% para o elemento html no css. (obs.: Coloquei ele isoladamente, removendo o reset.) Agora para resolver o problema sem ter que forçar dessa maneira, aconselho isolar a página e ir refazendo classe por classe. Pois por padrão não deveria estar acontecendo.

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