Problemas com Layout da página HTML.

Item: Problemas com Layout da página HTML.
Rating: 1

por Lucas_DarkS 07.09.16 3:17

Detalhes da questão

Endereço do fórum: http://www.brasilplaylife.com.br
Versão do fórum: PunBB

Descrição

Olá senhores,
Estou tentando instalar uma página HTML no meu fórum para futuramente utiliza-la como página inicial, porém encontrei um pequeno grande problema no layout do fórum apos importa-lo.

A imagem abaixo ilustra como deveria ficar o layout, com os ícones móveis visiveis:
Problemas com Layout da página HTML. 293kjsh

Problemas com Layout da página HTML. 293kjsh

Já essa imagem abaixo ilustra como está ficando no fórum:
Problemas com Layout da página HTML. 2w1z87o

O código da página é o seguinte:

Código:: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>Brasil Play Life</title> <link rel="stylesheet" type="text/css" href="http://brasilplaylife.site88.net/css/style.css"> <link href="http://brasilplaylife.site88.net/css/font-awesome.min.css" rel="stylesheet"> <link href="http://brasilplaylife.site88.net/css/animate.css" rel="stylesheet"> </head> <body onkeypress="return catchControlKeys(event)"> <div class="navigation"> <a href="/" class="logo"><b class="box">BPL</b>Brasil Play Life.<span style="font-size: 14px;border-top: 2px solid #ee3b24;">com.br</span></a> <ul class="menu"> <li class="menu__item"> <a href=/" class="menu__item-link">Início</a> </li> <li class="menu__item"> <a href="www.brasilplaylife.com.br" class="menu__item-link">Fórum</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">O Servidor</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Adquirir Vip/Sócio</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Nossa Staff</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Como Jogar SA-MP</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Downloads</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Tutoriais</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Contato</a> </li> </div> <div class="gta"><div class="pattern"> <p class="animated mov3"><br><span style="color:#e92d33;">BEM VINDO</span><br>AO BRASIL PLAY LIFE RPG!<br><span style="font-size:20px; font-variant: small-caps;">SA:MP Project</span></p> <a href="samp://ip.brasilplaylife.com.br:9696" class="button button-1 button-1f">Entre Já</a> </div> </div> <div class="content"> <h1>O SERVIDOR:</h1> <p> Saiba mais sobre o Brasil Play Life - IP: ip.brasilplaylife.com.br:9696</p> <img src="http://brasilplaylife.site88.net/img/separator.png"alt=""> <table class="skills animated mov1"> <tr class="skills-row"> <td class="skill"> <h4><i class="fa fa-lightbulb-o fa-3x"></i><p>GAMEMODE</p></h4> <p>Nossa gamemode conta com mais de 30 organizações, sistemas totalmente únicos e faceis de utilizar. Tudo pensando especialmente para você se sentir a vontade e se divertir a beça. </p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-group fa-2x"></i><p>ONLINE</p></h4> <p>Nosso servidor é mantido online 24 Horas com a maior estabilidade possível, tudo para que sua diversão esteja garantida a todo momento.</p> <script type='text/javascript' src='http://samp-stats.ru/web/api-233.js'></script> <b>Players:</b> <script type='text/javascript'>document.write(api.players +'/'+ api.maxplayers);</script><br></br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">Entrar no Jogo</a></p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-cog fa-3x"></i><p>ATUALIZAÇÕES</p></h4> <p>Nosso servidor está em contanste atualização, nossos programadores estão sempre buscando novas funções e corrigindo bugs no servidor.<br><br><br><br></p> </td> </tr> </table> <br> <h1>PORQUE JOGAR BRASIL PLAY LIFE ?</h1> <p>Abaixo algumas das muitas vantagens do nosso servidor</p> <img src="http://brasilplaylife.site88.net/img/separator.png"alt=""> <table class="skills animated mov2"> <tr class="skills-row"> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-gamepad fa-3x"></i><p>JOGABILIDADE</p></h4> <p>Nosso servidor RPG conta com diversas organizações policiais, criminosas, governamentais. Além de diversos empregos secundários e muitos eventos.</p><br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">ip.brasil play life.com.br:9696</a></p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-globe fa-3x"></i><p></p></h4> <p>Divulgue nosso IP para os seus amigos e complete ainda mais a sua diversão, porque melhor do que jogar BPL é jogar BPL com seus amigos.Abaixo está o nosso IP:</p><br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">ip.brasil play life.com.br:9696</a></p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-cogs fa-3x"></i><p>MANUTENÇÃO</p></h4> <p>Nós nos preocupamos muito com a manutenção do servidor, desde bons profissionais na administração até a boa conexão dos players ao servidor, sempre mantendo atualizado e online</p><br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">ip.brasil play life.com.br:9696</a></p> </td> </tr> </table> </div> <div class="footer"> <table class="foot-foot-skills"> <td class="foot-skill animate-me zoomIn"> <a href="/" class="footer-logo"></a> <p class="info">Brasil Play Life é um servidor de SA-MP (San Andreas Multiplayer) que utiliza o modo de jogo RPG, ou seja, simulação de vida real. Para jogar basta baixar o GTA San Andreas + San Andreas Multiplayer(SA-MP), adicionar nosso ip na lista dos favoritos e logar<br></br>Nosso IP: ip.brasilplaylife.com.br:9696</p> </td> <td class="foot-skill animate-me zoomIn"> <h4>Links <p><img src="http://brasilplaylife.site88.net/img/foot-sep.png"alt=""></p></h4> <div class="foot-nav"> <li><a href="#2" target="_blank">> Tutoriais</a></li> <li><a href="#3">> Fórum do Servidor</a></li> <li><a href="#4">> Comprar VIP/SÓCIO</a></li> <li><a href="#5">> Como Jogar Brasil Play Life?</a></li> </div> </td> <td class="foot-skill animate-me zoomIn"> <h4>Contato <p><img src="http://brasilplaylife.site88.net/img/foot-sep.png"alt=""></p></h4> <div class="asd"> <p>Para nos contactar mande um e-mail para<br>brasilplaylife<span style="color:#f2333a">@</span>outlook.com</p> <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script><div class="pluso" data-background="transparent" data-options="small,square,line,horizontal,nocounter,theme=02" data-services="vkontakte,facebook,twitter,moimir"></div> </div> </td> </table> <div class="copyright"> 2016 Brasil Play Life - SA-MP - RPG. Site By:<a href="#">RDMP.RU</a> Todos os direitos reservados! <span style="float:right;">Tecnologia By: <a href="/" target="_blank" style="border-bottom: 1px dotted #f2333a;">APOX</a></span> </div> </div> <script> $(window).scroll(function() { $('.mov1').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+300) { $(this).addClass('zoomIn'); } }); }); $(window).scroll(function() { $('.mov2').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+300) { $(this).addClass('flipInX'); } }); }); $(window).scroll(function() { $('.mov3').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+0) { $(this).addClass('fadeInLeftBig'); } }); }); </script> </body> </html>

Lembrando que existem css externas que eu hospedei em um host externo. O site hospedado no servidor externo apresenta o layout de forma correta. O problema só surge quando passo o layout para o fórum.

Site na hospedagem externa: http://brasilplaylife.site88.net
Site no forumeiros: http://www.brasilplaylife.com.br/h1-projetoinicial

Aguardando suporte.
Grato, desde já!

por while 07.09.16 3:43

Olá autor, você tem instalado o font-awesome no seu fórum?
Caso não, peço que instale vendo esse tópico: https://ajuda.forumeiros.com/t103208-

Caso, mesmo assim não der, troque o código do seu formulário por este:

Código:: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>Brasil Play Life</title> <link rel="stylesheet" type="text/css" href="http://brasilplaylife.com.br/css/style.css"> <link href="http://brasilplaylife.com.br/css/font-awesome.min.css" rel="stylesheet"> <link href="http://brasilplaylife.com.br/css/animate.css" rel="stylesheet"> </head> <body onkeypress="return catchControlKeys(event)"> <div class="navigation"> <a href="/" class="logo"><b class="box">BPL</b>Brasil Play Life.<span style="font-size: 14px;border-top: 2px solid #ee3b24;">com.br</span></a> <ul class="menu"> <li class="menu__item"> <a href=/" class="menu__item-link">Início</a> </li> <li class="menu__item"> <a href="www.brasilplaylife.com.br" class="menu__item-link">Fórum</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">O Servidor</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Adquirir Vip/Sócio</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Nossa Staff</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Como Jogar SA-MP</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Downloads</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Tutoriais</a> </li> <li class="menu__item"> <a href="#" class="menu__item-link">Contato</a> </li> </div> <div class="gta"><div class="pattern"> <p class="animated mov3"><br><span style="color:#e92d33;">BEM VINDO</span><br>AO BRASIL PLAY LIFE RPG!<br><span style="font-size:20px; font-variant: small-caps;">SA:MP Project</span></p> <a href="samp://ip.brasilplaylife.com.br:9696" class="button button-1 button-1f">Entre Já</a> </div> </div> <div class="content"> <h1>O SERVIDOR:</h1> <p> Saiba mais sobre o Brasil Play Life - IP: ip.brasilplaylife.com.br:9696</p> <img src="http://brasilplaylife.site88.net/img/separator.png"alt=""> <table class="skills animated mov1"> <tr class="skills-row"> <td class="skill"> <h4><i class="fa fa-lightbulb-o fa-3x"></i><p>GAMEMODE</p></h4> <p>Nossa gamemode conta com mais de 30 organizações, sistemas totalmente únicos e faceis de utilizar. Tudo pensando especialmente para você se sentir a vontade e se divertir a beça. </p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-group fa-2x"></i><p>ONLINE</p></h4> <p>Nosso servidor é mantido online 24 Horas com a maior estabilidade possível, tudo para que sua diversão esteja garantida a todo momento.</p> <script type='text/javascript' src='http://samp-stats.ru/web/api-233.js'></script> <b>Players:</b> <script type='text/javascript'>document.write(api.players +'/'+ api.maxplayers);</script><br></br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">Entrar no Jogo</a></p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-cog fa-3x"></i><p>ATUALIZAÇÕES</p></h4> <p>Nosso servidor está em contanste atualização, nossos programadores estão sempre buscando novas funções e corrigindo bugs no servidor.<br><br><br><br></p> </td> </tr> </table> <br> <h1>PORQUE JOGAR BRASIL PLAY LIFE ?</h1> <p>Abaixo algumas das muitas vantagens do nosso servidor</p> <img src="http://brasilplaylife.site88.net/img/separator.png"alt=""> <table class="skills animated mov2"> <tr class="skills-row"> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-gamepad fa-3x"></i><p>JOGABILIDADE</p></h4> <p>Nosso servidor RPG conta com diversas organizações policiais, criminosas, governamentais. Além de diversos empregos secundários e muitos eventos.</p><br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">ip.brasil play life.com.br:9696</a></p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-globe fa-3x"></i><p></p></h4> <p>Divulgue nosso IP para os seus amigos e complete ainda mais a sua diversão, porque melhor do que jogar BPL é jogar BPL com seus amigos.Abaixo está o nosso IP:</p><br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">ip.brasil play life.com.br:9696</a></p> </td> <td class="skill animate-me zoomIn"> <h4><i class="fa fa-cogs fa-3x"></i><p>MANUTENÇÃO</p></h4> <p>Nós nos preocupamos muito com a manutenção do servidor, desde bons profissionais na administração até a boa conexão dos players ao servidor, sempre mantendo atualizado e online</p><br> <p><a href="samp://ip.brasilplaylife.com.br:9696" class="btn">ip.brasil play life.com.br:9696</a></p> </td> </tr> </table> </div> <div class="footer"> <table class="foot-foot-skills"> <td class="foot-skill animate-me zoomIn"> <a href="/" class="footer-logo"></a> <p class="info">Brasil Play Life é um servidor de SA-MP (San Andreas Multiplayer) que utiliza o modo de jogo RPG, ou seja, simulação de vida real. Para jogar basta baixar o GTA San Andreas + San Andreas Multiplayer(SA-MP), adicionar nosso ip na lista dos favoritos e logar<br></br>Nosso IP: ip.brasilplaylife.com.br:9696</p> </td> <td class="foot-skill animate-me zoomIn"> <h4>Links <p><img src="http://brasilplaylife.site88.net/img/foot-sep.png"alt=""></p></h4> <div class="foot-nav"> <li><a href="#2" target="_blank">> Tutoriais</a></li> <li><a href="#3">> Fórum do Servidor</a></li> <li><a href="#4">> Comprar VIP/SÓCIO</a></li> <li><a href="#5">> Como Jogar Brasil Play Life?</a></li> </div> </td> <td class="foot-skill animate-me zoomIn"> <h4>Contato <p><img src="http://brasilplaylife.site88.net/img/foot-sep.png"alt=""></p></h4> <div class="asd"> <p>Para nos contactar mande um e-mail para<br>brasilplaylife<span style="color:#f2333a">@</span>outlook.com</p> <script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return; if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script><div class="pluso" data-background="transparent" data-options="small,square,line,horizontal,nocounter,theme=02" data-services="vkontakte,facebook,twitter,moimir"></div> </div> </td> </table> <div class="copyright"> 2016 Brasil Play Life - SA-MP - RPG. Site By:<a href="#">RDMP.RU</a> Todos os direitos reservados! <span style="float:right;">Tecnologia By: <a href="/" target="_blank" style="border-bottom: 1px dotted #f2333a;">APOX</a></span> </div> </div> <script> $(window).scroll(function() { $('.mov1').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+300) { $(this).addClass('zoomIn'); } }); }); $(window).scroll(function() { $('.mov2').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+300) { $(this).addClass('flipInX'); } }); }); $(window).scroll(function() { $('.mov3').each(function(){ var imagePos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (imagePos < topOfWindow+0) { $(this).addClass('fadeInLeftBig'); } }); }); </script> </body> </html>

Resulta?
Até mais.

por Lucas_DarkS 07.09.16 4:10

Muito Obrigado. Instalei a font-awesome e tudo resolvido. Pode fechar o tópico!!! Muito feliz

por **Fraise** 07.09.16 4:17

Problemas com Layout da página HTML. Symbol10

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Problemas com Layout da página HTML.