Itens faltantes nas páginas html

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Itens faltantes nas páginas html

Mensagem por ZombieW em 29/03/14, 03:42 pm

Qual é minha questão:
Me deparo com 2 problemas em minhas páginas HTML, vou definir as 2 abaixo, caso não possa ser "pedido" 2 correções em um único tópico, peço que me avisem que abro outra dúvida.


  1. Em uma página HTML criada no meu fórum, não me aparece minha barra superior personalizada. Como inseri-la na página HTML?
  2. Em uma página HTML criada em um site exterior (hostinger), não me aparece nem a minha barra superior personalizada e nem minha "página em gaveta". Como inserir ambos nessa página externa?


Imagem da Barra Supeior:


Imagem da "Página em Gaveta":




Fino no aguardo e obrigado.

Endereço do meu fórum:
http://www.tutorialdoca.com

Versão do fórum:
PHPBB3


Última edição por ZombieW em 05/04/14, 03:12 pm, editado 1 vez(es)
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Itens faltantes nas páginas html

Mensagem por Shek em 29/03/14, 07:31 pm

Boa noite!

Antes de fazer as modificações, queira salvar o código da sua página externa em um bloco de notas para não perder os dados. Muito feliz

Na sua página HTML externa, você pode procurar por:
Código:
<body>
Em seguida, basta abaixo do body adicionar o seguinte código:
Código:
<div style="top:-20px; left:0px;position:absolute;width:100%"><div id="pt_bar"><a id="pt_logo" href="//www.perfectteam.org/" original-title="">Perfect Team</a><div id="cssmenu">
<ul>
  <li class="has-sub"><a href="#" original-title=""><span>Sites</span></a>
      <ul>
        <li class="hover"><a href="//www.tutorialdoca.com" original-title=""><span>Tutorial do CA</span></a></li>
        <li class="hover"><a href="//www.tutorialdopw.com" original-title=""><span>Tutorial do PW</span></a></li>
        <li class="hover"><a href="//www.pwbrchannel.com" original-title=""><span>PWBRChannel</span></a></li>
      </ul>
  </li>
  <li class="has-sub"><a href="#" original-title=""><span>Em breve</span></a>
      <ul>
        <li class="hover"><a href="//www.tutorialdolol.com" original-title=""><span>Tutorial do LoL</span></a></li>
        <li class="hover"><a href="//www.tutorialdowf.com" original-title=""><span>Tutorial do WF</span></a></li>
      </ul>
  </li>
  <li class="has-sub"><a href="#" original-title=""><span>Parceiros</span></a>
      <ul>
        <li class="hover"><a href="http://levelupgames.uol.com.br/levelup/" target="_blank" original-title=""><span>Level UP! Games</span></a></li>
        <li class="hover"><a href="http://www.radiogamesbrasil.com.br/" target="_blank" original-title=""><span>Rádio Games Brasil</span></a></li>
      </ul>
  </li>
    <li class="has-sub"><a href="#" original-title=""><span>Staff</span></a>
    <ul>
        <li class="hover"><a href="#" original-title=""><span>-KageBoy-</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>BanguelaGamer</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>Guilhermeo9</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>Impostor</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>Master_Ace</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>MrBadS2</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>MrFoxnine</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>SS105</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>TERMINATOR98</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>Zambatou</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>ZombieW</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>ZyyGamer</span></a></li>
    </ul>
    </li>
  <li class="has-sub"><a href="#" original-title=""><span>TeamSpeak 3</span></a>
  <ul>
        <li class="hover"><a href="#" original-title=""><span>perfectteam.ts3dns.com</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>ou</span></a></li>
        <li class="hover"><a href="#" original-title=""><span>162.248.213.54:9988</span></a></li>
    </ul>
    </li>
  <li class="has-sub"><a href="#" original-title=""><span>Webmail</span></a>
  <ul>
        <li class="hover"><a href="//webmail.perfectteam.org" original-title=""><span>Perfect Team Org</span></a></li>
        <li class="hover"><a href="//webmail.tutorialdopw.com" original-title=""><span>Tutorial do PW</span></a></li>
        <li class="hover"><a href="//webmail.tutorialdoca.com" original-title=""><span>Tutorial do CA</span></a></li>
    </ul>
    </li>
</ul>
   <a class="classificacao" href="http://portal.mj.gov.br/ClassificacaoIndicativa/jsps/DadosJogoForm.do?select_action=&amp;tbjogo_codigo=2780" target="_blank" original-title=""><p class="classific">
               NÃO RECOMENDADO PARA<br>MENORES DE 16 ANOS <br>
               Contém: Assassinato
   </p></a><a href="//levelup.com.br" rel="Level Up!" target="_blank" original-title=""></a>
</div></div>
</div>
Em seguida, procure por "</head>" e antes dele, aplique:
Código:
<style>
/*=========================================
Barra Perfect Team Org (CA)
by DropLeet
=========================================*/
/* Descer o banner */
#logo-desc {
margin-top:43px;
}
/* Estrutura da Barra Perfect Team */
#pt_bar {
/*min-width: 100%;*/
}
#pt_bar {
height: 43px;
padding-bottom: 6px;
background: url(http://s3.amazonaws.com/nxcache/all/img/gnt_gradients.png) 0 -128px repeat-x;
position: relative;
/*z-index: 10000;*/
font-family: 'Lucida Grande','Lucida Sans Unicode',Tahoma,sans-serif;
font-size: 13px;
line-height: 19px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}
#pt_bar a {
color: #4B77D8;
outline: none;
}
#pt_bar a::selection {
background: #2662B2;
color: white;
text-shadow: none;
}
/* Logotipo Perfect Team */
#pt_logo {
text-indent: -9999px;
height: 43px;
width: 56px;
float: left;
margin-left: 20px;
background: url(http://imageshack.us/a/img221/2316/perfectteamlogo.png) no-repeat;
}
/* Menu */
#cssmenu{
height:48px;
display:block;
padding:0;
margin:20px auto; 
border:1px solid;
border-radius:5px;
}
#cssmenu > ul {
list-style:inside none;
padding:0;
margin:0;
}
#cssmenu > ul > li {
list-style:inside none;
padding:0;
margin:0;
float:left;
display:block;
position:relative;
}
#cssmenu > ul > li > a{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
}
#cssmenu > ul > li:first-child > a{
border-radius:5px 0 0 5px;
}
#cssmenu > ul > li > a:after{
content:'';
position:absolute;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
}
#cssmenu ul li.has-sub:hover > a:after{
top:0;
bottom:0;
}
#cssmenu > ul > li.has-sub > a:before{
content:'';
position:absolute;
top:18px;
right:6px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#cssmenu > ul > li.has-sub:hover > a:before{
top:19px;
}
#cssmenu ul li.has-sub:hover > a{
background:#3f3f3f;
border-color:#3f3f3f;
padding-bottom:13px;
padding-top:13px;
top:-1px;
z-index:999;
}
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{
display:block;
}
#cssmenu ul li.has-sub > a:hover{
background:#3f3f3f;
border-color:#3f3f3f;
}
#cssmenu ul li > ul, #cssmenu ul li > div{
display:none;
width:auto;
position:absolute;
top:38px;
padding:10px 0;
background:#3f3f3f;
border-radius:0 0 5px 5px;
z-index:999;
}
#cssmenu ul li > ul{
width:200px;
}
#cssmenu ul li > ul li{
display:block;
list-style:inside none;
padding:0;
margin:0;
position:relative;
}
#cssmenu ul li > ul li a{
outline:none;
display:block;
position:relative;
margin:0;
padding:8px 20px;
font:10pt Arial, Helvetica, sans-serif;
color:#fff; /* Cor dos itens do li */
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
li.hover a:hover{ /* Cor de seleção da class hover em li */
background: rgb(167,199,220); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3YzdkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NWIyZDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(167,199,220,1) 0%, rgba(133,178,211,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,199,220,1)), color-stop(100%,rgba(133,178,211,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#85b2d3',GradientType=0 ); /* IE6-8 */
}
#cssmenu{
border-color:transparent;
}
#cssmenu > ul > li > a{
border-right:1px solid #BEC0C2;
color:#2C53AD; /* Cor dos itens do ul */
display: block;
line-height: 23px;
padding-right: 15px;
font-size: 16px;
font-weight: 600;
font-family: Klavika,sans-serif;
}
#cssmenu > ul > li:hover {
background: #2662B2;
color: white;
text-shadow: none;
}
#cssmenu > ul > li > a:after{
background: #2662B2;
color: white;
text-shadow: none;
}
#cssmenu > ul > li > a:hover{
background: #2662B2;
color: white;
text-shadow: none;
}
/* Classificação */
a.classificacao {
text-decoration:none;
}
.classificacao {
background: url(http://levelupgames.uol.com.br/commonImages/selo16anos.gif) no-repeat transparent;
float: right;
margin-right: 0px;
margin-left: 13px;
margin-top: 3px;
display:block;
}
p.classific {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 12px;
padding: 0 5px 0 45px;
text-align: center;
max-height: 30px;
margin-top: 3px;
margin-right: 10px;
color:black;
}
/*=========================================
Redes Sociais Flutuantes
by DropLeet
=========================================*/
.headline-right{
   float:right;
   width:300px
}
.headline a:hover{
   color:#eace12;
   text-decoration:underline
}
ul.isocial{
   list-style:none;
   margin:0;
   padding:0px 20px 0 0
}
ul.isocial li{
   float:right;
   margin:5px 2px;
   padding:0
}
ul.isocial li a{
   float:right;
   background-image:url(http://img854.imageshack.us/img854/7936/socialletter.png);
   background-position:0 0;
   background:repeat:no-repeat;
   display:inline-block;
   text-indent:-9999px;
   overflow:hidden;
   width:24px;
   height:24px;
   position:relative;
}
ul.isocial li a.rss{
   background-position:0 0
}
ul.isocial li a.rss:hover{
   background-position:0 -25px
}
ul.isocial li a.facebook{
   background-position:-25px 0
}
ul.isocial li a.facebook:hover{
   background-position:-25px -25px
}
ul.isocial li a.twitter{
   background-position:-50px 0
}
ul.isocial li a.twitter:hover{
   background-position:-50px -25px
}
ul.isocial li a.google{
   background-position:-75px 0
}
ul.isocial li a.google:hover{
   background-position:-75px -25px
}
ul.isocial li a.youtube{
   background-position:-100px 0
}
ul.isocial li a.youtube:hover{
   background-position:-100px -25px
}
</style>
No seu caso se não me recordo, você vai adicionar essa tag <style>...</style> antes do primeiro </head>. Piscada

Salve.

Já no caso do segundo código, você pode tentar colocar ele dentro da <div id="main-content">.
Código:
<div style="overflow:visible;position:fixed;bottom:30px;height:350px;right:0px;z-index:1000"><iframe src="http://tutorialdoca.com/h11-" id="chatboxpop" scrolling="yes" style="height: 350px; float: right; overflow: visible; width: 700px; display: block;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="chatoc()" style="margin-top:10px;cursor :pointer;float:left"><img src="http://i57.servimg.com/u/f57/17/53/75/18/radio110.png" id="chatboxopen" style="display: none;"><img src="http://i57.servimg.com/u/f57/17/53/75/18/radio210.png" id="chatboxclose" style="cursor: pointer; display: inline;"></div></div>
Salve e veja se funciona.

Atenciosamente,
Shek


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17160
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Itens faltantes nas páginas html

Mensagem por ZombieW em 30/03/14, 01:12 pm

Vamos lá Shek:

O código da barra superior funcionou.
Já o da rádio (site em gaveta) está falho, veja:



A função do JavaScript que "abre" e "fecha" o site, não funciona. Ele fica fixo aberto.
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Itens faltantes nas páginas html

Mensagem por Shek em 01/04/14, 07:34 pm

Me passe a URL da página, por favor Zombie.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17160
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Itens faltantes nas páginas html

Mensagem por ZombieW em 01/04/14, 07:45 pm

avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Itens faltantes nas páginas html

Mensagem por Shek em 01/04/14, 08:03 pm

Zombie, você já tentou usar o iframe onclick?
http://ajuda.forumeiros.com/t56719-tutorial-iframe-onclick

Para este caso, seja a melhor opção é usá-lo. Muito feliz


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17160
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Itens faltantes nas páginas html

Mensagem por ZombieW em 01/04/14, 08:59 pm

Li, e não entendi como isso poderá "resolver minha vida".

Poderia me dar uma "luz"?
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Resolvido Re: Itens faltantes nas páginas html

Mensagem por ZombieW em 03/04/14, 04:03 am

Shek,

Consegui fazer funcionar...quando você ler isto, vai ficar feliz e meio  Bravo  porque isso corrigiu inclusive a FooterBar que montamos juntos:

Eu abri o código-fonte da página funcional interna www.tutorialdoca.com/h10-comparativo1 e comecei a estudar o código, dentro do código fonte há uma menção ao JavaScript

Código:
<script src="/99286.js" type="text/javascript"></script>

Quando eu entrei nele, eu achei o código da rádio... Aí fui olhar o código criado na página externa e estava igual, logo, deveria funcionar e não funcionava.

Eu simplesmente troquei de
Código:
<script src="/99286.js" type="text/javascript"></script>
para
Código:
<script src="http://www.tutorialdoca.com/99286.js" type="text/javascript"></script>
e pronto, tudo funcionando bem.

Algo simples e que nos trouxe muita dor de cabeça!  Louco 

Quando eu fiz isso, a "gaveta" da rádio apareceu e funcionou, porém, a FooterBar estava duplicada, logo, removi o código que tínhamos criado.

Pelo agora, antes de fechar o tópico, que verifique se não me falta nada ou que nada está "incorreto" nessa página, para que eu possa lhe dar paz finalmente (por enquanto).

http://tutorialdoca.meximas.com/Rifles%20de%20Assalto.html

 Muito feliz
avatar

ZombieW
Membro do Fórum

Masculino
Inscrito dia : 02/08/2010
Mensagens : 1273
Pontos Ativos : 1798

Ver perfil do usuário http://www.perfectteam.org

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum