Personalização de Página HTML

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Administrador
Navegador usado : Google Chrome
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://www.vertigem.forumeiros.com

Descrição do problema

Olá e boa noite!

Recentemente, Sennior criou uma página HTML para meu fórum e deixei para que o Isoul me ajudasse a editar e configurar a página de acordo com minhas necessidades. No entanto, Isoul não trabalha mais com htlml e gostaria de alguem para me ajudar a configurar a página.

- adequar o tamanho do background
- configurar as imagens
- configurar os botões
- deixar os botões mais modernos
- formatar fonte (tamanho e cor )


Desde já agradeço!

Saudações,

Estou aqui para isso, lhe ajudar amigo.
Bem, aqui está mas preciso que especifique como deseja os botões modernos:

Código:


<br /><meta content="text/html;charset=utf-8" http-equiv="Content-Type" />                          <style>
        <!----------------------------------------------- Créditos: -----------------------------------------------!>
        Está página foi desenvolvida por BrunoH. - Web Designer e Programador
        Nome: BrunoH. Páginas HTML
        Autor: BrunoH.
        Link: http://brunohweb.tk/
        Data: 11/07/2013
        A Copia desta página sem autorização do autor, poderá ser processado pois a página contem direitos autorais reservados!
        <!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>








        hr {
        border-color: #fff;
        }
        #top5 {
        display:none;
        position: fixed;
        left: 86.6%;
        top: 97%;
        color: #73AAFD;
        font-family: "Courier New", Courier, monospace font-size:14px;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        opacity: 0.7;
        -webkit-transition-duration: 1s;
        background: rgb(27, 27, 27);
        width: 20%;
        -webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
        }
        #top5:hover {
        height: 80%;
        top: 47%;
        opacity: 1;
        }
        #topo1 {
        position: absolute;
        left: 81%;
        top: 1.5%;
        color: rgb(211, 211, 211);
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        }
        #topo2ip {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2 {
        position: absolute;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 98%;
        -webkit-transition-duration: 1s;
        border-bottom: 1px solid rgba(255, 255, 255, 0.53);
        padding: 4px;
        }
        #RaidCallDESATIVADO {
        position: absolute;
        top: 1.5%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 36%;
        -webkit-transition-duration: 1s;
        margin-left: 22%;
        }
        #RaidCall {
        position: absolute;
        left: 81%;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        padding: 4px;
        }
        #RaidCallID {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2:hover {opacity: 1;}
        #cssmenu ul,
        #cssmenu li,
        #cssmenu span,
        #cssmenu a {
          margin: 0;
          padding: 0;
          position: relative;
        }
        #cssmenu {
        height: 49px;
        background: transparent;
        margin-left: 80%;
        margin-top: -10%;
        width: 17%!important;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu a {
        background: transparent;
        color: #fff;
        display: inline-block;
        font-family: Game of Thrones;
        line-height: 35px;
        padding: 0 20px;
        text-decoration: none;
        border-radius: 3px;
        font-size: 20px;
        margin-left: 5px;
        }
        #cssmenu ul {
          list-style: none;
        }
        #cssmenu > ul {
          float: left;
        }
        #cssmenu > ul > li {
          float: center;
        }
        #cssmenu > ul > li:hover:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50%;
          bottom: 0;
        }
        #cssmenu > ul > li:hover > a {
        color: rgba(255, 255, 255, 0.55);
        }
        #cssmenu .has-sub {
          z-index: 1;
        }
        #cssmenu .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub ul {
          display: none;
          position: absolute;
          width: 200px;
          top: 100%;
          left: 0;
        }
        #cssmenu .has-sub ul li {
          *margin-bottom: -1px;
        }
        #cssmenu .has-sub ul li a {
          background: #0fa1e0;
          border-bottom: 1px dotted #6fc7ec;
          filter: none;
          font-size: 11px;
          display: block;
          line-height: 120%;
          padding: 10px;
        }
        #cssmenu .has-sub ul li:hover a {
          background: #0c7fb0;
        }
        #cssmenu .has-sub .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub .has-sub ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
        }
        #cssmenu .has-sub .has-sub ul li a {
          background: #0c7fb0;
          border-bottom: 1px dotted #6db2d0;
        }
        #cssmenu .has-sub .has-sub ul li a:hover {
          background: #095c80;
        }
        .menu {
        width: 87.2%;
        background: transparent;
        margin-top: 4%;
        position: absolute;
        margin-left: 5%;
        padding: 10px;
        -webkit-border-radius: 7px 7px 0px 0;
        color:#fff;
        }
        .menu a{
        transition:all linear 0.5s;
        -moz-transition:all linear 0.5s;
        -webkit-moz-trasition:all linear 0.5s;
        font-weight:bold;
        color:#999999;
        margin-right:35px;
        text-decoration:none;
        }
        #tabela1 {
        background: transparent;
        width: 1%;
        float: center;
        height: 1%;
        margin-top: 383px;
        }
        #tabela1 a{
        text-decoration:none;
        color:#000;
        }
        body{
        background: rgb(0, 0, 0) url("http://2.bp.blogspot.com/-Q3vZ1KnYRPI/TtSD0nTJsGI/AAAAAAAAAXU/cfGRgdZrTJU/s1600/armageddon29zbastroid.jpg") repeat;
        color: #5a5a5a;
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        padding-bottom: 20px;
        background-repeat: no-repeat;
      background-size: 100pc;
        }
        .conectado {
        margin-top: -2.9%;
        margin-left: 6%;
        position: absolute;
        background: rgba(0, 0, 0, 0.18);
        height: 37px;
        box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        width: 87%;
        }
        .botao {
        font-weight: bold;
        color: white;
        float: left;
        padding: 0 13px 9px 13px;
        line-height: 36px;
        outline: none;
        height: 26px;
        text-decoration: none;
        }
        .botao a {
        color: white;
        text-decoration: none;
        }
        .botao:hover {
        background: rgba(0, 0, 0, 0.1);
        }
        #brunoh {
        background-color: #fbfbfb;
        border: 1px solid rgb(231, 231, 231);
        padding: 6px;
        }
        .redesociais {
        margin-left: 820px;
        margin-top: -288px;
        position: absolute;
        }
      #tabcont-brunoh {
padding: 10px;
width: 600px;
position: absolute;
margin-left: 100px;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
min-height: 100px;
margin-top: -237px;
color: white;
border-radius: 10px;
left: 22pc;
}
        .copyright {
        position: absolute;
        margin-left: 600px;
        margin-top: 264px;
        color: #fff;
        }

div#sennior {
position: relative;
left: -66pc;
top: 9pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
background-color: rgba(139, 139, 139, 0.36);
border-color: rgba(0, 0, 0, 0.19);
border-radius: 6px;
border-style: solid;
border-width: 1px 1px 3px;
box-shadow: inset 0 0 2px rgba(66, 66, 66, 0.76);
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}


        </style>
<center>
             <link href="http://gameofthrones-845.ah.bpcdn.net/favicon.ico?" type="image/x-icon" rel="shortcut icon" />        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />        <title>Jogo dos Tronos</title>                           
   <div class="redesociais">
        <iframe allowtransparency="true" style="border:none; overflow:hidden; width:300px;" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Ffacebook.com%2FGameOfThronesRpg&app_id&action&max_rows=4&size=medium&show_count=true&width=300&colorscheme=light"> </iframe> 
   </div>
              
   <center>
        <img style=" position: absolute; left: 435px; top: -20px;padding: 0px; width: 40%;" src="http://i.imgur.com/7FXeLMN.png" /> 
      <div id="tabcont-brunoh">
          
         <div style="font-size:17px;display: block;" id="tab1">
             
            <ul>
                 Armand Donovan poderia levar sua vida pacata, livre das intrigas da cúpula do Magistrado e do jogo interminável de poder entre Ámon e Capa Branca - membros completamente opostos da Guarda Provincial. Porém, o jovem garoto acabou sendo pego em fogo cruzado, o que acabou o deixando cara a cara com os reais problemas da última cidade viva do planeta terra - Lasttown. Com isso, a oportunidade perfeita para se vingar dos homens que o torturaram e simplesmente desapareceram com sua mãe acabou caindo em suas mãos. O que ninguém esperava, é que o destino aguardava a chance perfeita para balançar mais uma vez o equilibrio do planeta terra. Ninguém está a salvo quando se está em Lasttown. 
            </ul>
             
         </div>
                    
      </div>
       
   </center>
              
   <center>
       
      <div class="menu">
          
         <div id="cssmenu">
                         
            <center>
                
               <div id="sennior">
                   
                  <div style="display: block;" id="tab1">
                      
                     <ul>
                          <a href="http://www.perse.com.br/novoprojetoperse/WF2_BookDetails.aspx?filesFolder=N1417128192064">Adquira agora seu exemplar!</a> 
                     </ul>
                      
                  </div>
                             
                  <div id="sennior1">
                      
                     <div style="display: block;" id="tab1">
                         
                        <ul>
                             <a href="http://vertigem.forumeiros.com/portal">Ir para fórum</a> 
                        </ul>
                         
                     </div>
                                
                     <div id="sennior2">
                         
                        <div style="display: block;" id="tab1">
                            
                           <ul>
                                <a href="LINK PARA ONDE IREMOS AO CLICAR">Contato</a> 
                           </ul>
                            
                        </div>
                           
                     </div>
                      
                  </div>
                   
               </div>
                
            </center>
             
         </div>
                            
      </div>
       
      <div class="copyright">
           Copyright ® CJSilveira Isoul Renato Vasconcelos 
      </div>
                 
      <table id="tabela1">
                    
         <tbody>
             
            <tr>
                
               <td>
                   
                  <center>
                      
                  </center>
                   
               </td>
                
            </tr>
             
         </tbody>
          
      </table>
       
   </center>
             <a style="display: none;" target="_blank" href="http://www.forumeiros.com"> Fórumeiros</a>
</center>

Até mais.

Olá, voce pode me passar o endereço daquele site para visualizar página em html? Assim fica mais fácil e obrigado pela disposição!

Claro amigo, é este aqui:
comofazerumsite.com/editor-html/tempo-real.html

Até mais.

Nossa, as alterações que você fez já resolveram 60 % dos problemas. Quanto aos botões, a cor que você colocou agora nesse código ficou ótima. Mas eu gostaria que você dividisse eles, ou com uma linha da mesma cor da borda ou separasse mesmo os três botões. Se você conseguir fazer um efeito para quando o mouse passar em cima, fica melhor ainda!

No aguardo! <3

Assim?

Código:

<br /><meta content="text/html;charset=utf-8" http-equiv="Content-Type" />                          <style>
        <!----------------------------------------------- Créditos: -----------------------------------------------!>
        Está página foi desenvolvida por BrunoH. - Web Designer e Programador
        Nome: BrunoH. Páginas HTML
        Autor: BrunoH.
        Link: http://brunohweb.tk/
        Data: 11/07/2013
        A Copia desta página sem autorização do autor, poderá ser processado pois a página contem direitos autorais reservados!
        <!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>








        hr {
        border-color: #fff;
        }
        #top5 {
        display:none;
        position: fixed;
        left: 86.6%;
        top: 97%;
        color: #73AAFD;
        font-family: "Courier New", Courier, monospace font-size:14px;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        opacity: 0.7;
        -webkit-transition-duration: 1s;
        background: rgb(27, 27, 27);
        width: 20%;
        -webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
        }
        #top5:hover {
        height: 80%;
        top: 47%;
        opacity: 1;
        }
        #topo1 {
        position: absolute;
        left: 81%;
        top: 1.5%;
        color: rgb(211, 211, 211);
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        }
        #topo2ip {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2 {
        position: absolute;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 98%;
        -webkit-transition-duration: 1s;
        border-bottom: 1px solid rgba(255, 255, 255, 0.53);
        padding: 4px;
        }
        #RaidCallDESATIVADO {
        position: absolute;
        top: 1.5%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 36%;
        -webkit-transition-duration: 1s;
        margin-left: 22%;
        }
        #RaidCall {
        position: absolute;
        left: 81%;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        padding: 4px;
        }
        #RaidCallID {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2:hover {opacity: 1;}
        #cssmenu ul,
        #cssmenu li,
        #cssmenu span,
        #cssmenu a {
          margin: 0;
          padding: 0;
          position: relative;
        }
        #cssmenu {
        height: 49px;
        background: transparent;
        margin-left: 80%;
        margin-top: -10%;
        width: 17%!important;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu a {
        background: transparent;
        color: #fff;
        display: inline-block;
        font-family: Game of Thrones;
        line-height: 35px;
        padding: 0 20px;
        text-decoration: none;
        border-radius: 3px;
        font-size: 20px;
        margin-left: 5px;
        }
        #cssmenu ul {
          list-style: none;
        }
        #cssmenu > ul {
          float: left;
        }
        #cssmenu > ul > li {
          float: center;
        }
        #cssmenu > ul > li:hover:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50%;
          bottom: 0;
        }
        #cssmenu > ul > li:hover > a {
        color: rgba(255, 255, 255, 0.55);
        }
        #cssmenu .has-sub {
          z-index: 1;
        }
        #cssmenu .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub ul {
          display: none;
          position: absolute;
          width: 200px;
          top: 100%;
          left: 0;
        }
        #cssmenu .has-sub ul li {
          *margin-bottom: -1px;
        }
        #cssmenu .has-sub ul li a {
          background: #0fa1e0;
          border-bottom: 1px dotted #6fc7ec;
          filter: none;
          font-size: 11px;
          display: block;
          line-height: 120%;
          padding: 10px;
        }
        #cssmenu .has-sub ul li:hover a {
          background: #0c7fb0;
        }
        #cssmenu .has-sub .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub .has-sub ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
        }
        #cssmenu .has-sub .has-sub ul li a {
          background: #0c7fb0;
          border-bottom: 1px dotted #6db2d0;
        }
        #cssmenu .has-sub .has-sub ul li a:hover {
          background: #095c80;
        }
        .menu {
        width: 87.2%;
        background: transparent;
        margin-top: 4%;
        position: absolute;
        margin-left: 5%;
        padding: 10px;
        -webkit-border-radius: 7px 7px 0px 0;
        color:#fff;
        }
        .menu a{
        transition:all linear 0.5s;
        -moz-transition:all linear 0.5s;
        -webkit-moz-trasition:all linear 0.5s;
        font-weight:bold;
        color:#999999;
        margin-right:35px;
        text-decoration:none;
        }
        #tabela1 {
        background: transparent;
        width: 1%;
        float: center;
        height: 1%;
        margin-top: 383px;
        }
        #tabela1 a{
        text-decoration:none;
        color:#000;
        }
        body{
        background: rgb(0, 0, 0) url("http://2.bp.blogspot.com/-Q3vZ1KnYRPI/TtSD0nTJsGI/AAAAAAAAAXU/cfGRgdZrTJU/s1600/armageddon29zbastroid.jpg") repeat;
        color: #5a5a5a;
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        padding-bottom: 20px;
        background-repeat: no-repeat;
      background-size: 100pc;
        }
        .conectado {
        margin-top: -2.9%;
        margin-left: 6%;
        position: absolute;
        background: rgba(0, 0, 0, 0.18);
        height: 37px;
        box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        width: 87%;
        }
        .botao {
        font-weight: bold;
        color: white;
        float: left;
        padding: 0 13px 9px 13px;
        line-height: 36px;
        outline: none;
        height: 26px;
        text-decoration: none;
        }
        .botao a {
        color: white;
        text-decoration: none;
        }
        .botao:hover {
        background: rgba(0, 0, 0, 0.1);
        }
        #brunoh {
        background-color: #fbfbfb;
        border: 1px solid rgb(231, 231, 231);
        padding: 6px;
        }
        .redesociais {
        margin-left: 820px;
        margin-top: -288px;
        position: absolute;
        }
      #tabcont-brunoh {
padding: 10px;
width: 600px;
position: absolute;
margin-left: 100px;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
min-height: 100px;
margin-top: -237px;
color: white;
border-radius: 10px;
left: 22pc;
}
        .copyright {
        position: absolute;
        margin-left: 600px;
        margin-top: 264px;
        color: #fff;
        }

div#sennior {
position: relative;
left: -66pc;
top: 9pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
background-color: rgba(139, 139, 139, 0.36);
border-color: rgba(0, 0, 0, 0.19);
border-radius: 6px;
border-style: solid;
border-width: 1px 1px 3px;
box-shadow: inset 0 0 2px rgba(66, 66, 66, 0.76);
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
height: 133px;
}

div#sennior1:hover {
background-color: rgb(34, 213, 231);
padding: 6px;
}
div#sennior2:hover {
background-color: rgb(34, 213, 231);
padding-bottom: 15px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
position:relative;
left:-623px;
}
div#sennior:hover {
background-color: rgb(34, 213, 231);
height: 125px;
padding: 6px;
}
div#sennior1 {
position: relative;
top: 3pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-color: transparent;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
div#sennior2 {
position: relative;
top: 3pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
        </style>
<center>
              <link href="http://gameofthrones-845.ah.bpcdn.net/favicon.ico?" type="image/x-icon" rel="shortcut icon" />        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />        <title>Jogo dos Tronos</title>                           
  <div class="redesociais">
        <iframe allowtransparency="true" style="border:none; overflow:hidden; width:300px;" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Ffacebook.com%2FGameOfThronesRpg&app_id&action&max_rows=4&size=medium&show_count=true&width=300&colorscheme=light"> </iframe> 
  </div>
             
  <center>
        <img style=" position: absolute; left: 435px; top: -20px;padding: 0px; width: 40%;" src="http://i.imgur.com/7FXeLMN.png" /> 
      <div id="tabcont-brunoh">
           
        <div style="font-size:17px;display: block;" id="tab1">
             
            <ul>
                Armand Donovan poderia levar sua vida pacata, livre das intrigas da cúpula do Magistrado e do jogo interminável de poder entre Ámon e Capa Branca - membros completamente opostos da Guarda Provincial. Porém, o jovem garoto acabou sendo pego em fogo cruzado, o que acabou o deixando cara a cara com os reais problemas da última cidade viva do planeta terra - Lasttown. Com isso, a oportunidade perfeita para se vingar dos homens que o torturaram e simplesmente desapareceram com sua mãe acabou caindo em suas mãos. O que ninguém esperava, é que o destino aguardava a chance perfeita para balançar mais uma vez o equilibrio do planeta terra. Ninguém está a salvo quando se está em Lasttown. 
            </ul>
             
        </div>
                   
      </div>
       
  </center>
             
  <center>
       
      <div class="menu">
           
        <div id="cssmenu">
                         
            <center>
                 
              <div id="sennior">
                   
                  <div style="display: block;" id="tab1">
                       
                    <ul>
                          <a href="http://www.perse.com.br/novoprojetoperse/WF2_BookDetails.aspx?filesFolder=N1417128192064">Adquira agora seu exemplar!</a> 
                    </ul>
                     
                  </div>
                          </div>   
                  <div id="sennior1">
                       
                    <div style="display: block;" id="tab1">
                         
                        <ul>
                            <a href="http://vertigem.forumeiros.com/portal">Ir para fórum</a> 
                        </ul>
                         
                    </div>
                            </div>   
                    <div id="sennior2">
                         
                        <div style="display: block;" id="tab1">
                             
                          <ul>
                                <a href="LINK PARA ONDE IREMOS AO CLICAR">Contato</a> 
                          </ul>
                             
                        </div>
                           
                    </div>
                       
                       
            </center>
             
        </div>
                             
      </div>
       
      <div class="copyright">
          Copyright ® CJSilveira Isoul Renato Vasconcelos 
      </div>
                 
      <table id="tabela1">
                   
        <tbody>
             
            <tr>
                 
              <td>
                   
                  <center>
                       
                  </center>
                   
              </td>
                 
            </tr>
             
        </tbody>
           
      </table>
       
  </center>
              <a style="display: none;" target="_blank" href="http://www.forumeiros.com"> Fórumeiros</a>
</center>

Até mais.

O Efeito ficou ótimo, voce pode apenas trocar o azul por um cinza mais escuro?

Certo amigo:

Código:

<br /><meta content="text/html;charset=utf-8" http-equiv="Content-Type" />                          <style>
        <!----------------------------------------------- Créditos: -----------------------------------------------!>
        Está página foi desenvolvida por BrunoH. - Web Designer e Programador
        Nome: BrunoH. Páginas HTML
        Autor: BrunoH.
        Link: http://brunohweb.tk/
        Data: 11/07/2013
        A Copia desta página sem autorização do autor, poderá ser processado pois a página contem direitos autorais reservados!
        <!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>








        hr {
        border-color: #fff;
        }
        #top5 {
        display:none;
        position: fixed;
        left: 86.6%;
        top: 97%;
        color: #73AAFD;
        font-family: "Courier New", Courier, monospace font-size:14px;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        opacity: 0.7;
        -webkit-transition-duration: 1s;
        background: rgb(27, 27, 27);
        width: 20%;
        -webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
        }
        #top5:hover {
        height: 80%;
        top: 47%;
        opacity: 1;
        }
        #topo1 {
        position: absolute;
        left: 81%;
        top: 1.5%;
        color: rgb(211, 211, 211);
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        }
        #topo2ip {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2 {
        position: absolute;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 98%;
        -webkit-transition-duration: 1s;
        border-bottom: 1px solid rgba(255, 255, 255, 0.53);
        padding: 4px;
        }
        #RaidCallDESATIVADO {
        position: absolute;
        top: 1.5%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 36%;
        -webkit-transition-duration: 1s;
        margin-left: 22%;
        }
        #RaidCall {
        position: absolute;
        left: 81%;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        padding: 4px;
        }
        #RaidCallID {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2:hover {opacity: 1;}
        #cssmenu ul,
        #cssmenu li,
        #cssmenu span,
        #cssmenu a {
          margin: 0;
          padding: 0;
          position: relative;
        }
        #cssmenu {
        height: 49px;
        background: transparent;
        margin-left: 80%;
        margin-top: -10%;
        width: 17%!important;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu a {
        background: transparent;
        color: #fff;
        display: inline-block;
        font-family: Game of Thrones;
        line-height: 35px;
        padding: 0 20px;
        text-decoration: none;
        border-radius: 3px;
        font-size: 20px;
        margin-left: 5px;
        }
        #cssmenu ul {
          list-style: none;
        }
        #cssmenu > ul {
          float: left;
        }
        #cssmenu > ul > li {
          float: center;
        }
        #cssmenu > ul > li:hover:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50%;
          bottom: 0;
        }
        #cssmenu > ul > li:hover > a {
        color: rgba(255, 255, 255, 0.55);
        }
        #cssmenu .has-sub {
          z-index: 1;
        }
        #cssmenu .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub ul {
          display: none;
          position: absolute;
          width: 200px;
          top: 100%;
          left: 0;
        }
        #cssmenu .has-sub ul li {
          *margin-bottom: -1px;
        }
        #cssmenu .has-sub ul li a {
          background: #0fa1e0;
          border-bottom: 1px dotted #6fc7ec;
          filter: none;
          font-size: 11px;
          display: block;
          line-height: 120%;
          padding: 10px;
        }
        #cssmenu .has-sub ul li:hover a {
          background: #0c7fb0;
        }
        #cssmenu .has-sub .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub .has-sub ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
        }
        #cssmenu .has-sub .has-sub ul li a {
          background: #0c7fb0;
          border-bottom: 1px dotted #6db2d0;
        }
        #cssmenu .has-sub .has-sub ul li a:hover {
          background: #095c80;
        }
        .menu {
        width: 87.2%;
        background: transparent;
        margin-top: 4%;
        position: absolute;
        margin-left: 5%;
        padding: 10px;
        -webkit-border-radius: 7px 7px 0px 0;
        color:#fff;
        }
        .menu a{
        transition:all linear 0.5s;
        -moz-transition:all linear 0.5s;
        -webkit-moz-trasition:all linear 0.5s;
        font-weight:bold;
        color:#999999;
        margin-right:35px;
        text-decoration:none;
        }
        #tabela1 {
        background: transparent;
        width: 1%;
        float: center;
        height: 1%;
        margin-top: 383px;
        }
        #tabela1 a{
        text-decoration:none;
        color:#000;
        }
        body{
        background: rgb(0, 0, 0) url("http://2.bp.blogspot.com/-Q3vZ1KnYRPI/TtSD0nTJsGI/AAAAAAAAAXU/cfGRgdZrTJU/s1600/armageddon29zbastroid.jpg") repeat;
        color: #5a5a5a;
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        padding-bottom: 20px;
        background-repeat: no-repeat;
      background-size: 100pc;
        }
        .conectado {
        margin-top: -2.9%;
        margin-left: 6%;
        position: absolute;
        background: rgba(0, 0, 0, 0.18);
        height: 37px;
        box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        width: 87%;
        }
        .botao {
        font-weight: bold;
        color: white;
        float: left;
        padding: 0 13px 9px 13px;
        line-height: 36px;
        outline: none;
        height: 26px;
        text-decoration: none;
        }
        .botao a {
        color: white;
        text-decoration: none;
        }
        .botao:hover {
        background: rgba(0, 0, 0, 0.1);
        }
        #brunoh {
        background-color: #fbfbfb;
        border: 1px solid rgb(231, 231, 231);
        padding: 6px;
        }
        .redesociais {
        margin-left: 820px;
        margin-top: -288px;
        position: absolute;
        }
      #tabcont-brunoh {
padding: 10px;
width: 600px;
position: absolute;
margin-left: 100px;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
min-height: 100px;
margin-top: -237px;
color: white;
border-radius: 10px;
left: 22pc;
}
        .copyright {
        position: absolute;
        margin-left: 600px;
        margin-top: 264px;
        color: #fff;
        }

div#sennior {
position: relative;
left: -66pc;
top: 9pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
background-color: rgba(139, 139, 139, 0.36);
border-color: rgba(0, 0, 0, 0.19);
border-radius: 6px;
border-style: solid;
border-width: 1px 1px 3px;
box-shadow: inset 0 0 2px rgba(66, 66, 66, 0.76);
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
height: 133px;
}

div#sennior1:hover {
background-color: rgb(63, 63, 63);
padding: 6px;
}
div#sennior2:hover {
background-color: rgb(63, 63, 63);
padding-bottom: 15px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
position:relative;
left:-623px;
}
div#sennior:hover {
background-color: rgb(63, 63, 63);
height: 125px;
padding: 6px;
}
div#sennior1 {
position: relative;
top: 3pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-color: transparent;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
div#sennior2 {
position: relative;
top: 3pc;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
        </style>
<center>
              <link href="http://gameofthrones-845.ah.bpcdn.net/favicon.ico?" type="image/x-icon" rel="shortcut icon" />        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />        <title>Jogo dos Tronos</title>                           
  <div class="redesociais">
        <iframe allowtransparency="true" style="border:none; overflow:hidden; width:300px;" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Ffacebook.com%2FGameOfThronesRpg&app_id&action&max_rows=4&size=medium&show_count=true&width=300&colorscheme=light"> </iframe> 
  </div>
             
  <center>
        <img style=" position: absolute; left: 435px; top: -20px;padding: 0px; width: 40%;" src="http://i.imgur.com/7FXeLMN.png" /> 
      <div id="tabcont-brunoh">
           
        <div style="font-size:17px;display: block;" id="tab1">
             
            <ul>
                Armand Donovan poderia levar sua vida pacata, livre das intrigas da cúpula do Magistrado e do jogo interminável de poder entre Ámon e Capa Branca - membros completamente opostos da Guarda Provincial. Porém, o jovem garoto acabou sendo pego em fogo cruzado, o que acabou o deixando cara a cara com os reais problemas da última cidade viva do planeta terra - Lasttown. Com isso, a oportunidade perfeita para se vingar dos homens que o torturaram e simplesmente desapareceram com sua mãe acabou caindo em suas mãos. O que ninguém esperava, é que o destino aguardava a chance perfeita para balançar mais uma vez o equilibrio do planeta terra. Ninguém está a salvo quando se está em Lasttown. 
            </ul>
             
        </div>
                   
      </div>
       
  </center>
             
  <center>
       
      <div class="menu">
           
        <div id="cssmenu">
                         
            <center>
                 
              <div id="sennior">
                   
                  <div style="display: block;" id="tab1">
                       
                    <ul>
                          <a href="http://www.perse.com.br/novoprojetoperse/WF2_BookDetails.aspx?filesFolder=N1417128192064">Adquira agora seu exemplar!</a> 
                    </ul>
                     
                  </div>
                          </div>   
                  <div id="sennior1">
                       
                    <div style="display: block;" id="tab1">
                         
                        <ul>
                            <a href="http://vertigem.forumeiros.com/portal">Ir para fórum</a> 
                        </ul>
                         
                    </div>
                            </div>   
                    <div id="sennior2">
                         
                        <div style="display: block;" id="tab1">
                             
                          <ul>
                                <a href="LINK PARA ONDE IREMOS AO CLICAR">Contato</a> 
                          </ul>
                             
                        </div>
                           
                    </div>
                       
                       
            </center>
             
        </div>
                             
      </div>
       
      <div class="copyright">
          Copyright ® CJSilveira Isoul Renato Vasconcelos 
      </div>
                 
      <table id="tabela1">
                   
        <tbody>
             
            <tr>
                 
              <td>
                   
                  <center>
                       
                  </center>
                   
              </td>
                 
            </tr>
             
        </tbody>
           
      </table>
       
  </center>
              <a style="display: none;" target="_blank" href="http://www.forumeiros.com"> Fórumeiros</a>
</center>

Até mais.

Sennior, acabei de configurar o código na plataforma e me apareceram dois problemas.

1 - As fotos das pessoas que curtiram a página está por trás da escrita, como voce pode ver (www.vertigem.forumeiros.com)

2 - O efeito do primeiro botão, quando o mouse está sobre ele, deixa todos os trÊs botões escuros. Eu queria que ficasse apenas aquele selecionado. ASsim como estão os outros dois.

Boas,

Veja se gosta assim:

Código:


<br /><meta content="text/html;charset=utf-8" http-equiv="Content-Type" />                          <style>
        <!----------------------------------------------- Créditos: -----------------------------------------------!>
        Está página foi desenvolvida por BrunoH. - Web Designer e Programador
        Nome: BrunoH. Páginas HTML
        Autor: BrunoH.
        Link: http://brunohweb.tk/
        Data: 11/07/2013
        A Copia desta página sem autorização do autor, poderá ser processado pois a página contem direitos autorais reservados!
        <!-------------------------------- Não retire os créditos - @copyright 2013 -------------------------------!>








        hr {
        border-color: #fff;
        }
        #top5 {
        display:none;
        position: fixed;
        left: 86.6%;
        top: 97%;
        color: #73AAFD;
        font-family: "Courier New", Courier, monospace font-size:14px;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        opacity: 0.7;
        -webkit-transition-duration: 1s;
        background: rgb(27, 27, 27);
        width: 20%;
        -webkit-box-shadow: rgb(255, 255, 255) 1px 1px 6px;
        }
        #top5:hover {
        height: 80%;
        top: 47%;
        opacity: 1;
        }
        #topo1 {
        position: absolute;
        left: 81%;
        top: 1.5%;
        color: rgb(211, 211, 211);
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        }
        #topo2ip {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2 {
        position: absolute;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 98%;
        -webkit-transition-duration: 1s;
        border-bottom: 1px solid rgba(255, 255, 255, 0.53);
        padding: 4px;
        }
        #RaidCallDESATIVADO {
        position: absolute;
        top: 1.5%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        background: transparent;
        width: 36%;
        -webkit-transition-duration: 1s;
        margin-left: 22%;
        }
        #RaidCall {
        position: absolute;
        left: 81%;
        top: 0%;
        color: #73AAFD;
        font-weight: bold;
        text-shadow: black 0.15em 0.15em 0.2em;
        -webkit-transition-duration: 1s;
        padding: 4px;
        }
        #RaidCallID {
        color: rgb(214, 214, 214);
        display: inline;
        }
        #topo2:hover {opacity: 1;}
        #cssmenu ul,
        #cssmenu li,
        #cssmenu span,
        #cssmenu a {
          margin: 0;
          padding: 0;
          position: relative;
        }
        #cssmenu {
        height: 49px;
        background: transparent;
        margin-left: 80%;
        margin-top: -10%;
        width: 17%!important;
        }
        #cssmenu:after,
        #cssmenu ul:after {
          content: '';
          display: block;
          clear: both;
        }
        #cssmenu a {
        background: transparent;
        color: #fff;
        display: inline-block;
        font-family: Game of Thrones;
        line-height: 35px;
        padding: 0 20px;
        text-decoration: none;
        border-radius: 3px;
        font-size: 20px;
        margin-left: 5px;
        }
        #cssmenu ul {
          list-style: none;
        }
        #cssmenu > ul {
          float: left;
        }
        #cssmenu > ul > li {
          float: center;
        }
        #cssmenu > ul > li:hover:after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          left: 50%;
          bottom: 0;
        }
        #cssmenu > ul > li:hover > a {
        color: rgba(255, 255, 255, 0.55);
        }
        #cssmenu .has-sub {
          z-index: 1;
        }
        #cssmenu .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub ul {
          display: none;
          position: absolute;
          width: 200px;
          top: 100%;
          left: 0;
        }
        #cssmenu .has-sub ul li {
          *margin-bottom: -1px;
        }
        #cssmenu .has-sub ul li a {
          background: #0fa1e0;
          border-bottom: 1px dotted #6fc7ec;
          filter: none;
          font-size: 11px;
          display: block;
          line-height: 120%;
          padding: 10px;
        }
        #cssmenu .has-sub ul li:hover a {
          background: #0c7fb0;
        }
        #cssmenu .has-sub .has-sub:hover > ul {
          display: block;
        }
        #cssmenu .has-sub .has-sub ul {
          display: none;
          position: absolute;
          left: 100%;
          top: 0;
        }
        #cssmenu .has-sub .has-sub ul li a {
          background: #0c7fb0;
          border-bottom: 1px dotted #6db2d0;
        }
        #cssmenu .has-sub .has-sub ul li a:hover {
          background: #095c80;
        }
        .menu {
        width: 87.2%;
        background: transparent;
        margin-top: 4%;
        position: absolute;
        margin-left: 5%;
        padding: 10px;
        -webkit-border-radius: 7px 7px 0px 0;
        color:#fff;
        }
        .menu a{
        transition:all linear 0.5s;
        -moz-transition:all linear 0.5s;
        -webkit-moz-trasition:all linear 0.5s;
        font-weight:bold;
        color:#999999;
        margin-right:35px;
        text-decoration:none;
        }
        #tabela1 {
        background: transparent;
        width: 1%;
        float: center;
        height: 1%;
        margin-top: 383px;
        }
        #tabela1 a{
        text-decoration:none;
        color:#000;
        }
        body{
        background: rgb(0, 0, 0) url("http://2.bp.blogspot.com/-Q3vZ1KnYRPI/TtSD0nTJsGI/AAAAAAAAAXU/cfGRgdZrTJU/s1600/armageddon29zbastroid.jpg") repeat;
        color: #5a5a5a;
        font: normal 11px tahoma,helvetica,arial,sans-serif;
        padding-bottom: 20px;
        background-repeat: no-repeat;
      background-size: 100pc;
        }
        .conectado {
        margin-top: -2.9%;
        margin-left: 6%;
        position: absolute;
        background: rgba(0, 0, 0, 0.18);
        height: 37px;
        box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        width: 87%;
        }
        .botao {
        font-weight: bold;
        color: white;
        float: left;
        padding: 0 13px 9px 13px;
        line-height: 36px;
        outline: none;
        height: 26px;
        text-decoration: none;
        }
        .botao a {
        color: white;
        text-decoration: none;
        }
        .botao:hover {
        background: rgba(0, 0, 0, 0.1);
        }
        #brunoh {
        background-color: #fbfbfb;
        border: 1px solid rgb(231, 231, 231);
        padding: 6px;
        }
        .redesociais {
        margin-left: 820px;
        margin-top: -288px;
        position: absolute;
        }
      #tabcont-brunoh {
padding: 10px;
width: 600px;
position: absolute;
margin-left: 100px;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
min-height: 100px;
margin-top: -237px;
color: white;
border-radius: 10px;
left: 22pc;
}
        .copyright {
        position: absolute;
        margin-left: 600px;
        margin-top: 264px;
        color: #fff;
        }


div#soufoda {
position: relative;
left: -39pc;
top: 9pc;
-webkit-transition: background-color 0.5s;
transition: background-color 0.5s;
background-color: rgba(139, 139, 139, 0.360784);
border-color: rgba(0, 0, 0, 0.188235);
border-radius: 6px;
border-style: solid;
border-width: 1px 1px 3px;
box-shadow: rgba(66, 66, 66, 0.760784) 0px 0px 2px inset;
color: rgb(249, 249, 249);
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
width: 19pc;
height: 123px;
}
div#sennior1:hover {
background-color: rgb(63, 63, 63);
padding: 6px;
}
div#sennior2:hover {
background-color: rgb(63, 63, 63);
padding-bottom: 11px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
position: relative;
left: -623px;
}
div#sennior:hover {
background-color: rgb(63, 63, 63);
padding: 6px;
}
div#sennior1 {
position: relative;
top: 13px;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-color: transparent;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
div#sennior4:hover {
background-color: rgb(63, 63, 63);
padding: 6px;
}
div#sennior4 {
position: relative;
top: 13px;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-color: transparent;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
div#sennior2 {
position: relative;
top: 13px;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
border-width: 1px 1px 3px;
color: #F9F9F9;
display: block;
font-size: 14px;
font-weight: 700;
padding: 3px 6px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
transition: background-color .5s;
width: 19pc;
left: -39pc;
}
        </style>
<center>
              <link href="http://gameofthrones-845.ah.bpcdn.net/favicon.ico?" type="image/x-icon" rel="shortcut icon" />        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />        <title>Jogo dos Tronos</title>                           
  <div class="redesociais">
        <iframe allowtransparency="true" style="position:relative;top:21pc;left:-140px;border:none; overflow:hidden; width:300px;" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Ffacebook.com%2FGameOfThronesRpg&app_id&action&max_rows=4&size=medium&show_count=true&width=300&colorscheme=light"> </iframe> 
  </div>
             
  <center>
        <img style=" position: absolute; left: 435px; top: -20px;padding: 0px; width: 40%;" src="http://i.imgur.com/7FXeLMN.png" /> 
      <div id="tabcont-brunoh">
           
        <div style="font-size:17px;display: block;" id="tab1">
             
            <ul>
                Armand Donovan poderia levar sua vida pacata, livre das intrigas da cúpula do Magistrado e do jogo interminável de poder entre Ámon e Capa Branca - membros completamente opostos da Guarda Provincial. Porém, o jovem garoto acabou sendo pego em fogo cruzado, o que acabou o deixando cara a cara com os reais problemas da última cidade viva do planeta terra - Lasttown. Com isso, a oportunidade perfeita para se vingar dos homens que o torturaram e simplesmente desapareceram com sua mãe acabou caindo em suas mãos. O que ninguém esperava, é que o destino aguardava a chance perfeita para balançar mais uma vez o equilibrio do planeta terra. Ninguém está a salvo quando se está em Lasttown. 
            </ul>
             
        </div>
                   
      </div>
       
  </center>
             
  <center>
       
      <div class="menu">
           
        <div id="cssmenu">
                         
            <center>
                 
              <div id="Soufoda"></div> <div id="sennior4">
                   
                  <div style="display: block;" id="tab1">
                       
                    <ul>
                          <a href="http://www.perse.com.br/novoprojetoperse/WF2_BookDetails.aspx?filesFolder=N1417128192064">Adquira agora seu exemplar!</a> 
                    </ul>
                     
                  </div>
                          </div>   
                  <div id="sennior1">
                       
                    <div style="display: block;" id="tab1">
                         
                        <ul>
                            <a href="http://vertigem.forumeiros.com/portal">Ir para fórum</a> 
                        </ul>
                         
                    </div>
                            </div>   
                    <div id="sennior2">
                         
                        <div style="display: block;" id="tab1">
                             
                          <ul>
                                <a href="LINK PARA ONDE IREMOS AO CLICAR">Contato</a> 
                          </ul>
                             
                        </div>
                           
                    </div>
                     
                       
            </center>
             
        </div>
                             
      </div>
       
      <div class="copyright">
          Copyright ® CJSilveira Isoul Renato Vasconcelos 
      </div>
                 
      <table id="tabela1">
                   
        <tbody>
             
            <tr>
                 
              <td>
                   
                  <center>
                       
                  </center>
                   
              </td>
                 
            </tr>
             
        </tbody>
           
      </table>
       
  </center>
              <a style="display: none;" target="_blank" href="http://www.forumeiros.com"> Fórumeiros</a>
</center>

Até mais.

Ficou perfeito Sennior. Muito obrigado ! Você é fera!