[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]