InícioProblema com JavaScript ou CSS?
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1 • Compartilhe
Problema com JavaScript ou CSS?
por Shaman 04.03.15 8:02
Detalhes da dúvida
Versão do fórum : PunBBNí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.
Última edição por LucaS Carvalho em 04.03.15 21:48, editado 1 vez(es)
Shaman- Super Membro
- Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448 -
Re: Problema com JavaScript ou CSS?
por Sennior 04.03.15 8:20
Bom dia,
Altere pelo código abaixo:
Abraços.
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>
Abraços.
Sennior- Principal Contribuidor
- Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903 -
Re: Problema com JavaScript ou CSS?
por Shaman 04.03.15 17:09
Funcionou mas o que que você fez, você só Colocou isto?
- Código:
max-width: 7pc;
Shaman- Super Membro
- Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448 -
Re: Problema com JavaScript ou CSS?
por Konai 04.03.15 19:30
Saudações amigo!
Na verdade ele mudou este código CSS:
Podemos finalizar este tópico?
Até!
Na verdade ele mudou este código CSS:
- Código:
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: relative;
top: -253px;
left: 264px;}
- Código:
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: absolute;
top: 0px;
margin-left: 247px;
}
Podemos finalizar este tópico?
Até!
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
Re: Problema com JavaScript ou CSS?
por Shaman 04.03.15 21:47
Estranho que eu tinha feito a mesma coisa e não tinha resultado 
Mesmo assim obrigado!
Mesmo assim obrigado!
Shaman- Super Membro
- Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448 -
Re: Problema com JavaScript ou CSS?
por Konai 04.03.15 22:58
| Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Konai- Membro Entusiasta
- Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550 -
Tópicos semelhantes» Problema com javascript
» Problema da centralização da Imagem Principal (Logo) - mesmo problema em outro fórum
» Fórum com problema por causa de javascript
» Problema por causa de códigos javascript
» Problema com Ranks adicionais e Javascript
» Problema da centralização da Imagem Principal (Logo) - mesmo problema em outro fórum
» Fórum com problema por causa de javascript
» Problema por causa de códigos javascript
» Problema com Ranks adicionais e Javascript
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
