Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Ajuste do Layout

Boa tarde,

consegui fazer porem as imagens das redes sociais não esta aparecendo o que devo fazer?

<html>
    <head>
        <title>João da Silva </title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png"/>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.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>Sobre mim</h1>

            <div>
            <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, durabilidade e que agregam valor para meus clientes</em>.</P>
            <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

            <h2>Como trabalho</h2>

            <blockquote class="Fiat">

                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                   <cite> José Souza, Fiat</cite>

            </blockquote>

            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

            <p>Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.</p>

            <h2>Experiência</h2>

            <blockquote class="Petrobrás">    <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                <cite> Manoel Santos, Petrobrás</cite>
            </blockquote>
            <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW<a/>,<a href="http://www.uol.com.br"> UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.
            Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.com.br">G1</a>    , em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.</p>
            </div>

        </main>
        <img src="eu.jpg" alt="Foto de João da Silva">
        <aside>
            <nav>
            <h1>João da Silva</h1>

            <ul>
                <li><a href="#">Home<a/></li>
                <li><a href="#">Protifolio<a/></li>    
                <li><a href="#">Sobre mim<a/></li>        
                <li><a href="#">contato<a/></li>    

            </ul>
            </nav>
            <ul id="icones-sociais">
                <li><a href=" http://github.com/joaodasilva"><img src="github.png" alt="github joaodasilva"> </a></li>
                <li><a href="http://twitter.com/joaodasilva"><img src="twitter.png" alt="twitter"></a></li>
                <li><a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"><img src="linkedin.png" alt="linkedin"></a></li>

            </ul>
        </aside>
        <footer>
            &copy; João da Silva 2016
        </footer>
    </body>
</html>
main h1 {
    font-size:60px;
    background-color: rgb(120,30,60);
    color: rgb(250,255,255);
    text-align: center;
    font-family: "Open Sans Condensed",sans-serif ;
    padding: 20px
    border-bottom: 10px solid black;
    text-transform: uppercase;
    margin: 0;
    }
 h1, h2{    
        font-size:40px;
        font-family: "Open Sans Condensed", "Arial", sans-serif ;
        clear: right;
}

p{    
    text-align: justify; 
    margin: 20px 0;
}

body{

    font-family:"Crimson Text","Times New Roman", serif;    
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

blockquote {
    background-color: #D9E5E3;
    padding: 16px;
    border: 10px solid  #C2CCCA; 
    width: 250px;
    margin: 0px;
    box-sizing: border-box;
}

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 05px;
    text-align: center;

}
#icones-sociais li {
    display: inline-block;
}

footer {
    background-color: #000;
    color: #F2FFFC;
    padding: 05px;
}

nav a {
    color: #F2FFFC;
    text-transform: lowercase;
}


ul li a{
    color: inherit;
}
main a {
    color: #851944;
}
aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;

}
.Fiat {
    float: right;
}
.Petobrás {
    float: left;
}
aside , img {
    float: right;
    width: 15%;
}
aside { 
    clear: right;
    box-sizing: border-box;
 }
 main {
     float: left;
     width: 85%;
 }
 footer{
     clear: both;
 }
 div{
     margin: auto;
     padding: 30px 0;
    width: 720px;

 }
6 respostas

Olá Jean.

Onde você deixou as imagens? Está na mesma pasta dos seus arquivos html?

O atributo src da tag <img> deve apontar o caminho onde está a imagem. Por exemplo:

<img src="../github.png" alt="github joaodasilva">

Fazendo isso, estou dizendo que o arquivo github.png está uma pasta acima (atrás, no caso) da pasta que o arquivo que estou mexendo está localizado.

Outro exemplo:

<img src="../img/github.png" alt="github joaodasilva">

Aqui já especifico que o arquivo github.png está na pasta img que acima da pasta que o arquivo que estou mexendo está localizado.

Olá, Jean.

Tudo bom? Nessa parte do código você está dizendo dentro do atributo src que as imagens estão dentro da mesma que o arquivo HTML.

<ul id="icones-sociais">
  <li><a href=" http://github.com/joaodasilva"><img src="github.png" alt="github joaodasilva"> </a></li>
  <li><a href="http://twitter.com/joaodasilva"><img src="twitter.png" alt="twitter"></a></li>
  <li><a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"><img src="linkedin.png" alt="linkedin"></a></li>
</ul>

Se você chegou a colocar as imagens dentro de uma pasta, por exemplo com o nome img você precisa trocar o valor do atributo src para:

<ul id="icones-sociais">
  <li><a href=" http://github.com/joaodasilva"><img src="img/github.png" alt="github joaodasilva"> </a></li>
  <li><a href="http://twitter.com/joaodasilva"><img src="img/twitter.png" alt="twitter"></a></li>
  <li><a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"><img src="img/linkedin.png" alt="linkedin"></a></li>
</ul>

Se não esse o caso, aviso que a gente dá uma investigada :-)

Boa noite , então verifiquei a imagem esta dentro da mesma pasta que esta o arquivo HTML , qual seria o próximo passo ?

solução!

Jean,

Boa noite! Já que conseguiu verificar a questão das imagens ficou pendente fazer o image replacement, existem várias maneiras de resolver isso. Seu codigo deve ficar parecido com o código abaixo:

            </nav>
            <ul id="icones-sociais">
                <li>
            <a href=" http://github.com/joaodasilva">
            <img src="img/github.png" alt="github joaodasilva"> Git hub 
                </a>
        </li>
                <li>
            <a href="http://twitter.com/joaodasilva">
            <img src="img/twitter.png" alt="twitter">twitter
            </a>
        </li>
                <li>
            <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
            <img src="img/linkedin.png" alt="linkedin">linkedin
            </a>
        </li>

            </ul>

#icones-sociais li {
    display: inline-block;
    text-indent:-9999px;

}

#icones-sociais a {
  width: 40px;
  height: 40px;
  display:block;

}

Explicação:

repare que a adicionei um texto em cada um dos

  • o texto serve para dar semantica no seu html
            <li>
                <a href="http://twitter.com/joaodasilva">
                <img src="img/twitter.png" alt="twitter">twitter
                </a>
    </li>

    Adicionei regra abaixo para mandar o texto para o canto do documento fazendo o mesmo sumir.

        text-indent:-9999px;

    No regra seguinte defini um tamanho para a tag link de sua lista.

    Na sequência atribui para sua list um display:block; pois o elemento é lido pelo html em texto não em bloco, tendo está alteração é possível mexer na largura e altura do documento.

    #icones-sociais a {
      width: 40px;
      height: 40px;
      display:block;

    Textei aqui com essas alterações e deu certo, só verifique direitinho o caminho das imagens a melhor coisa é separar e deixar em uma pasta. normalmente usamos o nome da pasta de "img".

    Espero ter ajudado abçs.

  • Jean,

    no seu css, o seletor img esta assim:

    aside , img {
        float: right;
        width: 15%;
    }

    a img também esta com width: 15% e esta com o tamanho pequeno. Experimento tirar o img e deixar só o aside com 15 % que as imagens vão aparecer.

    E verdade Jefferson muito obrigado.