Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leonardo Machado Moreira

Herança de Classes CSS

Recommended Posts

Fala Pessoal, estava tentando limpar meu código e implementar herança css. E observer minha situação

 

Hoje eu tenho dois divs que podem se tornar mais quase que exatamente iguais vejam.

 

#cabecalho
			{
				position:absolute;
				top: 15px;
				left: 200px;
				height: 150px;
				width: 600px;
				background: silver;
			}
			
			#corpo
			{
				position:absolute;
				top: 170px;
				left: 200px;
				height: 150px;
				width: 600px;
				background: silver;			
			}

oque diferencia o cabeçalho do corpo é só o Top e o Height.

Oque eu queria é criar uma classe de box básico e passar a herdar este box a partir daí veja um espoco

andei pesquisando na internet e criei uma class

 

.baseBoxes
			{
				position: absolute;
				left: 200px;
				width: 600px;
				background: silver;
			}
			
			baseBoxes.arquivo
			{
				top: 15px;
				height: 150px;								
			}

												 baseBoxes.corpo
			{
				top: 15px;
				height: 150px;								
			}

Oque na minha concepção ele herdaria tudo de baseBoxes e configuraria somente top e height.

e na criação do objeto

 

var cabecalho = document.createElement('div');
			cabecalho.id = 'corpo';
			cabecalho.className = 'baseBoxes.arquivo';						
			document.body.appendChild(cabecalho);

O Problema é que desaparece tudo.

Alguem sabe como é a maneira correta de implementar a herança usando este meu caso. E como é a forma correta de chamar isso com DOM

 

Obrigado Leonardo

Compartilhar este post


Link para o post
Compartilhar em outros sites

1-) Altere o nome das classes baseBoxes.arquivo e baseBoxes.corpo para .arquivo e .corpo

 

2-) Altere cabecalho.className = 'baseBoxes.arquivo'; para cabecalho.className = '.baseBoxes .arquivo';

Atençao que existe um espaço entre .baseBoxes e .arquivo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fala Maujor eu consegui porém foi sem colocar os pontos veja

<script>
		var arquivo = document.createElement('div');
		arquivo.className = 'baseBoxes arquivo';
		arquivo.id = 'bCorpo';
		document.body.appendChild(arquivo);
	</script>

ai ele fo no IE e FF. Mas Obrigado pela dica, muito util acho que a galera tem bastante duvida na pratica sobre herança css.

 

a propósito, seu site é mto bom vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.