Dominando DIVs

[XdesignerX 0]

Bem pessoal, venho estudando a linguagem CSS mais existem algumas dúvidas e eu gostaria muito de uma ajuda,

inclusive posso pagar por esse conhecimento pois eu quero muito aprender e dominar:

 

Eu estava observando o portal de noticias www.uol.com.br e percebi o excelente design através de camadas(div.

Os exemplos da internet só mostram o conceito dessa estrutura:

 

#principal

#cabecalho

#topo

#navegacao

#conteudo

#rodape

 

Eu gostaria de entender o conceito das camadas para construção de páginas mais complexas e poder andar com minhas próprias pernas desenvolvendo qualquer tipo de conceituação de layout, assim com o layout do portal UOL, repleto de divs, ou seja, inserir camadas onde eu quizer, fazê-las flutuar e se posicionar corretamente sem medo de ser feliz.

 

O site MAUJOR é uma otima biblioteca, mais ainda não consegui chegar aos meus objetivos, tenho muitas duvidas no uso de:

 

#position

#overflow

#float

#herança

* Lembrando que o meu foco é a construção dos layouts através de DIVs.

Desde já muito obrigado! :nataltongue:

[Nandel 1]

Tudo isso é blablabla.

 

Criar sites só com divs é tão "incorreto" como criar sites só com tabelas. o certo é utilizar cada tag para executar sua respectiva função.

 

Como os <h1>,<h2>,.... para títulos; <table> para as tabelas; <p> para os parágrafos e assim em diante.

 

Eles costumam utilizar esta forma descrita para simplesmente dividir os espaços. Inicio,meio,fim....

 

Quanto aos atributos;

position: posição do elemento, se é absoluto(fixo), relativo etc...

Overflow: atribulo que determina o comportamento do elemento quanto este esta sobreposto.

float: se ele deve "flutuar", ele se deslocara de forma flutuante para o lado definido. sobrepondo elementos etc. (isto não funciona com posição absoluta).

 

Quanto as heranças o próprio nome já diz.

se você define como todo h1 é negritado, e depois que o h1.titulo2 é escrito em vermelho, este h1.titulo2 também sera negritado.

[Giovani 104]

Rafael Santiago, você deve ter um bom conhecimento de html e css, qual o seu nível?

[William Bruno 1501]

Bom Dia Rafael,

 

Eu acredito que o primeiro passo é "abstrair", dê uma lida aqui:

http://wbruno.com.br/blog/2011/10/18/como-iniciar-um-recorte-tableless-ensinando-pensar/

[Login Errado 0]

O recomendado é contruír o site utilizando o elementos

corretos para cada coisa:

 

Elementos em bloco:

 

<h1> = titulos

<h2> = subtitulos

<p> = paragrafos

<blockquote> = citações

etc...

 

Elementos em linha:

 

<span> = para selecionar texto sem quebrar a linha

<img> = imagens

etc...

 

A ideia é Elementos de bloco provocam um quebra de linha

após utiliza-los.

 

Já elementos ele linha não.

 

Utilizando elementos de bloco você consegue fazer o posicionamento

dele na pagina assim como faria com as DIV.

 

Sobre o overflow:

 

Como o overflow podemos escolher o que deverá acontecer se o conteúdo ultrapassar o tamanho de uma DIV por exemplo.

 

hidden - Corta o conteúdo que ultrapassa o tamanho da DIV.

 

scroll - Mostra as barra de de rolagens, vertical e horizontal, mesmo que não seja necessário.

 

auto - Acho essa a melhor opção porque só cria barra de rolagem quando necessário.

 

Além dessas três opções temos a inherit que herda os valores, e a opção visible que é a padrão.

 

 

Segue um exemplo com o uso de overflow, float e div

 

 

http://dado.worldgamerconfigs.com/image/teste/imasters.html

 

Espero ter ajudado. :natalhappy:

[XdesignerX 0]

Olá galera!

 

Obrigado pela disponibilidade, eu tenho o domínio TOTAL sobe o HTML e parte do CSS.

 

O meu grande problema É SIM o desenvolvimento de layout com DIV, pois tenho problemas ainda na organização das camadas na hora de sobrepor, fazer flutuar, definir suas disposições e pensar corretamente com DIV.

 

O que acontece é que as DIVs não se sobrepoem corretamente ou não atendem minhas espectativas.

 

Acredito que isso é um problema para muitos designers, quem não gostaria de pensar em um layout e executá-lo em padrões web stantards?! :nataltongue:

 

Muito obrigado pelas dicas e artigos. Vou continuar meu estudo e ler suas postagens com cautela!^^

[Evandro Oliveira 331]

Já estudou sobre box model??

[XdesignerX 0]

Não, estou estudando agora nesse momento e parece bem simples.

Obrigado pelas palavras-chaves, vou pesquisar sobre o assunto para compreender exemplos mais complexos (caso existam).

 

abraço!

[Nandel 1]

Obrigado pela disponibilidade, eu tenho o domínio TOTAL sobe o HTML e parte do CSS.

 

Bem, seja humilde.

 

Quanto ao que disse desta sua duvida ser a grande dos designer, não concordo. acredito que sempre sera a questão da criatividade, pois HTML e CSS são muito "estúpidos" para ser dificuldade para alguém. Apenas depende da experiencia do profissional.

 

Concordo no que o "Login Errado" disse:

O recomendado é contruír o site utilizando o elementos corretos para cada coisa

[XdesignerX 0]

Não entendi onde você quer chegar com seu POST NANDEL, já que você não acrescentou nada aqui, se resuma a responder alguma coisa no fórum que acrescente o conhecimento de alguém.

 

A teoria do "Estúpido" é relativo, então não misture suas palavras para não voltar para si mesmo, onde está a humildade?

 

Essa foi genial, mesmo assim obrigado!

[Nandel 1]

Rafael santiago recomendo que leia isso:

http://www.linhadecodigo.com.br/Artigo.aspx?id=81