[Cascading Style Sheets]
[Página prévia] [Próxima página] [Seção página de conteúdo]
Posicionamento no Netscape 4.0x

Antes de tudo, observe que os métodos de posicionamento para o Netscape e o Internet Explorer descritos nesta página e nas seguintes não são as únicas maneiras de se criar revestimentos. No entanto, com a utilização desses métodos é possível confeccionar uma página que funcione ao mesmo tempo nos três browsers, desde que você esteja usando um JavaScript que carregue a folha de estilos apropriada a cada navegador e confeccione as camadas inferiores do revestimento (estes scripts serão apresentados logo depois da explicação sobre posicionamento).

Criar revestimentos no Netscape 4.0(x) requer o uso de posicionamento absoluto e relativo, margens, e camadas (layers).

O background do revestimento será posto em um elemento (ou classe) que será posicionado relativamente (ao fluxo do conteúdo da página):

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}
	

A porção anterior ao revestimento deve ser colocada em um elemento (ou classe) que será posicionada absolutamente (dentro do elemento background), mesmo que o posicionamento possa ser colocado, em vez disso, no elemento layer (veja abaixo):

	.shadow3
	{		
		font: Bold x-large 'sans-serif';
		color: #339999;
		position: absolute;
		}
	

Você também vai precisar criar algumas especificações especiais para layer na folha de estilos. Os layers são muito importantes, e os revestimentos não irão funcionar no Netsacape sem eles. Aqui estão as especificações dos layers para a amostra de revestimento da página anterior:

	#layer1
	{		
		position: relative;
		}

	#layer3
	{		
		position: absolute;
		left: 40pt;
		top: 30pt;
		}

	

Observe que os layers de numeração mais alta aparecem por cima dos layers de numeração mais baixa. Os elementos vão aparecer no layer de numeração mais baixa por default. O meu segundo layer aqui poderia ter sido layer2, mas eu já tinha um layer2 na folha de estilos com um objetivo diferente. Observe o posicionamento dos layers de face (foreground) e de fundo (background). Note também que a posição do elemento foreground é ajustada usando as propriedades top e left; os valores são mais facilmente determinados por tentativa e erro. Você também pode ajustar o posicionamento do próprio elemento, usando as propriedades margin-top e margin-left, mas eu achei que os resultados são menos consistentes. Se você realmente ajustar as posições de margem no elemento, elas serão aplicadas em adição aos valores de top e de left colocados no layer.

O conteúdo que deve ser revestido no background deve ser colocado dentro do elemento background, usando o descritor <span>:

	<p class=hugeding>
	0<br>
	<span class=shadow3 id=layer3>
	Files
	</span>
	</p>
	
Observe o atributo class e o atributo id; eles especificam o estilo do elemento foreground e o layer.
Notas adicionais: a técnica layer para revestimentos é uma invenção da Netscape, e não aparece nas especificações do CSS1; eu acredito que o World Wide Web Consortium expressou sua desaprovação oficial quanto ao método layer, e recomenda em vez disso o uso da propriedade Z-index. (Nós veremos este método na página seguinte sobre o IE 4.0). Eu não vi nenhuma indicação de que a Netscape planeja modificar a sua abordagem de posicionamento, mas fique ligado....
[Página prévia] [Próxima página] [Seção página de conteúdo]

Robert Crooks, English Department, Bentley College
[envelope] rcrooks@bentley.edu