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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como eu faço para encontrar uma equipe?
Hoje à(s) 02:19 am por mrvisible

» Personalizar posts
Hoje à(s) 12:19 am por Harleen

» Mostrar usuário do post
Ontem à(s) 08:27 pm por rlmac

» Como fazer sub entrada?
Ontem à(s) 08:07 pm por Harleen

» Como trasnferir um site do wix para forumeiros?
Ontem à(s) 07:33 pm por Shek

» Best Skins | as melhores skins você encontra aqui.
Ontem à(s) 06:48 pm por Dr.

» Widget melhor do mês não funciona
Ontem à(s) 05:03 pm por Kyo Panda

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Shek
 
Luiz
 
APOllO
 
Kyko
 
mrvisible
 
odelgado
 
iScroll
 
rlmac
 

Quem está conectado
240 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 237 Visitantes :: 2 Motores de busca

IsmaelS., mrvisible, Pedxz

[ 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 : 1576
Pontos Ativos : 2419

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/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4445

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 : 1576
Pontos Ativos : 2419

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/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4445

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 : 1576
Pontos Ativos : 2419

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/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4445

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.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4445

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