Como Posicionar Elementos de um Layout com HTML

by - novembro 09, 2013


Olá queridos *--* Espero que estejam super bem! Ah, meu tempo tá super corrido.
Bem, mesmo assim trouxe um tutorial bem simples de posicionar elementos com
apenas html. Tipo, aqui no blog, a imagem do lado direito.
Dessa forma pode ser posicionado qualquer coisa em um layout, por exemplo, 
menus, cabeçalhos, caixas de pesquisa, imagens mapeadas, afiliados/elite, banners,
 textos e outros gadgets que estejam em HTML.

Em seu Layout, adicione um gadget HTML/JavaScript contendo o seguinte código:

<div style="position:absolute;width:0px; height: 0px; margin-left: 0px; top: 0px; background: #cor(url-da-imagem);">
CONTEUDO DO QUE SERÁ POSICIONADO
</div>
  1. position - se refere a como o gadget será posicionado, sendo que absolute indica que não ficará fixo, mas caso queira que seja fixo, isso é, que seja mostrado na tela mesmo ao se mover pela página, troque absolute por fixed.
  2. width e height - se referem a largura e altura da área; no lugar do número 0 atribua valores de acordo com o tamanho que desejar que o local tenha, sendo que height é mais opcional ainda que width (só defina valores se for preciso, se não, remova eles).
  3. margin-left - ao trocar o número 0 por outros valores você estará definindo quanto o gadget se movimenta para a esquerda ou direita. Os números que substituirão o 0 podem ser negativos ou positivos. Você pode usar margin-right no lugar de margin-left para atribuir valores com relação à margem direita do blog.
  4. top - ao trocar o número 0 por outros valores você estará definindo quanto o gadget se movimenta com relação ao topo, isso é, se sobe (com números negativos) ou desce (com números positivos). Isso vale para posicionar mais perto ou longe do cabeçalho, para colocar coisas acima ou abaixo dele também.
  5. background - é opcional, só para mostrar que se pode adicionar estilos, portanto pode remover se quiser; caso queira colocar um plano de fundo naquela área específica, use uma cor (exemplo: background: #fcc;), uma imagem (exemplo: background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLiyo_WZ2StNkMYpgUmgMR46quccmWfpoY2TwtHKDYkvCVxJ6Sy_msBZZJAIQMVAlYp5_o9YEanSUK2PFKyLvt7HKecniMXTQFdNr0qCfEBDzYMr8ifXhpFuU8XUwuDkiveNvJhyphenhyphenQxuBeO/s1600/619384gwfgemc1lv.gif) repeat;) ou deixe transparente (exemplo: background: #transparent;).

Até aqui já posicionamos o que quisermos, e até adicionamos mais estilos caso seja necessário, mas é claro, falta então saber onde adicionar o que será posicionado, que é em CONTEUDO DO QUE SERÁ POSICIONADO. Pronto; salve seu gadget e visualize como ficou, fazendo as alterações que precisar.
 Crédito: http://reinokawaii.blogspot.com.br/

You May Also Like

4 Comentários

  1. Senti tua falta!
    Olhe o que eu fiz <3
    http://animesetudomaissempre.blogspot.com.br/2013/11/1-meus-blogs-favoritos.html

    ResponderExcluir
    Respostas
    1. Sério! Fico muito feliz por isso^^

      Anww *---* Fiquei emocionada! Vou comentar lá^.^

      ~~kiss

      Excluir
  2. Gaby-chaan fiquei com saudade dos seus post ^^
    Daqui pra frente você vai ficar sempre né? Esse blog é um dos mais perfeitos que conheço :3

    ResponderExcluir
  3. ~Nyahoo~
    Muito obrigada pelo tuto!! Ficou lindo e fofo o novo lay *-*
    Agora sempre acompanharei o GQCA, quando possível ^^
    Esperando o novo template de natal ^.~

    ~. Kissus de morangos .~

    // s2loves2animes.blogspot.com //

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀`*) (*≧∀≦*) (=´∀`)人(´∀`=) ( ・ ▽ ・)
ヾ(*^▽^*)o, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)