Problema com JavaScript ou CSS?

por Shaman 04.03.15 8:02

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Opera
Membros afetados : Todos os membros do fórum
Problema começou : Hoje
Endereço do fórum : http://populousbr.forumbrasil.net

Descrição do problema

Olá, estou com um problema nesse site que estou fazendo, que mais pra frente irei trocar o conteúdo e se tronará o possível site de meu fórum, estou enfrentando um problema agora no menu, com o curso que estou fazendo, o código java script criado troca a imagem quando passamos o mouse pelo menu "Home", mas o menu quando isso acontece ele troca de lugar, pôs estou usando a position: relative; no CSS. Se eu usar a absolute isso não acontece mas o menu não se ajusta com todas as resoluções.

Como resolver?

Se eu usar a position: absolute; aqui o menu não troca de lugar:

Código:: nav#menu ul { list-style: none; text-transform: uppercase; position: relative; /* Se eu usar aqui a absolute*/ top: -253px; left: 264px; }

Sendo que se eu deixar a position absolute, o menu não se ajusta a todas as resoluções.

Aqui está o código completo:

Código:: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Populous BR</title> <link rel="stylesheet"/> <style> @charset "UTF-8"; @import url(http://fonts.googleapis.com/css?family=Titillium+Web); @font-face { font-family: "FonteLogo"; src: url("_fonts/bubblegum-sans-regular.otf"); } body { font-family: Arial, sans-serif; background-color: #dddddd; color: rgba(0,0,0,1); } div#interface{ width: 900px; background-color: white; margin: -20px auto 0px auto; box-shadow: 0px 0px 10px rgba(0,0,0,.5); padding: 10px; } p { text-align: justify; text-indent: 50px; } figure.foto-legenda { position: relative; border: 8px solid white; box-shadow: 1px 1px 4px black; width: 440px; height: 338px; } figure.foto-legenda img{ width: 440px; height: 338px; } figure.foto-legenda figcaption { opacity: 0; position: absolute; top: 0px; background-color: rgba(0,0,0,.4); color: white; width: 440px; height: 338px; padding: 10px; box-sizing: border-box; transition: opacity 1s; } figure.foto-legenda:hover figcaption { opacity: 1; } /* Formataçao de menu */ nav@menu { display: block; } nav#menu ul { list-style: none; text-transform: uppercase; position: relative; top: -253px; left: 264px; } nav#menu ul { list-style: none; text-transform: uppercase; } nav#menu li { display: inline-block; background-color: #dddddd; padding: 10px; margin: 2px; -webkit-transition: background-color 1s; -moz-transition: background-color 1s; -ms-transition: background-color 1s; -o-transition: background-color 1s; transition: background-color 1s; } nav#menu li:hover { background-color: #606060; } nav#menu h1 { display: none; } nav#menu a{ color: black; text-decoration: none; } nav#menu a:hover{ color: #ffffff; text-decoration: underline; } header#cabecalho img#icone { position: relative; left: 750px; top: -57px; } header#cabecalho { border-bottom:1px #606060 solid; height:150px; background: url("_imagens/glass-logo-peq.jpg") no-repeat 0px 80px; } header#cabecalho h1 { font-family: Arial, sans-serif; font-size: 10pt; color: #606060; text-shadow: 1px 1px 1px rgba(0,0,0,.6); } header#cabecalho h1 { font-family: FonteLogo, sans-serif; font-size: 30pt; color: #606060; text-shadow: 1px 1px 1px rgba(0,0,0,.6); padding: 0px; margin-bottom: 0px; } header#cabecalho h2 { font-family: Titillium Web, sans-serif; color: #888888; font-size: 15pt; padding: 0px; margin-top: 0px; } section#corpo { display: block; width: 500px; float: left; border-right: 1px solid #606060; padding-right: 15px; } aside#lateral{ display: block; width: 350px; float: right; background-color: #dddddd; padding: 10px; margin-top: 10px; box-shadow: 2px 2px 2px rgba(0,0,0,.5) } footer#rodape { clear: both; border-top: 1px solid #606060; } footer#rodape p { text-align: center; } table#tabelaspec { border: 1px solid #606060; border-spacing: 0px; margin-left: auto; margin-right: auto; } table#tabelaspec td { border: 1px solid #606060; padding: 10px; text-align: center; vertical-align: middle; } table#tabelaspec td.ce { color: #ffffff; background-color: #606060; vertical-align: top; font-weight: bold; } table#tabelaspec td.cd { background-color: #cecece; } table#tabelaspec caption { color: #888888; font-size: 13pt; font-weight: bolder } table#tabelaspec caption span { display: block; float: right; color: black; font-size: 8pt; margin-top: 10px; } article#noticia-principal h2 { font-size: 13pt; color: #606060; background-color: #dddddd; padding: 5px 0px 5px 10px; margin: 10px 0px 10px 0px } header#cabecalho-artigo h1 { font-family: 'FonteLogo', sans-serif; font-size: 20pt; color: #606060; margin-bottom: 0px; margin-top: 0px; } header#cabecalho-artigo h2 { font-size: 13pt; color: #cecece; margin: 0px; background-color: transparent; } header#cabecalho-artigo h3 { font-size: 12px; color: #606060; } .direita { text-align: right; } a { color: #606060; text-decoration: none; } a:hover { text-decoration: underline; } aside#lateral h1 { margin-top: 0px; font-family: 'FonteLogo', sans-serif; font-size: 20pt; color: #606060; } aside#lateral h2 { background-color: #606060; font-size: 13pt; color: #ffffff; padding: 5px; } </style> <script> function mudaFoto (foto) { document.getElementById("icone").src = foto; } </script> </head> <body> <div id="interface"> <header id="cabecalho"> <hgroup> <h1>Google Glass</h1> <h2>A revolução do Google está chegando</h2> </hgroup> <img id="icone" src="http://i.imgur.com/pt2uKok.png"/> <nav id="menu"> <h1>Menu Principal</h1> <ul> <li onmouseover="mudaFoto('http://i.imgur.com/4o9MSvl.png')"><a href="index.html">Home</a></li> <li><a href="specs.html">Especificações</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="multimidia.html">Multimídia</a></li> <li><a href="fale-conosco.html">Fale conosco</a></li> </ul> </nav> </header> <section id="corpo"> <article id="noticia-principal"> <header id="cabecalho-artigo"> <hgroup> <h3>Tecnologia > Inovações</h3> <h1>Saiba tudo sobre o Google Glass</h1> <h2>por Gustavo Guanabara</h2> <h3 class="direita">Atualizado em 23/Abril/2013</h3> </hgroup> </header> <h2>O que é</h2> <p>O <span style="font-weight: bolder;">Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de <a href="http://glass.google.com" target="_blank">Project Glass</a>, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o <em>Google Glass</em> encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p> <figure class="foto-legenda"> <img src="http://i.imgur.com/riOiWnf.jpg"> <figcaption> <h3>Google Glass</h3> <p>Uma nova maneira de ver o mundo</p> </figcaption> </figure> <h2>Data de lançamento</h2> <p´>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p> <h2>Especificações Técnicas</h2> <table id="tabelaspec"> <caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption> <tr><td class="ce">Tela</td><td class="cd">Resolução equivalente a tela de 25"</td></tr> <tr><td rowspan="2" class="ce">Camera</td><td class="cd"> 5MP para fotos</td></tr> <tr><td class="cd">720p para vídeos</td></tr> <tr><td rowspan="2" class="ce">Conectividade</td><td class="cd"> Wi-Fi</td></tr> <tr><td class="cd">Bluetooth</td></tr> <tr><td class="ce">Memória Interna</td><td class="cd"> 12GB</td></tr> </table> <h2>Como funciona</h2> <p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça</p> <h2>O que você pode fazer com o Google Glasses</h2> <p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p> [AQUI ENTRA UM VÍDEO] </article> </section> <aside id="lateral"> <h1>Outras Notícias</h1> <h2>Vídeo mais recente</h2> [AQUI ENTRA UM VÍDEO] <h2>Novidades no Glass</h2> <p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p> <p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.</p> </aside> <footer id="rodape"> <p>Copyright © 2013 - by Gustavo Guanabara <br /> Facebook | Twitter</p> </footer> </div> </body> </html>

Ainda não acabei o curso, por isso não está pronto. Mas estou com problema nesta parte.

PS: Lembrando que vou mudar o conteúdo depois deste site para o conteúdo de meu fórum e o deixar como pagina inicial, ajustando algumas imagens entre outras coisas.

Desde ja agradeço.

por Sennior 04.03.15 8:20

Bom dia,

Altere pelo código abaixo:

Código:: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Populous BR</title> <link rel="stylesheet"/> <style> @charset "UTF-8"; @import url(http://fonts.googleapis.com/css?family=Titillium+Web); @font-face { font-family: "FonteLogo"; src: url("_fonts/bubblegum-sans-regular.otf"); } body { font-family: Arial, sans-serif; background-color: #dddddd; color: rgba(0,0,0,1); } div#interface{ width: 900px; background-color: white; margin: -20px auto 0px auto; box-shadow: 0px 0px 10px rgba(0,0,0,.5); padding: 10px; } p { text-align: justify; text-indent: 50px; } figure.foto-legenda { position: relative; border: 8px solid white; box-shadow: 1px 1px 4px black; width: 440px; height: 338px; } figure.foto-legenda img{ width: 440px; height: 338px; } figure.foto-legenda figcaption { opacity: 0; position: absolute; top: 0px; background-color: rgba(0,0,0,.4); color: white; width: 440px; height: 338px; padding: 10px; box-sizing: border-box; transition: opacity 1s; } figure.foto-legenda:hover figcaption { opacity: 1; } /* Formataçao de menu */ nav@menu { display: block; } nav#menu ul { list-style: none; text-transform: uppercase; position: absolute; top: 0px; margin-left: 247px; } nav#menu ul { list-style: none; text-transform: uppercase; } nav#menu li { display: inline-block; background-color: #dddddd; padding: 10px; margin: 2px; -webkit-transition: background-color 1s; -moz-transition: background-color 1s; -ms-transition: background-color 1s; -o-transition: background-color 1s; transition: background-color 1s; } nav#menu li:hover { background-color: #606060; } nav#menu h1 { display: none; } nav#menu a{ color: black; text-decoration: none; } nav#menu a:hover{ color: #ffffff; text-decoration: underline; } header#cabecalho img#icone { position: relative; left: 750px; top: -65px; max-width: 7pc; } header#cabecalho { border-bottom:1px #606060 solid; height:150px; background: url("_imagens/glass-logo-peq.jpg") no-repeat 0px 80px; } header#cabecalho h1 { font-family: Arial, sans-serif; font-size: 10pt; color: #606060; text-shadow: 1px 1px 1px rgba(0,0,0,.6); } header#cabecalho h1 { font-family: FonteLogo, sans-serif; font-size: 30pt; color: #606060; text-shadow: 1px 1px 1px rgba(0,0,0,.6); padding: 0px; margin-bottom: 0px; } header#cabecalho h2 { font-family: Titillium Web, sans-serif; color: #888888; font-size: 15pt; padding: 0px; margin-top: 0px; } section#corpo { display: block; width: 500px; float: left; border-right: 1px solid #606060; padding-right: 15px; } aside#lateral{ display: block; width: 350px; float: right; background-color: #dddddd; padding: 10px; margin-top: 10px; box-shadow: 2px 2px 2px rgba(0,0,0,.5) } footer#rodape { clear: both; border-top: 1px solid #606060; } footer#rodape p { text-align: center; } table#tabelaspec { border: 1px solid #606060; border-spacing: 0px; margin-left: auto; margin-right: auto; } table#tabelaspec td { border: 1px solid #606060; padding: 10px; text-align: center; vertical-align: middle; } table#tabelaspec td.ce { color: #ffffff; background-color: #606060; vertical-align: top; font-weight: bold; } table#tabelaspec td.cd { background-color: #cecece; } table#tabelaspec caption { color: #888888; font-size: 13pt; font-weight: bolder } table#tabelaspec caption span { display: block; float: right; color: black; font-size: 8pt; margin-top: 10px; } article#noticia-principal h2 { font-size: 13pt; color: #606060; background-color: #dddddd; padding: 5px 0px 5px 10px; margin: 10px 0px 10px 0px } nav#menu li { margin-top: 0px; position: relative; top: auto; } header#cabecalho-artigo h1 { font-family: 'FonteLogo', sans-serif; font-size: 20pt; color: #606060; margin-bottom: 0px; margin-top: 0px; } header#cabecalho-artigo h2 { font-size: 13pt; color: #cecece; margin: 0px; background-color: transparent; } header#cabecalho-artigo h3 { font-size: 12px; color: #606060; } .direita { text-align: right; } a { color: #606060; text-decoration: none; } a:hover { text-decoration: underline; } aside#lateral h1 { margin-top: 0px; font-family: 'FonteLogo', sans-serif; font-size: 20pt; color: #606060; } aside#lateral h2 { background-color: #606060; font-size: 13pt; color: #ffffff; padding: 5px; } </style> <script> function mudaFoto (foto) { document.getElementById("icone").src = foto; } </script> </head> <body> <div id="interface"> <header id="cabecalho"> <hgroup> <h1>Google Glass</h1> <h2>A revolução do Google está chegando</h2> </hgroup> <img id="icone" src="http://i.imgur.com/pt2uKok.png"/> <nav id="menu"> <h1>Menu Principal</h1> <ul> <li onmouseover="mudaFoto('http://i.imgur.com/4o9MSvl.png')"><a href="index.html">Home</a></li> <li><a href="specs.html">Especificações</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="multimidia.html">Multimídia</a></li> <li><a href="fale-conosco.html">Fale conosco</a></li> </ul> </nav> </header> <section id="corpo"> <article id="noticia-principal"> <header id="cabecalho-artigo"> <hgroup> <h3>Tecnologia > Inovações</h3> <h1>Saiba tudo sobre o Google Glass</h1> <h2>por Gustavo Guanabara</h2> <h3 class="direita">Atualizado em 23/Abril/2013</h3> </hgroup> </header> <h2>O que é</h2> <p>O <span style="font-weight: bolder;">Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de <a href="http://glass.google.com" target="_blank">Project Glass</a>, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o <em>Google Glass</em> encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p> <figure class="foto-legenda"> <img src="http://i.imgur.com/riOiWnf.jpg"> <figcaption> <h3>Google Glass</h3> <p>Uma nova maneira de ver o mundo</p> </figcaption> </figure> <h2>Data de lançamento</h2> <p´>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p> <h2>Especificações Técnicas</h2> <table id="tabelaspec"> <caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption> <tr><td class="ce">Tela</td><td class="cd">Resolução equivalente a tela de 25"</td></tr> <tr><td rowspan="2" class="ce">Camera</td><td class="cd"> 5MP para fotos</td></tr> <tr><td class="cd">720p para vídeos</td></tr> <tr><td rowspan="2" class="ce">Conectividade</td><td class="cd"> Wi-Fi</td></tr> <tr><td class="cd">Bluetooth</td></tr> <tr><td class="ce">Memória Interna</td><td class="cd"> 12GB</td></tr> </table> <h2>Como funciona</h2> <p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça</p> <h2>O que você pode fazer com o Google Glasses</h2> <p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p> [AQUI ENTRA UM VÍDEO] </article> </section> <aside id="lateral"> <h1>Outras Notícias</h1> <h2>Vídeo mais recente</h2> [AQUI ENTRA UM VÍDEO] <h2>Novidades no Glass</h2> <p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p> <p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.</p> </aside> <footer id="rodape"> <p>Copyright © 2013 - by Gustavo Guanabara <br /> Facebook | Twitter</p> </footer> </div> </body> </html>