O uso da div

Canal: Tableless  |  Autor: Luciano Larrossa  |  Publicado em: 16/04/2008  |  Views: 8.186
Ola assim como havia prometido, falaria sobre o uso da div e de uma doença que alguns desenvolvedores sofrem quando aprendem Tableless chamada "DIVTITI"!!!

Com a chegada do tableless uma revolução aconteceu em nosso código, ele ficou mais limpo mais otimozado do que quando usavamos umas certas tabelas!

Mais como falei existem outras Tags que devem ser usadas para auxiliar as divs como por exemplo a tag <ul> <li>!!!

Essas são muito úteis na hora de desenvolver um menu, é semânticamente correto inserir menu dentro de listas veja um exemplo prático de um menu com lista:

<ul id="main_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Quem somos</a></li>
    <li><a href="#"Parceiros</a></li>
    <li><a href="#">Contato</a></li>
</ul>


Outra tag muito útil mais pouco usada é a tag label que muitos desenvolvedores desconhecem, essa tag é muito útil para montagem de  formularios semanticos, ajudam a organizar nossos formulários em blocos ficando assim muito mais fácil de entender e de fazer ajustes!
um exemplo:

<form  action="#" method="post">
             <fieldset>
                       <label>Nome: <input  type="text" /></label>
                       <label>Sobrenome:  <input type="text" /></label>
                       <label>Idade:  <input type="text" /></label>
                       <span>Sexo</span>
                       <label><input  type="radio" />masculino</label>
                       <label><input  type="radio" />feminino</label>
                       <span>Data de Nasc.</span>
                       <select>
                                <option>…</option>
                       </select>
                       <select>
                                <option>…</option>
                       </select>
                       <select>
                                <option>…</option>
                       </select>
                       <label>Signo:  <input type="text" /></label>
             </fieldset>
  </form>


Dai seria somente estilizar e deixa-lo com desgn que queremos!!!!
Não seesqueça nunca de feixar as tags isso pode causar erros no seu código (X)HTML.

Para encerrar essa coluna vou falar da tag span, muita gente se pergunta  div e span fazem a mesma coisa, quando uso div ...quando uso span.

A diferença entre <SPAN> e <DIV> é que com esta última sim que podemos aplicar estilo a uma parte mais ampla da página, por exemplo com três parágrafos. Além do mais, a etiqueta <DIV> tem um uso adicional que é o de criar divisões nas páginas as quais poderemos aplicar uma quantidade adicional de atributos para modificar seus comportamentos.

Já o nosso <span> serve mais como uma Tag auxiliar, ela auxilia a DIV e ajuda a estilizar pequenas partes.

Bom era isso, qualquer dúvida postem ai e também acito sugestões sobre colunas!
Abraços!!!

Tags: div, span, xhtml
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [3]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Maurcio
Publicado em:
16/04/2008 - 12:43
Maurcio
Cara bm legal mais dava pra vc postar sobre westilização de formularios tenho bastante dúvidas pois estou começando agora e montagem de layout tipo os fixos, fluidos entre outros!!!
Daniel Ribeiro
Publicado em:
17/04/2008 - 09:17
Daniel Ribeiro
Cara, "falou bunito"!
Coisas simples, mas que todo mundo esquece ou nem procura saber.
Agora tenho uma pergunta, o label, ele engloba( como você fez ) ou não os fields?

Abraços!
Luciano
Publicado em:
18/04/2008 - 09:55
Luciano
Fala Daniel blz velho??? vou fazer uma coluna sobre formularios semânticos sim dai pode te ajudar!!! é só aguardar Grande abraços e sempre que quizer comente ai que será um grande prazer ajuda-lo! Até
Anderson
Publicado em:
05/12/2008 - 11:55
Anderson
Como fazer para um layer não mudar a posição na tela quando se muda a resolução do monitor?

Obrigado.

Pablo
Publicado em:
31/10/2009 - 00:53
Pablo
Acho uma boa idéia voce fazer um post ensinando a montar um layout de site um pouco mais complexo, talvez algum de seu portfolio se acaso tiver. Desde o desenho como dividir nas divs na hora de montar e etc, tenho certeza que ficara muito conhecido na internet pois eu pelo menos nunca vi um completao assim.
Espero ter ajudado na dica, e caso faca, por gentileza me comunique.
Abraco
Igordeveloper
Publicado em:
01/03/2010 - 22:52
bom post, parabens!!!!!!!!!!!!!11