Ir ao conteúdo
  • Cadastre-se
Macunaíma

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

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

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..

Compartilhar este post


Link para o post
Compartilhar em outros sites

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" 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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..

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 :D  

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×