Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Kit avatar e assinatura.
Hoje à(s) 01:37 am por ranzatti

» Efeito nos grupos
Hoje à(s) 12:17 am por Matt Shultz

» PAGINA HTML
Hoje à(s) 12:08 am por T1ag0

» Concurso do Dia das Bruxas: Vossas participações
Ontem à(s) 11:05 pm por iScroll

» Logo fixo
Ontem à(s) 10:50 pm por iScroll

» Logo para um fórum
Ontem à(s) 10:36 pm por Hyouran

» Rank para o meu fórum
Ontem à(s) 10:33 pm por Matt Shultz

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Matt Shultz
 
iScroll
 
Harleen
 
Ketholy123
 
T1ag0
 
PlayWillian
 
zHugh
 
soldado
 
Lecxa
 

Quem está conectado
176 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 175 Visitantes :: 2 Motores de busca

soldado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Criar um menu igual esse

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

Resolvido Criar um menu igual esse

Mensagem por EDU2010 em 18/04/17, 10:32 pm

Detalhes da questão


Endereço do fórum: http://www.criadoresdepassaros.com
Versão do fórum: phpBB2

Descrição


Criar um menu igual esse , claro eu vou editar pro meu Fórum

avatar

EDU2010
Membro do Fórum

Masculino
Inscrito dia : 09/12/2010
Mensagens : 1643
Pontos Ativos : 2522

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Resolvido Re: Criar um menu igual esse

Mensagem por Luiz em 19/04/17, 02:44 pm

Olá,

Não posso fazer igual, pois é um código exclusivo do FdF.
O resto, creio que o senhor poderá personalizar à seu gosto. Feliz

---

Coloque o código a seguir na mensagem da página inicial:
Código:
<div class="fa-main-menu">
   <style type="text/css">
      .fa-main-menu {
         background-color: transparent;
         border: solid 1px #ddd;
         border-radius: 4px;
         width: 90%;
         margin: 0 auto;
         padding: 20px;
         margin: 0px;
      }
      .fa-main-menu * {
         box-sizing: border-box;
      }
      .fa-main-menu .cards {
         text-align: center;
      }
      .fa-main-menu .cards a {
         background-color: #39c;
         width: 30%;
         height: 80px;
         display: inline-block;
         font-size: 30px;
         color: #fff;
         font-weight: bold;
         line-height: 80px;
         text-decoration: none;
      }
      .fa-main-menu .fa-box {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-pack: distribute;
               justify-content: space-around;
         margin: 30px 0px;
      }
      .fa-main-menu .fa-box div.box-1,
      .fa-main-menu .fa-box div.box-2 {
         background-color: #39c;
         color: #fff;
         padding: 10px;
      }
      .fa-main-menu .fa-box div.box-1 ul,
      .fa-main-menu .fa-box div.box-2 ul {
         background-color: #fff;
         color: #555;
         margin: 10px;
      }
      .fa-main-menu .fa-box div.box-1 h1,
      .fa-main-menu .fa-box div.box-2 h1 {
         margin-left: 10px;
         font-size: 22px;
      }
      .fa-main-menu .fa-box .box-1 {
         width: 25%;
      }
      .fa-main-menu .fa-box .box-2 {
         width: 65%;
         float: left;
      }
   </style>
   <div class="cards">
      <a href="CARD_1_LINK">CARD 1</a>
      <a href="CARD_2_LINK">CARD 2</a>
      <a href="CARD_3_LINK">CARD 3</a>
   </div>
   <div class="fa-box">
      <div class="box-1">
         <h1>Título 01</h1>
         <ul>
            <li>Anúncio</li>
            <li>Anúncio</li>
            <li>Anúncio</li>
            <li>Anúncio</li>
            <li>Anúncio</li>
         </ul>
      </div>
      <div class="box-2">
         <h1>Título 02</h1>
         <ul>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
         </ul>
      </div>
   </div>
</div>

o/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Criar um menu igual esse

Mensagem por EDU2010 em 19/04/17, 03:31 pm

Entendo , poderia colocar as partes de cima com cores , do quadro onde esta CARD1 2 e 3 , e também onde esta oos escritos anuncios colocar como eu coloco linke nos anucios que irei fazer .


olha meu codigo atual

queria que ele fosse personalizado com estas melhorias

Código:
<table style="padding: 3px 3px 0px; font-size: 0.9em; margin-bottom: 0px; width: 90%;">
                                                                                              
   <tbody>
                                                                                                         
      <tr valign="top">
                                                                                                                
         <td>
                                                                    <strong>Ajuda aos Usuarios:</strong><br /><a href="http://www.criadoresdepassaros.com/t27897-tutorial-como-fazer-uma-pergunta-no-forum-criadores-de-passaros#218959"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" />  Como criar um Tópico</a><br /><a href="http://www.criadoresdepassaros.com/t5-regras-de-conduta#214417"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Regras do fórum</a><br /><a href="http://www.criadoresdepassaros.com/t28062-como-perguntar-termos-a-serem-usados-leiam-com-atencao#220019"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Como perguntar </a><br /><a href="http://www.criadoresdepassaros.com/f35-artigos-tecnicos-referente-a-saude-dos-passarosi"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" />  Artigos sobre criação e saúde</a><br /><a href="../t0-"><img src="http://illiweb.com/fa/empty.gif" />  </a>                                                   
         </td>
                                                                                                                  
         <td>
                                                                    <strong>Seções do fórum:</strong><br /><a href="http://www.criadoresdepassaros.com/f13-doencas-e-medicamentos"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" />  Doenças e Medicamentos</a><br /><a href="http://www.criadoresdepassaros.com/f28-truques-e-dicas"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Dicas e Truques</a><br /> <a "="" href="http://www.criadoresdepassaros.com/t27920-participem-da-concurso-foto-e-video-do-mes#219030"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Fotos e Videos do Mes </a><br /><a "="" href="http://www.criadoresdepassaros.com/t21631-artigo-reproducao-de-aves-eduardo-machado#178429"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Como reproduzir Pássaros </a><br /><a href="../t0-"><img src="http://illiweb.com/fa/empty.gif" />  </a>                                                   
         </td>
                                                                                                                  
         <td>
                                                                    <strong>Antes de postar uma dúvida:</strong><br /><a href="http://www.criadoresdepassaros.com/search"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" />  Função busca</a><br /><a href="http://www.criadoresdepassaros.com/f45-duvidas-frequentes-pesquise-aqui/-t23.htm"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" />  Perguntas e respostas frequêntes</a><br /><a href="http://www.criadoresdepassaros.com/t27917-como-fazer-sua-apresentacao-nos-criadores-de-passaros#219019"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Faça sua apresentação</a><br /><a href="http://www.criadoresdepassaros.com/t2143-missao-visao-e-valores-do-forum"><img src="http://r21.imgfast.net/users/2612/28/77/07/smiles/633772.png" /> Missão ,Visão e Valores</a><br />                                       
         </td>
                                                                        
         <td>
                                          <a href="http://www.ibama.gov.br/" target="”new”"><img style="width: 100px; height: 100px; margin-right: -75px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Logo_IBAMA.svg/2000px-Logo_IBAMA.svg.png" /></a>                               
         </td>
                                                                                                        
      </tr>
                                                                                               
   </tbody>
</table>
<div style="text-align: center;">
                                               <br />
</div>
 <script type="text/javascript" language="JavaScript" charset="iso-8859-1" src="http://www.devocionaldiario.com.br/versicle.js"></script>       
avatar

EDU2010
Membro do Fórum

Masculino
Inscrito dia : 09/12/2010
Mensagens : 1643
Pontos Ativos : 2522

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Resolvido Re: Criar um menu igual esse

Mensagem por Luiz em 19/04/17, 03:34 pm

EDU2010 escreveu:Entendo , poderia colocar as partes de cima com cores [...]
Não entendi muito bem o que o senhor pediu acima.

Para mudar os links, procure por:
Código:
      <a href="CARD_1_LINK">CARD 1</a>
      <a href="CARD_2_LINK">CARD 2</a>
      <a href="CARD_3_LINK">CARD 3</a>

E altere o link, entre as aspas do atributo
href
.

o/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Criar um menu igual esse

Mensagem por EDU2010 em 19/04/17, 07:31 pm

eu queria apenas esta parte dele .

Segue imagem



avatar

EDU2010
Membro do Fórum

Masculino
Inscrito dia : 09/12/2010
Mensagens : 1643
Pontos Ativos : 2522

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Resolvido Re: Criar um menu igual esse

Mensagem por Luiz em 19/04/17, 07:33 pm

Troque por:
Código:
<div class="fa-main-menu">
  <style type="text/css">
      .fa-main-menu {
        background-color: transparent;
        border: solid 1px #ddd;
        border-radius: 4px;
        width: 90%;
        margin: 0 auto;
        padding: 20px;
        margin: 0px;
      }
      .fa-main-menu * {
        box-sizing: border-box;
      }
      .fa-main-menu .cards {
        text-align: center;
      }
      .fa-main-menu .cards a {
        background-color: #39c;
        width: 30%;
        height: 80px;
        display: inline-block;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        line-height: 80px;
        text-decoration: none;
      }
      .fa-main-menu .fa-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
              justify-content: space-around;
        margin: 30px 0px;
      }
      .fa-main-menu .fa-box div.box-1,
      .fa-main-menu .fa-box div.box-2 {
        background-color: #39c;
        color: #fff;
        padding: 10px;
      }
      .fa-main-menu .fa-box div.box-1 ul,
      .fa-main-menu .fa-box div.box-2 ul {
        background-color: #fff;
        color: #555;
        margin: 10px;
      }
      .fa-main-menu .fa-box div.box-1 h1,
      .fa-main-menu .fa-box div.box-2 h1 {
        margin-left: 10px;
        font-size: 22px;
      }
      .fa-main-menu .fa-box .box-1 {
        width: 25%;
      }
      .fa-main-menu .fa-box .box-2 {
        width: 65%;
        float: left;
      }
  </style>
  <div class="cards">
      <a href="CARD_2_LINK">CARD 2</a>
      <a href="CARD_3_LINK">CARD 3</a>
  </div>
  <div class="fa-box">
      <div class="box-2">
        <h1>Título 02</h1>
        <ul>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
            <li>Anúncio Anúncio Anúncio Anúncio</li>
        </ul>
      </div>
  </div>
</div>

o/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Criar um menu igual esse

Mensagem por Luiz em 23/04/17, 08:07 pm

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5037
Pontos Ativos : 5829

Ver perfil do usuário https://github.com/lffg/

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