O uso da div
Canal: Tableless | Autor: Luciano Larrossa | Publicado em: 16/04/2008 | Views: 8.186Ola 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:
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:
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!!!
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!!!
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]
Artigo anterior
Validação de Código
Validar seu código (X)HTML na W3C. Próximo artigo
Tableless: Formulário sem tabe.
Está matéria mostra como desenvolver u.
Validação de Código
Validar seu código (X)HTML na W3C. Próximo artigo
Tableless: Formulário sem tabe.
Está matéria mostra como desenvolver u.
Veja matérias relacionadas com o assunto:
| 09/03/2010 | Alterando a aparência de um CheckBox com WPF e C# |
| 08/03/2010 | Twitter - 5 ótimas ferramentas para utilizar com ele |
| 26/02/2010 | O modelo de referência OSI |
| 17/02/2010 | Definição de AJAX |
| 17/02/2010 | Stored Procedures |
| 16/02/2010 | Vídeo Aula - Criando Vídeo no Cyberlink PowerDirector |
| 09/02/2010 | Os 7 passos para criar um Blog que dá resultado |
| 03/02/2010 | Sony Vegas o que é? |
| 19/01/2010 | Como criar um Manual de Identidade Visual |
| 12/01/2010 | O poder do blogs |
Autor da matéria
Luciano Larrossa
Atualmente atua como gerente de projetos da Medialine agencia digital com sua sede em Porto Alegre.
• luciano.costacl@gmail.com
• site do autor
Atualmente atua como gerente de projetos da Medialine agencia digital com sua sede em Porto Alegre.
• luciano.costacl@gmail.com
• site do autor
Todas as matérias escritas pelo autor:










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!
Obrigado.
Espero ter ajudado na dica, e caso faca, por gentileza me comunique.
Abraco