Espaço e retângulo no topo do fórum

[Starset]

Detalhes da questão

Endereço do fórum: http://bloodofvalyria.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Bom dia, pessoal! Coloquei por meio javascritp o widget de últimos temas, porém surgiu um pequeno contratempo. Agora, na minha página inicial apareceu um espaço em branco enorme e um pequeno retângulo preto, como podem ver no print abaixo, que antes não existiam. Gostaria de saber como resolver este problema, alguém pode me ajudar com isso?



Já deixo de ante-mão, o code do quadro de anúncios:

Código:

<div id="welcome">
                                        
 <table cellpadding="0" cellspacing="0">
                      <tbody>   </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
 <tr style="">
                                        
 <td valign="top">
                                        
 <div class="welcomel">
                                        
 <div class="banmid">
                                        
 <div class="avaimg">
                                        
 <div class="g-2" style="display: none;">
                                        
 </div>
                                        
 </div>
                                        
 <div class="playername">
                     Bem-vindo (a),<span>{USERNAME}</span>                    
 </div>
                                        
 </div>
                                        
 </div>
                                        
 </td>
                                        
 <td valign="top">
                                        
 <div class="welcomem">
                                        
 <div class="welmid">
                     “<span class="firstcharacter">R</span> esumo da trama aqui.”                    
 </div>
                                        
 <div class="welbot">
                                        
 <div id="news_ticker">
                                        
 <ul>
                                        
 <li>
                     ATENÇÃO! As postagens estão liberadas!                
 </li>
                                        
 </ul>
                                        
 </div>
                                        
 </div>
                                        
 </div>
                                        
 </td>
                                        
 <td valign="top">
                                        
 <div class="welcome2">
                                        
 <div class="banmid">
                                        
 <div class="flstaffbox" style="background: url(https://i.imgur.com/OIZcQyd.gif);">
                                        
 <div class="flstaffhover">
                                        
 <div class="fladmintitle">
                     Eventos                    
 </div>
                                        
 <center>
                     <em>Primavera, 410 d.C.</em>                    
 </center>
                                        
 <div style="height: 5px;">
                                        
 </div>
                     <a href="link" target="_blank">♘ ♞ Nome do evento</a>                    
 </div>
                                        
 </div>
                                        
 </div>
                                        
 </div>
                                        
 </td>
                                        
 <td valign="top">
                                        
 <div class="welcomer">
                                        
 <div class="plottop">
                     Estamos na <strong>primavera</strong>, ano de <strong>410 d.C.</strong>                    
 </div>
                                        
 <div class="plotbot">
                            <em class="fa fa-whatsapp" aria-hidden="true"></em> <a href="http://bloodofvalyria.forumeiros.com/t52-sistemas-cargos" target="_blank"> <strong>Cargos</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t49-sistemas-habiliades" target="_blank"> <strong>Habilidades</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t5-registro-de-photoplayer" target="_blank"> <strong>Registro de Photoplayer</strong></a><br /><a href="https://i.imgur.com/NOi8B5g.jpg" target="_blank"> <strong>Mapa de Todo o Mundo Conhecido</strong></a><br /><a href="https://chat.whatsapp.com/HT4hNEPvpw4DPRZ71EyY3X" target="_blank"> <strong>Grupo: Blood of Valyria RPG</strong></a>                                                
 </div>
                                        
 </div>
                                        
 </td>
                                        
 </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody>   </tbody>                      
 </table>
                                        
</div>

O CSS:

Código:

/*HEADER*/

#welcome {
 width: 990px;
 margin-top: 5px;
   margin-left: 58px;
 margin-bottom: 30px;
 padding: 20px;
 background: #f9f9f9;
 border-left: 1px solid #f2f0ed;
 border-right: 1px solid #f2f0ed;
 font-family: 'Open Sans', sans-serif; }

.welcomel, .welcomem, .welcomem2, .welcomer { height: 154px; }
.welcomel { margin-right: 20px; }
.welcome2 { margin-left: 20px; }
.welcomer { margin-left: 20px; }
.welmid, .welbot { width: 400px; }

.welmid {
 font-family: 'Open Sans', sans-serif!important;
 height: 77px;
     border: 1px solid #e5e1d9;
 margin-bottom: 10px;
 padding: 13px 20px;
 text-align: justify;
 font: 11px lato;
 line-height: 140%;
 overflow: auto;
 background: #f8f7f6; }

.firstcharacter {
 float: left;
 color: #9d805a;
 font: 50px Allura;
 line-height: 30px;
 padding-top: 8px;
 padding-right: 8px; }

.ditem .firstcharacter {
 float: left;
 color: #B7A387;
 font: 45px Allura;
 line-height: 25px;
 padding-top: 0;
 padding-right: 8px; }

.ditem .firstcharacter2 {
 float: left;
 color: #9d805a;
 font: 50px playfair display;
 line-height: 30px;
 padding-top: 8px;
 padding-right: 8px; }

.welbot {
 border: 1px solid #e5e1d9;
 padding: 10px 20px;
     font: 12px cardo;
 font-style: italic;
 overflow: hidden;
 background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) 50px; }

#news_ticker {
 width: 400px;
 height: 14px;
 margin: 0;
        color: #000;
 overflow: hidden !important;
 padding: 3px;
 padding-top: 0;
 position: relative;
 font: 12px cardo;
 font-style: italic; }

#news_ticker ul {
 float: left;
 padding-left: 0;
 list-style-type: none;
 -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
 -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
 -ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
 animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; }

#news_ticker ul:hover {
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused; }

#news_ticker li { line-height: 16px; }

#news_ticker a {}

@-webkit-keyframes ticker {
 0%   {margin-top: 0;}
 25%  {margin-top: -16px;}
 50%  {margin-top: -32px;}
 75%  {margin-top: -48px;}
 100% {margin-top: 0;} }

@-moz-keyframes ticker {
 0%   {margin-top: 0;}
 25%  {margin-top: -16px;}
 50%  {margin-top: -32px;}
 75%  {margin-top: -48px;}
 100% {margin-top: 0;} }

@-ms-keyframes ticker {
 0%   {margin-top: 0;}
 25%  {margin-top: -16px;}
 50%  {margin-top: -32px;}
 75%  {margin-top: -48px;}
 100% {margin-top: 0;} }

@keyframes ticker {
 0%   {margin-top: 0;}
 25%  {margin-top: -16px;}
 50%  {margin-top: -32px;}
 75%  {margin-top: -48px;}
 100% {margin-top: 0;} }

.banmid {
 width: 100px;
 padding: 10px;
 height: 134px;
 background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
 outline: 1px solid rgba(255, 255, 255, 0.35);
 outline-offset: -4px; }

.banmid2 {
 width: 100px;
 padding: 10px;
 height: 134px;
 background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
 outline: 1px solid rgba(255, 255, 255, 0.35);
 outline-offset: -4px; }

.avaimg {
    background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/WeAreRoyals/Crown.png);
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-left: 8px;
    margin-top: -5px;
    overflow: hidden;
}

.g-2 {
    display: block !important;
}

.avaimg img {
    width: 55px;
    height: 55px;
    margin-left: -3px;
    margin-top: -2px;
}

img {
    vertical-align: middle;
    border: 0px;
}

.playername {
    width: 110px;
    margin-top: 10px;
    text-align: center;
    font: 11px cardo;
    color: #000;
    text-transform: lowercase;
    font-style: italic;
}

.playername span {
 display: block;
 margin-top: 5px;
 font: 10px playfair display;
 font-style: normal;
 letter-spacing: 0px;
 text-transform: uppercase;
}

.flstaffbox{
 height: 135px;
 width: 100px;
 display: inline-block;
 margin:0px!important;
 overflow:hidden;}

.flstaffhover {
 padding: 8px;
 font-family: 'Open Sans', sans-serif;
 font-size: 10px;
 background-color: rgba(25,25,25,0.9);
 color: #efefef;
 text-align: justify;
 height: 125px;
 overflow: hidden;
 width: 85px;
 opacity:0;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -ms-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;}

.flstaffbox:hover .flstaffhover{opacity:1;}

.flstaffhover a {
 font-size: 9px;
 font-weight: 700;
 color: #B7A387;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -ms-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;}

.flstaffhover a:hover {
 color: #efefef;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -ms-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;}

.fladmintitle{
 padding-top: 10px;
 padding-bottom: 5px;
 text-align: center;
 font-family: 'Playfair Display', serif;
 font-size: 12px;
 text-transform: uppercase;
 color: #ebebeb;
 font-weight: 300;
 line-height: 100%;
 border-bottom: 1px dotted #444; }

.fladmintitle:first-letter {
 font-weight: 300!important;
 margin-right: 3px;
 text-transform: uppercase;
 font-family: 'Allura', cursive;
 font-size: 20px; }

.plottop, .plotbot { width: 204px; }

.plottop {
 color: #68553b;
 text-align: right;
 font: 12px cardo;
 font-style: italic;
 padding: 0px 20px 10px 20px;
 border-bottom: 1px solid #dbd5ca; }

.plottop b { color: #7d5368; }

.plotbot {
     height: 75px;
     border: 1px solid #e5e1d9;
     margin-top: 10px;
     padding: 20px;
     text-align: justify;
 font-family: 'Open Sans', sans-serif!important;
 font-size: 11px;
 line-height: 140%;
     overflow: auto;
 background: #f8f7f6; }

#alltop {
    width: 980px;
    margin: 0 auto;
}

#topbanner2017 {
    background: url(https://i.imgur.com/pdE9vB6.png);
    opacity: 0.7;
    width: 980px;
    height: 500px;
}
#topblurb {
    color: #f8f7f6;
    font: 12px cardo;
    letter-spacing: 2px;
    height: 200px;
    padding: 0 100px;
    line-height: 200%;
    margin-top: -150px;
    text-align: left;
    opacity: .5;
}

important {
    font: 14px cardo;
    font-weight: 700;
    font-style: italic;
}


E por fim, o JavaScritp utilizado:

Código:

/* globals jQuery */
 
(function($) {
    'use strict';
 
    $(function() {
        var $container = $('.welcomem');
 
        if ($container.length === 0) {
            return;
        }
 
        var $marquee = $('#comments_scroll_div .marquee');
 
        if ($marquee.length === 0) {
            return;
        }
 
        var $parent = $container.closest('tr').find('div:last').parent();
 
        $parent
            .attr('id', 'comments-marquee')
            .html('')
            .css('overflow', 'hidden');
 
        $marquee = $marquee
            .marquee('destroy')
            .css('height', '180px')
            .appendTo($parent)
            .marquee();
 
        $marquee.hover(function() {
            $marquee.marquee('pause');
        }, function() {
            $marquee.marquee('resume');
        });
    });
})(jQuery);

Desde já, grato.

[tikky]

Olá @Starset,
a faixa preta que apareceu na realidade é o header dos "últimos assuntos", widgets da direita, para remover ela adicione isto no seu CSS

Código:

#content-container div#left {
    display: none;
}

Atenciosamente,

[Starset]

@Pedxz, obrigado pela ajuda! Resolveu!

[Fraise]

Tópico resolvido Movido para "Questões resolvidas".