Como organizar o tablon dessa forma:
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Como organizar o tablon dessa forma:
Detalhes da questão
Endereço do fórum: thehunterpg.forumeiros.com
Versão do fórum: PunBB
Descrição
Olá, gostaria de saber como organizar o o tablon de anuncio da seguinte maneira:
Como podem ver, há varias "áreas de texto", que estão organizadas uma dividida da outra... e como está "destacado" ali em vermelho, quando se põe o mouse aparece aquele texto..além de deixar imagens em branco como logo acima em awards..
Última edição por Shiut em 28.10.15 23:50, editado 1 vez(es)
Re: Como organizar o tablon dessa forma:
Se podesse fornecer o link do forum onde viu isso seria muito + facil e mais rapido ajudar vc ^^
Re: Como organizar o tablon dessa forma:
RJUchiha escreveu:Se podesse fornecer o link do forum onde viu isso seria muito + facil e mais rapido ajudar vc ^^
Nesse fórum: http://tlcrpg.forumeiros.com/forum
Re: Como organizar o tablon dessa forma:
Olá @Shiut!
Cá está o código:
Até mais.
Fraise
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
Cá está o código:
- Código:
<style>
.tlcanunciosubtitles {
font: 18px Dosis;
color: #cccccc;
padding-left: 3px;
margin-bottom: 2px;
margin-top: 2px;
font-variant: small-caps;
}
.tlcanunciocaixa3 {
width: 310px;
height: 275px;
background-color: transparent;
}
.awardstemp {
display: inline-block;
position: relative;
}
.awardstemp a {
display: block;
position: absolute;
width: 80px;
height: 80px;
background-color: #fafafa;
background-size: 100px;
opacity: 0;
font: 11px trebuchet ms;
color: #333333;
padding: 10px;
text-align: center;
text-decoration: none;
-webkit-transition: all .3s;
transition: all .3s;
}
.awardstemp a:hover {
opacity: 0.6;
background-position: 95% 85%;
}
</style>
<td>
<div class="tlcanunciosubtitles" style="width:310px;">
Administração
</div>
<div class="tlcanunciocaixa3">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor">
<br>
<y>OHEN</y>
<br>
<br>Administrador Geral</a> <img src="http://i.imgur.com/MGBBZbS.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor">
<br>
<y>DANORUM</y>
<br>
<br>Administrador Geral</a> <img src="http://i.imgur.com/R5to0eM.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor">
<br>
<y>NARRADOR</y>
<br>
<br>Contador de Histórias</a> <img src="http://i.imgur.com/YDGZovi.gif">
</div>
</td>
</tr>
</tbody>
</table>
</center>
Até mais.
Fraise
Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
Re: Como organizar o tablon dessa forma:
E quanto aos outros recursos bem divididos como está no template? me interessei também pela formatação do mesmo.
Re: Como organizar o tablon dessa forma:
Não entendi, senhor. Poderia explicar melhor o que deseja agora?
Até mais.
Fraise
Até mais.
Fraise
Re: Como organizar o tablon dessa forma:
Fraise escreveu:Não entendi, senhor. Poderia explicar melhor o que deseja agora?
Até mais.
Fraise
O tablon ta bem dividido, em cima tem a imagem da copa das casas, embaixo uma breve trama do Rpg, ao lado os administradores e o espaço de imagem para o awards, ao lado está o torneio intercasas e embaixo um painel de noticias e eventos.. gostaria de saber se teriam como dividir o meu tablon dessa mesma forma, sem precisar de abas... tudo em uma unica "aba" e dividido nela... olhe a quantidade de conteúdo que tem ali e bem dividido.
Re: Como organizar o tablon dessa forma:
Embaixo deixo o codigo completo,se precisar de editar alguma parte do codigo e não consiga esstarei aqui para ajudar ^^
- Código:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><center>
<div class="tlcanunciotitle">
</div>
<table>
<tbody>
<tr>
<td>
<div class="tlcanunciosubtitles" style="width:250px;">
Titulo 1
</div>
<div class="tlcanunciocaixa">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ff3333;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#338533;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ffff99;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#4d4dff;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:400px;">
<center>
Titulo 2
</center>
</div>
<div class="tlcanunciocaixa2">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>POSTADOR DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>ALUNO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>FUNCIONÁRIO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
</tr>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>AVENTUREIRO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>DUELISTA DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>MALVADO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:210px;padding-left:40px;">
Titulo 3
</div>
<div class="tlcanunciocaixa">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ff3333;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#338533;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ffff99;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#4d4dff;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td>
<div class="tlcanunciosubtitles" style="width:340px;">
Titulo 4
</div>
<div class="tlcanunciotext">
Texto Grande
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:310px;">
Administração
</div>
<div class="tlcanunciocaixa3">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>Nick do Admin</y><br><br>Administrador Geral</a> <img src="http://i.imgur.com/MGBBZbS.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>Nick do Admin</y><br><br>Administrador Geral</a> <img src="http://i.imgur.com/R5to0eM.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>NARRADOR</y><br><br>Contador de Histórias</a> <img src="http://i.imgur.com/YDGZovi.gif">
</div>
</td>
</tr>
</tbody>
</table>
</center><br><br>
<div class="tlcanunciosubtitles" style="width:310px;">
Créditos
</div>
<div class="tlcanunciotext2">
<center>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/br/deed.pt_BR"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/2.5/br/88x31.png"></a>
</center><br>Imagens retiradas da internet e editadas pela administração. Descrições e trama de criação dos administradores. Códigos principais e deste template por <a href="http://www.facebook.com/ykarlor">Yan Karlor</a>
</div>
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:200px;">
Anúncios e Notícias
</div>
<div class="tlcanuncioaen">
<a href="/">Festa de Halloween em Hogwarts</a><br>A partide de 15.09 até 22.09<br><br> <a href="http://tlcrpg.forumeiros.com/g26-1-ano">Grupo do Primeiro Ano</a><br>Alunos iniciantes, adentrem esse grupo<br><br> <a href="http://tlcrpg.forumeiros.com/f15-cargos">Lista de Cargos</a><br>Vagas para todos os cargos<br><br> <a href="http://tlcrpg.forumeiros.com/t1862-ato-00-mudanca-de-planos">Atividades da Trama</a><br>Começamos com a trama, dê uma olhada<br><br> <a href="http://tlcrpg.forumeiros.com/t78-escola-de-magia-e-bruxaria-de-hogwarts">Vagas para Hogwarts</a><br>Vagas Urgentes<br><br> <a href="http://tlcrpg.forumeiros.com/t694-comensais-da-morte">Precisa-se de Malvados</a><br>Vagas Urgentes para Comensal da Morte<br><br> <a href="http://tlcrpg.forumeiros.com/t79-ministerio-da-magia">O Ministério Quer Você!</a><br>Vagas Urgentes para Ministeriais<br><br> <a href="http://tlcrpg.forumeiros.com/t1835-a-trama-oficial">A Trama</a><br>Acompanhe o andamento de nossa trama<br><br> <a href="https://www.facebook.com/tlcrpg">Facebook</a><br>Curta nosso grupo no Facebook<br><br>
</div>
</td>
</tr>
</tbody>
</table>
<div class="tlcanunciotitleend">
</div>
</center><link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/81529874/Stylesheets/sheettemplateanuncios.css"></div></td></tr></tbody></table>
Re: Como organizar o tablon dessa forma:
Tente este código básico:
Coloque isto na folha de estilo CSS:
Cumprimentos.
Cutie Tuteur
- Código:
<td>
<div class="tlcanunciosubtitles" style="width:310px;">
Administração
</div>
<div class="tlcanunciocaixa3">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>OHEN</y><br><br>Administrador Geral</a> <img src="http://i.imgur.com/MGBBZbS.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>DANORUM</y><br><br>Administrador Geral</a> <img src="http://i.imgur.com/R5to0eM.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>NARRADOR</y><br><br>Contador de Histórias</a> <img src="http://i.imgur.com/YDGZovi.gif">
</div>
</td>
</tr>
</tbody>
</table>
</center><br><br>
<div class="tlcanunciosubtitles" style="width:310px;">
Créditos
</div>
<div class="tlcanunciotext2">
<center>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/br/deed.pt_BR"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/2.5/br/88x31.png"></a>
</center><br>Imagens retiradas da internet e editadas pela administração. Descrições e trama de criação dos administradores. Códigos principais e deste template por <a href="http://www.facebook.com/ykarlor">Yan Karlor</a>
</div>
</div>
</td>
Coloque isto na folha de estilo CSS:
- Código:
.tlcanunciosubtitles {
font: 18px Dosis;
color: #cccccc;
padding-left: 3px;
margin-bottom: 2px;
margin-top: 2px;
font-variant: small-caps;
}
.tlcanunciocaixa3 {
width: 310px;
height: 275px;
background-color: transparent;
}
.awardstemp {
display: inline-block;
position: relative;
}
.awardstemp a {
display: block;
position: absolute;
width: 80px;
height: 80px;
background-color: #fafafa;
background-size: 100px;
opacity: 0;
font: 11px trebuchet ms;
color: #333333;
padding: 10px;
text-align: center;
text-decoration: none;
-webkit-transition: all .3s;
transition: all .3s;
}
.awardstemp a:hover {
opacity: 0.6;
background-position: 95% 85%;
}
Cumprimentos.
Cutie Tuteur
Re: Como organizar o tablon dessa forma:
RJUchiha escreveu:Embaixo deixo o codigo completo,se precisar de editar alguma parte do codigo e não consiga esstarei aqui para ajudar ^^
- Código:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody><tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><center>
<div class="tlcanunciotitle">
</div>
<table>
<tbody>
<tr>
<td>
<div class="tlcanunciosubtitles" style="width:250px;">
Titulo 1
</div>
<div class="tlcanunciocaixa">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ff3333;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#338533;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ffff99;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#4d4dff;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:400px;">
<center>
Titulo 2
</center>
</div>
<div class="tlcanunciocaixa2">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>POSTADOR DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>ALUNO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>FUNCIONÁRIO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
</tr>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>AVENTUREIRO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>DUELISTA DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><y>MALVADO DO MÊS</y><br><br>Nome da personagem</a> <img src="http://placehold.it/100x100">
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:210px;padding-left:40px;">
Titulo 3
</div>
<div class="tlcanunciocaixa">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ff3333;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#338533;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
<tr>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#ffff99;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
<td>
<div class="awardstemp2">
<a href="/"><span style="color:#4d4dff;">Texto</span></a> <img src="link_da_imagem" style="width: 100px; height: 100px;">
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<tbody>
<tr>
<td>
<div class="tlcanunciosubtitles" style="width:340px;">
Titulo 4
</div>
<div class="tlcanunciotext">
Texto Grande
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:310px;">
Administração
</div>
<div class="tlcanunciocaixa3">
<center>
<table>
<tbody>
<tr>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>Nick do Admin</y><br><br>Administrador Geral</a> <img src="http://i.imgur.com/MGBBZbS.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>Nick do Admin</y><br><br>Administrador Geral</a> <img src="http://i.imgur.com/R5to0eM.gif">
</div>
</td>
<td>
<div class="awardstemp">
<a href="link do perfil do vencedor"><br><y>NARRADOR</y><br><br>Contador de Histórias</a> <img src="http://i.imgur.com/YDGZovi.gif">
</div>
</td>
</tr>
</tbody>
</table>
</center><br><br>
<div class="tlcanunciosubtitles" style="width:310px;">
Créditos
</div>
<div class="tlcanunciotext2">
<center>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/br/deed.pt_BR"><img alt="Licença Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/2.5/br/88x31.png"></a>
</center><br>Imagens retiradas da internet e editadas pela administração. Descrições e trama de criação dos administradores. Códigos principais e deste template por <a href="http://www.facebook.com/ykarlor">Yan Karlor</a>
</div>
</div>
</td>
<td>
<div class="tlcanunciosubtitles" style="width:200px;">
Anúncios e Notícias
</div>
<div class="tlcanuncioaen">
<a href="/">Festa de Halloween em Hogwarts</a><br>A partide de 15.09 até 22.09<br><br> <a href="http://tlcrpg.forumeiros.com/g26-1-ano">Grupo do Primeiro Ano</a><br>Alunos iniciantes, adentrem esse grupo<br><br> <a href="http://tlcrpg.forumeiros.com/f15-cargos">Lista de Cargos</a><br>Vagas para todos os cargos<br><br> <a href="http://tlcrpg.forumeiros.com/t1862-ato-00-mudanca-de-planos">Atividades da Trama</a><br>Começamos com a trama, dê uma olhada<br><br> <a href="http://tlcrpg.forumeiros.com/t78-escola-de-magia-e-bruxaria-de-hogwarts">Vagas para Hogwarts</a><br>Vagas Urgentes<br><br> <a href="http://tlcrpg.forumeiros.com/t694-comensais-da-morte">Precisa-se de Malvados</a><br>Vagas Urgentes para Comensal da Morte<br><br> <a href="http://tlcrpg.forumeiros.com/t79-ministerio-da-magia">O Ministério Quer Você!</a><br>Vagas Urgentes para Ministeriais<br><br> <a href="http://tlcrpg.forumeiros.com/t1835-a-trama-oficial">A Trama</a><br>Acompanhe o andamento de nossa trama<br><br> <a href="https://www.facebook.com/tlcrpg">Facebook</a><br>Curta nosso grupo no Facebook<br><br>
</div>
</td>
</tr>
</tbody>
</table>
<div class="tlcanunciotitleend">
</div>
</center><link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/81529874/Stylesheets/sheettemplateanuncios.css"></div></td></tr></tbody></table>
Será que poderia me fazewr um favor antes de fechar? rs... Poderia me mostrar como editar a cor daquela barra cinza em cima do tablon? tanto a de cima como a de baixo, segue o print abaixo:
http://prntscr.com/8whpj5
Re: Como organizar o tablon dessa forma:
Basta utilizar este CSS:
Até mais.
- Código:
.tlcanunciotitle { border-bottom-color: COR AQUI !important; }
Até mais.
Re: Como organizar o tablon dessa forma:
Segue o print:Fraise escreveu:Basta utilizar este CSS:
- Código:
.tlcanunciotitle { border-bottom-color: COR AQUI !important; }
Até mais.
http://prnt.sc/8wi0k9
O código apenas edita a parte em vermelho, e não edita a que ta em amarelo, sendo que quero editar toda a parte em azul.. Grato. pela resposta até aqui ^^.
Re: Como organizar o tablon dessa forma:
Troque por este:
Até mais.
Fraise
- Código:
.tlcanunciotitle { border-bottom-color: COR AQUI !important; background: COR AQUI !important; }
Até mais.
Fraise
Re: Como organizar o tablon dessa forma:
Fraise escreveu:Troque por este:
- Código:
.tlcanunciotitle { border-bottom-color: COR AQUI !important; background: COR AQUI !important; }
Até mais.
Fraise
As duas cores de cima mudaram, mas as do final do tablon continuam.
Re: Como organizar o tablon dessa forma:
Veja se está tudo agora:
Até mais.
Fraise
- Código:
.tlcanunciotitleend { border-bottom-color: COR AQUI !important; background: COR AQUI !important; }
Até mais.
Fraise
Re: Como organizar o tablon dessa forma:
agora foi, muito obrigado ^^.
Tópicos semelhantes
» Como colocar ultimos assuntos dessa forma
» Avatar na última resposta dessa forma
» Como organizar as categorias como forumeiros e voce
» Como coloco dessa cor?
» Como eu personalizo a palavra chave dessa forma?
» Avatar na última resposta dessa forma
» Como organizar as categorias como forumeiros e voce
» Como coloco dessa cor?
» Como eu personalizo a palavra chave dessa forma?
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos