Navegação bugou

[Firenando]

Qual é minha questão:
Olá, eu implantei um menu de navegação novo no meu fórum, e ocorreu alguns erros.

O menu fica em cima do anuncio do google no portal, e no /forum ele fica em cima dos widgets...

Bom, aqui está umas fotos para ajudar no erro.

https://i.imgur.com/E9eBg.png

https://i.imgur.com/4neOD.png

Obrigado desde já.

Links e imagens do meu problema:
https://i.imgur.com/E9eBg.png

https://i.imgur.com/4neOD.png

Endereço do meu fórum:
http://br-designerforever.forumeiros.com/

Versão do meu fórum:
PHPBB3

[Nickname]

Olá amigo,
Não estou entendendo as prints screens, pois as mesmas são iguais. Você viu se no código do novo menu está com algum erro?

Cordialmente
Dr. Kinki

[Firenando]

Olá amigo,
Não estou entendendo as prints screens, pois as mesmas são iguais. Você viu se no código do novo menu está com algum erro?

Cordialmente
Dr. Kinki

Olá, se você acessar meu fórum: http://br-designerforever.forumeiros.com/forum

Você verá que o menu de navegação está bugado, porque ele está em cima dos Widgets, e em cima dos anuncios do Google.

Aqui está o código.

Código:

#page-header .navbar span.corners-bottom {
display: none;
}
#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header .headerbar span.corners-top {
display: none;
}
#page-header #search-box {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}
.postbody {
color: #333333;
}
#page-header .navbar {
position: absolute;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 50px;
width: 89.5%;
right: 4.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: right;
color: #969696;
text-align: center;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Obrigado.

[Nickname]

Olá amigo,
Em meu fórum de testes está funcionando correctamente, o erro pode está ocorrendo por conta de algum jQuery ou Javascript que está com algum erro, por favor, verifique seus códigos jQuery e Javascript, se estão funcionando corretamente, e exclua os códigos jQuery e Javascript que não são utilizados no seu fórum.

Cordialmente
Dr. Kinki

[Firenando]

Não é nada de JS, porque no meu fórum de testes também da o erro, e não contem nenhum JS...

É no CSS, sei disso.

[Nickname]

Olá,
Veja se resulta:

Código:


#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}
.postbody {
color: #333333;
}
#page-header .navbar {
position: absolute;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 50px;
width: 89.5%;
right: 4.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: right;
color: #969696;
text-align: center;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Cordialmente
Dr. Kinki

[Ace]

Olá,

Tente modificar o código por este:

Código:

#page-header .navbar span.corners-bottom {
display: none;
}
#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header .headerbar span.corners-top {
display: none;
}
#page-header #search-box {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}
.postbody {
color: #333333;
}
#page-header .navbar {
position: absolute;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 30px;
width: 89.5%;
right: 4.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: right;
color: #969696;
text-align: center;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Resulta?

Cordialmente.

[Firenando]

Olá, não deu nenhum dos dois.

Dr. Kinki: O seu ficou igual.

Ace: Cortou o background, mais não adiantou, ficou em cima ainda.

[Ace]

Olá,

Pode me mandar uma imagem de como ficou o código que lhe passei?

Cordialmente.

[Firenando]

Aqui está.

https://i.imgur.com/gRpxs.png

Outra coisa, eu fiz um teste assim.

Troquei o position: absolute; por position: relative; - Ele ficou certinho, só teria que fazer várias configurações, que eu desisti...

Obrigado.

[Ace]

Olá,

Tente este código:

Código:

#page-header .navbar span.corners-bottom {
display: none;
}
#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header .headerbar span.corners-top {
display: none;
}
#page-header #search-box {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}
.postbody {
color: #333333;
}
#page-header .navbar {
position: bottom;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 50px;
width: 89.5%;
right: 4.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: right;
color: #969696;
text-align: center;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Cordialmente.

[Firenando]

Perfeito, obrigado Ace, mais poderia me falar o que você modificou?

Foi o absolute?

E vou configurar ele, e já aviso se consegui.

Obrigado.

[Ace]

Olá,

Sim, eu modifiquei a posição do page header para bottom

Podemos encerrar este ticket de suporte?

Cordialmente.

[Firenando]

Lamento, mas não.

Estou tentando o configurar com porcentagem ( % ) e ele parece que não surge efeito.

Já modifiquei com.

margin-left:
margin-right:
right:
left:

E nada funciona, ele sempre fica no mesmo lugar...

[Ace]

Olá,

Mas no que diz respeito?

Cordialmente.

[Firenando]

Quero mover o menu para a esquerda, para ele ficar " grudada " a borda do #wrap. Para ficar um efeito legal...

[Ace]

Olá,

Tente:

Código:

#page-header .navbar span.corners-bottom {
display: none;
}
#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header .headerbar span.corners-top {
display: none;
}
#page-header #search-box {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}.navbar img {vertical-align: middle; margin-top: -2px; margin-right: 1px;}
.postbody {
color: #333333;
}
#page-header .navbar {
position: bottom;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 50px;
width: 89.5%;
right: 4.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: right;
color: #969696;
text-align: left;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Cordialmente.

[Firenando]

Não movia do mesmo jeito.

Bom, agora mudei o bottom para relative, e resultou.

Apenas tem um erro, o texto não alinha de maneira alguma.

Aqui está o código.

Código:

#page-header .navbar span.corners-bottom {
display: none;
}
#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header .headerbar span.corners-top {
display: none;
}
#page-header #search-box {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}
.postbody {
color: #333333;
}
#page-header .navbar {
position: relative;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 50px;
width: 99.4%;
left: -0.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: right;
color: #969696;
text-align: left;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Obrigado.

[Ace]

Olá,

Como assim o texto não se alinha?

Cordialmente.

[Firenando]

Errei, ele não centraliza, ele ta mais para esquerda do que para direita...

Obrigado.

[Ace]

Olá,

Tente:

Código:

#page-header .navbar span.corners-bottom {
display: none;
}
#page-header .navbar span.corners-top {
display: none;
}
#page-header .headerbar span.corners-bottom {
display: none;
}
#page-header .headerbar span.corners-top {
display: none;
}
#page-header #search-box {
display: none;
}
#page-header #search-box {
display: none;
}
.navbar .corners-top ,.navbar .corners-bottom {display:none;}
.headerbar .corners-bottom ,.headerbar .corners-bottom {display:none;}
.headerbar .corners-top ,.headerbar .corners-top {display:none;}
.navbar a:hover {
text-decoration: none;
color: #0a8ee6;
}
.postbody {
color: #333333;
}
#page-header .navbar {
position: relative;
background-image: url(http://i.imgur.com/jNsE7.png);
background-repeat: repeat-x;
height: 50px;
width: 99.4%;
left: -0.5%;
-moz-box-shadow: -20px 5px 20px #000;
text-align: center;
}
#page-header .navbar .navlinks {
padding: 25px;
font-size: 0px;
border-bottom: 0px;
position: left;
color: #969696;
text-align: center;
}
#page-header .navbar .navlinks a {
font-size: 11px;
color: #ffffff;
padding: 18px 15px;
text-align: center;
}
#page-header .navbar .navlinks a:hover {
background-image: url(http://i.imgur.com/xzKFK.png);
background-repeat: repeat-x;
-moz-box-shadow: 0px 0px 5px #000;
text-shadow: -1px -1px 1px #000;
color: #969696;
text-align: center;
}
.navbar ul {
border : none;
}

Até Mais!

[Firenando]

Olá, pelo Mozilla Fire Fox, deu certinho, e pelo Chrome também, mais quando eu passo o mouse em cima do menu de navegação, no lugar que eu faço, fica como se tive-se com o mouse em cima.

Poderia me ajudar com esse erro? Obrigado.

[Ace]

Olá,

Pode explicar melhor sua última colocação?

Cordialmente.

[Firenando]

Sim, olha.

Pelo Google Chrome, quando eu passo o mouse em cima do menu de navegação, ao passar por ex, no início, eu passei e retirei o mouse de cima, mais fica como se eu tive-se com o mouse em cima ainda.

Mais pelo Mozilla Fire Fox, o efeito é normal, não da esse erro.

Bom, para entender melhor tirei uma foto.

https://i.imgur.com/91cGr.png

Na foto, eu passei o mouse em cima de todos as opçoes de navegação, menos do Início, e ainda selecionei a parte do titulo do tópico que eu estava que seria " [Download] Style Variados " para mostrar onde tava meu cursor.

OBS: Mais esse erro só ocorre no Google Chrome.

Obrigado.

[Ace]

Olá,

Amigo, aqui se passa bem. Lime o cachê de seu browser e os cookies do fórum para ver se o problema solve. (Sim testei usando o Chrome)

Cordialmente.

[Firenando]

Bom, já limpei antes de postar, limpei denovo, e nada, e ainda pedi para um membro da minha Staff fazer o teste, e ele disse que só da o erro pelo Google Chrome...

Bom, então vamos trocar o position:relative por position:botton novamente?

Porque com o botton não tinha dado o erro...

Obrigado.

[Ace]

Olá,

Certo, mas aqui nada de errado acontece.

Por favor, nos avise se podemos encerrar este ticket de suporte!

Cordialmente,
Suporte Forumeiros

[Firenando]

Pode fechar, obrigado.

Eu coloquei top: -5px; e consegui uma distancia boa do anuncio do Google, era ele que estava bugando.

Obrigado Ace.