Created
September 5, 2012 04:43
-
-
Save peas/3630605 to your computer and use it in GitHub Desktop.
Página exemplo do livro de design responsivo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.