O uso da div

Publicado em: 16/04/2008  |  Tableless  |  Visualizações: 1.979  |  3 Comentário(s)
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!!!
compartilhe
  Dica: Confira todo nosso conteúdo de Tableless no site.
Links patrocinados
Últimos artigos do editor

tableless.jpg Validação de Código
Validar seu código (X)HTML n.
tableless.jpg Centralizar Layout
Essa é uma grande dúvida de .
Opinião do leitor:
3 Comentário(s)

 Luciano comentou:

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é

Publicado em: 18/04/2008 - 09:55

 Daniel Ribeiro comentou:

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!

Publicado em: 17/04/2008 - 09:17

 Maurcio comentou:

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!!! <ais muito bom para quem está começando!

Publicado em: 16/04/2008 - 12:43

Acesso restrito
Destaques
Peixe Grande 2008 Peixe Grande 2008
O Oficina da Net está este ano participando do Projeto Peixe Grande 2008 na categoria de Blog. Ajude-nos vote!
13º Encontro de Webdesgin 13º Encontro de Webdesgin
Cobertura do evento - 13º Encontro de Webdesgin na cidade de Porto Alegre
Galaxy 7 - O Smartphone da Asus Galaxy 7 - O Smartphone da Asus
Imagens e especulações sobre o Smartphone da empresa foram publicadas na internet
Links patrocinados
Autor
Tags
Artigos Relacionados
Novos Artigos
Assine nosso RSS

© 2005 - 2008 - Oficina da Net - v 3.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.