Como Separar o menu do resto do site em HTML5 E CSS3

Macunaíma · 18 de abril de 2014

Fiz uma vídeo aula - dura um pouco mais de 1 minuto - explicando o meu problema para ficar mais fácil

https://www.youtube.com/watch?v=67BHEiFbSK0&feature=youtu.be

e aqui o código

DiF · 19 de abril de 2014

Olá,

O código que "postou" não foi de muita ajuda. recomendo não postar em imagem. mas sim o código usando a tag code. POste o css também.

Acredito que o melhor é fixar o menu e deixar sempre em primeiro plano utilizando o Z-index.

Mas lembre que o z-index não funciona por herança. Os divs devem ser irmãos.

Macunaíma · 20 de abril de 2014

Dif, o que acontece é que o menu não é exatamente um "menu" pois, tudo que há nele eu usei CSS( como você pode ver no código ) para posicionar naquele canto da página, só você reparar no vídeo que fiz, quando clico no contato, o site todo está da mesma cor, então não tem separação alguma. Acredito que não tem como usar o Z-index apra solucionar isso pois, assim como as imagens e o formulário o sobrepõe, agora iriam parar atras dele depois da rolagem lateral.

HTML

<!DOCTYPE html><html lang="pt-br"><head>    <meta charset="utf-8">    <title>Loja Virtual</title>    <link rel="stylesheet" type="text/css" href="_css/estilo.css"/></head><body>    <header id="cabecalho">        <nav id="menu">            <div id="novas">                <label for="new">Newlestter:</label><input type="email" name="email" placeholder="e-mail" id="new"/>            </div>            <div id="logo">                <a href="home.html"><img src="_imagens/logo.jpg"/></a>            </div>            <ul>                <li><a href="inicio.html">L o j a</a></li><br/>                <li><a href="Contato.html">C o n t a t o</a></li><br/>            </ul>            <footer id="rodape">                <a href="#" target="_blank"><img src="_imagens/face-logo'.jpg"/></a>                <a href="#" target="_blank"><img src="_imagens/insta.jpg"/></a>            </footer>        </nav>    </header>      <div id="camiseta">        <a href="#"><img src="_imagens/kate-moss-vogue.jpg"/></a>    </div>    <div id="gorro">        <a href="#"><img src="_imagens/marijuana.jpg"/></a>    </div>    <div id="meias">        <a href="#"><img src="_imagens/gorro.jpg"/></a>    </div>    <div id="samba">        <a href="#"><img src="_imagens/badhair.jpg"/></a>    </div></body></html>

CSS

@charset "utf-8";@import url(http://fonts.googleapis.com/css?family=Abel);body {    background-color:#fbfbf3;          }/* Formatação de Menu */nav#menu div#novas {    position: absolute;    top: 21px;    font-family: 'Abel', sans-serif;    font-size: 12pt;    color: goldenrod;}header#cabecalho {    position: fixed;    display: block;   }div#logo {    position: absolute;    top: 80px;    left: -8px;}nav#menu ul {    position: absolute;    list-style: none;    text-transform: uppercase;    top: 160px;    left: 45px;    height:200px;    width:100px;    font-family: 'Abel', sans-serif;    font-size: 10pt;    }nav#menu a {    color: goldenrod;    text-decoration: none;    }nav#menu a:hover{    color: black;}/* Formatação de Imagem */div#camiseta {    position: absolute;    top: 0px;    left: 250px;    }div#camiseta a:hover {    opacity: 1;}div#gorro {    position: absolute;    top: 735px;    left: 250px;}div#meias {    position: absolute;    top: 735px;    left: 622px;}div#samba {    position: absolute;    top: 735px;    left: 994px;}nav#menu footer#rodape {  /* Veja que apesar do footer ser parte do cabeçalho, ele está na formatação de imagem, pois só há imagens nele. */    position: relative;    top: 610px;    display: inline-block;}

DiF · 20 de abril de 2014

Mas tem alguma razão especial para fazer desta maneira?

Na minha opinião, o melhor seria você separar o menu do resto do site e limitar o width do resto para não criar aquele scrollbar horizontal..

Macunaíma · 20 de abril de 2014

Isso é o que eu quero Dif, separar o menu para que não haja sobreposição de nenhuma das partes, mas não estou sabendo fazer! Esses sites tem o menu do jeito que eu quero:

www.zegna.com - www.damyller.com.br

DiF · 20 de abril de 2014

Veja este exemplo: http://jsfiddle.net/6HeMV/

Foi utilizado as tags do html5 e media query do css3.. de resto, é só css normal. Repare que o menu está como fixed, separado o div que conterá o conteudo.

Não repara nas cores, só coloquei para que você possa visualizar as "camadas"

Macunaíma · 20 de abril de 2014

Eu vi, mas mano, não é pra ter a rolagem horizontal, é pra ficar só com a vertical mesmo, assim como nos sites que te mandei.

DiF · 21 de abril de 2014

Veja o exemplo cara. Não tem barra de rolagem horizontal, pois foi definido 960px de width centralizado. isso não dá barra de rolagem em resoluções a partir de 1024 x 768 e superiores.

Redimensione o lado onde a parece o exemplo renderizado.

Recomendo que analise o código do exemplo e entenda. Pois do jeito que você está fazendo SEMPRE vai ter uma barra de rolagem horizontal.

Ratificando, o exemplo do post #6 evita o problema e fixa o menu no lado esquerdo... deixado o lado direito para rolar caso tenha conteúdo suficiente para gerar um scrollbar vertical.

Macunaíma · 23 de abril de 2014

Consegui resolver! Tenho 1366px de largura, dela reservei 250px para meu menu, logo tenho 1116px para o corpo do site. Sabendo disso eu redimensionava minhas imagens para 1116px de largura e ainda tinha rolagem horizontal. Daí descobri que a rolagem era de 2px, então diminui meu menu em 2px e sumi com a rolagem horizontal. Agora no formulário, eu precisei fixá-lo mesmo para resolver o problema. De qualquer forma Dif, muito obrigado.

manoelps · 25 de abril de 2014

Em um detalhe, você tem esta resolução, mas e as outras pessoas? que possui 124x768 ou até menos dependendo do monitor / display?

DiF · 25 de abril de 2014

Em um detalhe, você tem esta resolução, mas e as outras pessoas? que possui 124x768 ou até menos dependendo do monitor / display?

Nesse caso ele deveria adaptar o layout para responsivo.. assim.. funcionaria em qualquer dispositivo... seja tablet, celular.. notebook.. desktop.. enfim..

Macunaíma · 28 de abril de 2014

Manoelps realmente não tinha pensado nisso, só havia feito o teste em 3 naveg. que possuo pela minha máquina. Diff, não entendi perfeitamente a sua dica, mas li algo do tipo no cap. Media Queries do livro de CSS3 do Maujor que estou estudando. Como seria essa adaptação?

DiF · 28 de abril de 2014

então, eu possuo o mesmo livro e é ótimo. Página 255, capitulo 10.

As medias queries podem resolver o problema de adaptação, onde você acrescenta no seu CSS a chamada da media querie para aquele determinado dispositivo. e dentro de cada chamada você pode definir estilizações diferentes.

Melhor exemplo impossível de layout responsivo!

@[member=MEDIA] screen and (min-width:320px) {    /* estilização para disposotivos móveis smartphone */}@[member=MEDIA] screen and (min-width:480px) {    /* estilização para dispositivos móveis tablet */}@[member=MEDIA] screen and (min-width:600px) {   /* estilização para outros dispositivos */    }@[member=MEDIA] screen and (min-width:768px) {    /* estilização para monitores de 14 ~ 17" */}@[member=MEDIA] screen and (min-width:992px) {    /* estilização para monitores acima de 17" */}

Particularmente, ainda uso um container de 960px, centralizada... que fica bem em monitores com 1024 x 768. E no caso de dispositivos móveis, eu utilizo o framework jQuery Mobile.

Mas sei que as medias queries tem suas vantagens.. por isso não descarto a possibilidade de utilizar