Pokémon Shinki Adventures RPG
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

[HTML] Layout 2

2 participantes

Ir para baixo

[HTML] Layout 2 Empty [HTML] Layout 2

Mensagem por Alice Sáb 07 Jun 2014, 19:02

Resultado:

Esse layout é bem simples de ser implementado nos posts. Para começar, precisamos de uma imagem, dessa vez mais comprida do que larga para ter o efeito desejado. Começaremos com este código:

Código:
<div style="text-align:justify; width:75%;margin:0 auto;border-radius:20px;border-right:2px TIPO DE BORDA COR DA BORDA;padding:15px;"><div style="float:left; margin-right:15px; margin-bottom:5px;"><img src=INSIRA A URL DA IMAGEM AQUI width=200></div>

Adicione a url da imagem escolhida na área solicitada para iniciar. Logo depois substitua o texto COR DA BORDA pelo código html da cor desejada. Recomendo que pegue o código neste site.

O texto TIPO DE BORDA deve ser substituído por dotted (pontinhos), dashed (tracejado) ou solid (linha continua). Deixe um espaço em branco entre o tipo de borda e a cor dela.

O código border-radius define o arredondado da borda. Deixei o padrão como 20px, igual ao do exemplo, mas você pode aumentar este número para ter uma borda mais arredondada, ou reduzi-lo para ter uma borda mais reta.

Feitos esses ajustes, digite seu post normalmente. Recomendo que deixe uma linha em branco entre um parágrafo e outro para melhorar a leitura do post e deixar visualmente mais atraente.

Após encerrar o post, adicione o código:
Código:
</div><div style="clear:both;"></div>
para não desconfigurar o layout do fórum e pronto. Layout criado e aplicado.

O que acharam?
Se tiverem dúvidas, basta postar aqui que responderei.
Abraços e boa jornada a todos.
Alice
Alice


Ir para o topo Ir para baixo

[HTML] Layout 2 Empty Re: [HTML] Layout 2

Mensagem por Emme Roinuj Sáb 27 Ago 2016, 23:55

Usei esse e tô amando :3

Já vou com ele nas minhas rotas o/
Emme Roinuj
Emme Roinuj


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos