Através do CSS você pode restringir a área de exibição de um elemento (texto ou imagem) para encaixar no layout definido.
Se você definir como valor “scroll”, sempre serão adicionadas barras de rolagem ao elemento.
NOTA: O Netscape 4 não suporta a propriedade “overflow”.
Propriedade que define como um elemento vai ser exibido.
Tem como opção os seguintes valores definidos:
Se você deseja que o elemento abaixo de um float não seja afetado, você deve aplicar a propriedade clear com uma das opções a seguir:
Esta propriedade permite posicionar elementos à direita ou à esquerda de outro elemento sem que para isso precisemos recorrer aos recursos de tabelas. Esta propriedade possui 3 valores:
Quando você faz fluir um elemento (float), ele se torna um bloco, tipo caixa, que pode fluir para a direita ou para a esquerda do fluxo normal do documento.
Elementos em nível de bloco (block level) acima de elementos float não serão afetados por ele. Entretanto, elementos abaixo serão posicionados em torno dos elementos float. Embora o conteúdo desses elementos afetados seja posicionado ao lado da caixa definida pelo elemento float, bordas e fundo continuarão ocupando o espaço do bloco original.
IMPORTATE!
Um elemento tipo float deve sempre ter sua largura especificada, com exceção de imagens que tem sua largura definida de forma implícita.
não seja especificada uma largura, o resultado será imprevisível.
No posicionamento estático, o elemento configurado faz parte do fluxo do documento interagindo com os outros elementos, porem desconsidera as definições de posição (esquerda,topo, direita, base), sendo necessário configurar para tanto propriedades como margin-top e margin-left.
No posicionamento relativo, o elemento configurado faz parte do fluxo do documento interagindo com os outros elementos. A definição de posição (esquerda,topo, direita, base) tem como referência o elemento anterior.
Quando especificamos um posicionamento absoluto a um elemento, uma tag div, por exemplo, estamos fixando uma posição sua em relação ao seu container, seja a página ou outra div. Quando desenhamos uma layer no Dreamweaver, é exatamente este tipo de posicionamento que é definido para a tag div. Abra o arquivo /estudo/css/positioning/layer.htm e analise o código da tag div.
Observe que foram definidas as propriedades left (esquerda) e top (topo). Eles especificam a posição (referência absoluta) onde o conteúdo deve aparecer na página.
Você pode especificar a posição right (direita) e bottom (base), mas isto causa problemas (bug) e não é recomendado.
Quando você especifica um posicionamento absoluto a um elemento, você está definindo que aquele elemento deve ser retirado do fluxo de elementos do documento. Isto significa que sua posição não será afetada pelos outros elementos e nem afetará a posição dos outros elementos da página.
Portanto, a ordem de posicionamento do elemento no código não definirá a ordem de visualização no documento, que é o padrão do HTML.
Outro ponto importante é que, definindo um posicionamento absoluto, o elemento poderá sobrepor outro elemento ou ser sobreposto. A propriedade que define isto é o z-index ou ordem de empilhamento do elemento na página, sendo que o padrão é o 0.
CSS-P são propriedades do CSS responsáveis pelo posicionamento dos objetos. As principais são:
Outras propriedades importantes para criação de layouts com CSS:
Tipos de Posicionamento
Existem três tipos de posicionamento via CSS:
O entendimento do Box Model é o primeiro fundamento para desenvolvimento de layouts via CSS .
Box Model é o nome que se dá ao conjunto de propriedades CSS que criam uma área retangular em torno de um elemento do HTML. Ele é composto pelo uso das propriedades margin, border, padding (espaçamento interno) e width (largura). O height (altura) também participa do Box Model, embora seja recomendado que o conteúdo é que defina a altura de um elemento.
O Box Model ou Modelo de Caixas, foi definido pelo W3C nas recomendações para o CSS1 publicadas em 1996. O trecho e a figura a seguir foram extraídos da tradução para o português da citada recomendação e definem o Box Model.
“O CSS1 adota como modelo de formatação uma seqüência simples de caixas, na qual cada elemento formatado ocupa uma ou mais destas caixas. Todas as caixas possuem um conteúdo central com áreas opcionais adjacentes formando as margens, bordas e espaçadores (padding).”
Quando definimos uma cor ou imagem para background (fundo), ele será visualizado somente na área que compreende o conteúdo e o padding definido. A área da margem não é afetada, sendo que o fundo sempre será transparente.
Podemos enumerar diversos problemas quando utilizamos tabelas para definir o layout de uma página:
A solução proposta pela W3C e pelo conceito de adoção dos Web Standards é a substituição das tabelas de layout (tabelas aninhadas e imagens Gifs para espaçamento) por containers definidos dentro do conceito ou modelo de caixa do CSS, o CSS Box Model.
Você está visualizando o histórico da categoria Produção de Páginas Web II.