-
-
Save peas/3630605 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Layout Fixo</title> | |
| <link href="style.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1> | |
| Layout Fixo | |
| </h1> | |
| </header> | |
| <div class="content"> | |
| <div class="content-main"> | |
| <article class="hero"> | |
| <h2> | |
| Título Importante | |
| </h2> | |
| <p class="brief"> | |
| Descrição ou resumo de um | |
| conteúdo importante, que precisa ser | |
| mostrado para evidenciar a notoriedade deste | |
| conteúdo. Descrição ou | |
| resumo de um conteúdo importante, que | |
| precisa ser mostrado para evidenciar a | |
| notoriedade deste conteúdo. | |
| </p> | |
| </article> | |
| <div class="last-contents"> | |
| <article class="last-content-call"> | |
| <h2 class="secondary-title"> | |
| Título de Conteúdo | |
| </h2> | |
| <p class="brief"> | |
| Resumo ou | |
| descrição deste | |
| conteúdo. Deve ser algo que chame | |
| a atenção! | |
| </p> | |
| <a href="#">Leia mais</a> | |
| </article> | |
| <article class="last-content-call"> | |
| <h2 class="secondary-title"> | |
| Título de Conteúdo | |
| </h2> | |
| <p class="brief"> | |
| Resumo ou | |
| descrição deste | |
| conteúdo. Deve ser algo que chame | |
| a atenção! | |
| </p> | |
| <a href="#">Leia mais</a> | |
| </article> | |
| <article class="last-content-call"> | |
| <h2 class="secondary-title"> | |
| Título de Conteúdo | |
| </h2> | |
| <p class="brief"> | |
| Resumo ou | |
| descrição deste | |
| conteúdo. Deve ser algo que chame | |
| a atenção! | |
| </p> | |
| <a href="#">Leia mais</a> | |
| </article> | |
| <article class="last-content-call"> | |
| <h2 class="secondary-title"> | |
| Título de Conteúdo | |
| </h2> | |
| <p class="brief"> | |
| Resumo ou | |
| descrição deste | |
| conteúdo. Deve ser algo que chame | |
| a atenção! | |
| </p> | |
| <a href="#">Leia mais</a> | |
| </article> | |
| <article class="last-content-call"> | |
| <h2 class="secondary-title"> | |
| Título de Conteúdo | |
| </h2> | |
| <p class="brief"> | |
| Resumo ou | |
| descrição deste | |
| conteúdo. Deve ser algo que chame | |
| a atenção! | |
| </p> | |
| <a href="#">Leia mais</a> | |
| </article> | |
| <article class="last-content-call"> | |
| <h2 class="secondary-title"> | |
| Título de Conteúdo | |
| </h2> | |
| <p class="brief"> | |
| Resumo ou | |
| descrição deste | |
| conteúdo. Deve ser algo que chame | |
| a atenção! | |
| </p> | |
| <a href="#">Leia mais</a> | |
| </article> | |
| </div> | |
| <aside class="content-sidebar"> | |
| <nav class="main-nav"> | |
| <ul> | |
| <li><a href="#">Menu 1</a></li> | |
| <li><a href="#">Menu 2</a></li> | |
| <li><a href="#">Menu 3</a></li> | |
| <li><a href="#">Menu 4</a></li> | |
| <li><a href="#">Menu 5</a></li> | |
| <li><a href="#">Menu 6</a></li> | |
| </ul> | |
| </nav> | |
| </aside> | |
| </div> | |
| <footer class="main-footer"> | |
| Copyleft. Nenhum direito reservado, etc e tal. | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Exato lusabo. Precisa retirar da div content o menu
Faltou o fechamento na div de id="content". Aside deve ser colocado fora da div content-main e footer deve ficar fora de content.
Gente uma duvida...to fazendo este exercicio para aprender, e no meu caso os menus ficaram embaixo, e no livro mostra eles no canto superior direito.
Ta correto o meu? Ou tem algo errado?
Ate ppeguei os codigos acima ja prontos e ficou igual...Alguem pode me ajudar?
Em caso de problema com a "content-sidebar", verifique o fechamento das divs, primeiro a .container e dentro dela a .content e nessa a .content-main, no mesmo nivel desta ultima deve estar a .content-sidebar, que estão dentro de .content e esta ultima junto com header e footer estão dentro de .container.
Observe as divs.
Coloquei o menu depois de fechar a div "content" e ficou igual ao da apostila
Arquivo corrigido: https://gist.github.com/pedrohills/a7e4f514c56b5dcc8dcb
como faço para baixar a folha de estilo?
A tag
deve ficar fora do div content, antes de footer.