Tabela não funciona

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

Resolvido Tabela não funciona

Mensagem por Makayla em 15/05/11, 06:48 am

Qual é sua questão:
Bem eu ontem estive aqui com a mesma duvida com a diferença que esta antes tinha sido aplicada mas o proprio funcionamento da tabela era deficiente.

Código:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo by Byte</title>
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
   
      <link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="http://jsfiddle.net/css/result-light.css">
   
      <style type='text/css'>
        #bemvindo img{opacity: 0.8;-webkit-transition: all 0.3s linear 0s;    -o-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; }
    #bemvindo img:hover{opacity: 1;}
    #bemvindo ul{
        list-style-type:none;
        width:100%;
        text-align:center;
    }
    #bemvindo ul li{
        display: inline;
        margin:0 10px;
        padding: 3px 5px;
        border:1px solid #000;
        cursor:help;
    }
    #bemvindo table{
        border:0px;
        padding:0px;
        width:100%;
    }
    #bemvindo table td div{display:none;}
    #bemvindo table td div#box1{display:block;}
    #bemvindo table td#boxes{border:1px solid #000; padding:5px;}
    #bemvindo .beviscroll{
        display:block;
        width:100px; /* Largura do texto */
        height:100px; /* Altura to texto */
        overflow-y:auto;
        overflow-x:none;
    }
   
      </style>
   
      <script type='text/javascript'>
      //<![CDATA[
      $(window).load(function(){
      $('#menu1').hover(function() {
        $('#box1').css('display', 'block');
        $('#box2,#box3,#box4,#box5').css('display', 'none');
    });
   
    $('#menu2').hover(function() {
        $('#box2').css('display', 'block');
        $('#box1,#box3,#box4,#box5').css('display', 'none');
    });
   
    $('#menu3').hover(function() {
        $('#box3').css('display', 'block');
        $('#box1,#box2,#box4,#box5').css('display', 'none');
    });
   
    $('#menu4').hover(function() {
        $('#box4').css('display', 'block');
        $('#box1,#box2,#box3,#box5').css('display', 'none');
    });
   
    $('#menu5').hover(function() {
        $('#box5').css('display', 'block');
        $('#box1,#box2,#box3,#box4').css('display', 'none');
    });
      });
      //]]>
      </script>
   
    </head>
    <body>
      <div id="bemvindo">
     
        <center><img src="http://bioniclecommunity.site90.net/site/paginas/nossa-historia/img/byte1.png" /></center>
     
        <ul>
            <li id="menu1">Guerra santa</li>
            <li id="menu2">Personagens</li>
            <li id="menu3">Eventos</li>
            <li id="menu4">Novidades</li>
            <li id="menu5">Copyright</li>
        </ul>
     
     
   
     
        <table>
            <tr>
             
                <td id="boxes">
                    <div id="box1">
                        <table>
                            <tr>
                                <td rowspan="2">
                                    <center>
                                        <img src="http://bioniclecommunity.site90.net/site/paginas/nossa-historia/img/byte1.png" />
                                    </center>
                                </td>
                                <td>
                                    <a href="LINK_REGRAS">Regras</a>
                                    |
                                    <a href="LINK_HIST">História</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="beviscroll">
                                    Texto_Aqui
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                                 
                    <div id="box2">
                        <table>
                            <tr>
                                <td>Tabela dos Personagens</td>
                            </tr>
                        </table>             
                    </div>
                 
                    <div id="box3">
                        <center>
                        <table>
                            <tr>
                                <td colspan="2"><center><b>Titulo</b></center></td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="http://bioniclecommunity.site90.net/site/paginas/nossa-historia/img/byte1.png" />
                                </td>
                             
                                <td>
                                    <img src="http://bioniclecommunity.site90.net/site/paginas/nossa-historia/img/byte1.png" />
                                </td>
                            </tr>
                        </table>
                        </center>
                    </div>
                 
                    <div id="box4">
                        <table>
                            <tr>
                                <td>
                                    <center>
                                    <a href="LINK_NOVIDADES">Novidades</a>
                                    |
                                    <a href="LINK_ENQUETES">Enquetes</a>
                                    </center>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="beviscroll">
                                        <ol>
                                            <li>- xx/xx/xx : Novidade1</li>
                                            <li>- xx/xx/xx : Novidade2</li>
                                        </ol>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                 
                    <div id="box5">Coprright do fórum</div>
                </td>
                             
                             
                <td width="1%">
                    <center>
                        <img src="http://bioniclecommunity.site90.net/site/paginas/nossa-historia/img/byte1.png">
                    </center>
                </td>
            </tr>
        </table>
                     
    </div>
   
    </body>
   
   
    </html>
Ela esta funcionando como eu desejo mas esta-me bugando o fundo do forum.
Desta vez eu coloquei a tabela atraves da edição de templates, mais precisamente o overall_header, o que fez com que a tabela funcionasse perfeitamente so com esse se não que bugou o fundo do forum.
Agradeço se houver alguma forma de resolver este problema digam, pois queria mesmo usa-la para a melhor organização do forum.
avatar

Makayla
Usuário destaque

Feminino
Inscrito dia : 04/07/2010
Mensagens : 642
Pontos Ativos : 904

Ver perfil do usuário http://chroniclesofzodiac.livreforum.com/index.htm

Resolvido Re: Tabela não funciona

Mensagem por Luciano98 em 15/05/11, 12:53 pm

Olá!

1º - Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código da tabela.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.


Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).




- Inserir o código no fórum:
Agora cole o link que você havia copiado no item anterior, no lugar de "ENDERECO-DA-PAGINA-HTML" no codigo.
<iframe src='ENDERECO-DA-PAGINA-HTML' height='100%' width='100%' scrolling=auto frameborder=no border=0></iframe>
Agora copie o código criado e cole ele para o local que você quer que apareça a tabela.

Por exemplo, no FdF:
<iframe src='http://ajuda.forumeiros.com/h1-codigo' height='100%' width='100%' scrolling=auto frameborder=no border=0></iframe>

Até mais.
Luciano98
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

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