Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
Rafael Santiago, você deve ter um bom conhecimento de html e css, qual o seu nível?
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/
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
/applications/core/interface/imageproxy/imageproxy.php?img=http://dado.worldgamerconfigs.com/image/teste/ajuda.jpg&key=1163ae28e2214e4f04b3db6d588571298f60c3c025cd3e5a122c33976f3e0e82" alt="ajuda.jpg" />
http://dado.worldgamerconfigs.com/image/teste/imasters.html
Espero ter ajudado. :natalhappy:
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!^^
Já estudou sobre box model??
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!
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
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!
Rafael santiago recomendo que leia isso:
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.