Fazer Div-filha NÃO receber atributos

Resolvido achsanos
(@achsanos)

13 anos atrás
Fiz uma div flutuante que vai funcionar a partir de uma image-map; até aí beleza. O problema é que ela irá funcionar dentro de, pelo menos, uma outra div, tipo:
```
<div id="div1">
          <div id="div_flutuante">
             ...
          </div>
</div>
```
O problema é que, a contragosto, vários estilos da div1 estão contaminando a configuração da div_flutuante, e eu não consigo limpar todos de maneira nenhuma, mesmo atacando alguns margin:, padding: e float: com clear:both e coisas do tipo. Alteração no estilo da fonte e elementos desalinhados são alguns desses efeitos colaterais; fora da div1 até que funciona legal.

É possível usar a div flutuante assim sem herdar os atributos?

Visualizando 2 respostas - 1 até 2 (de um total de 2)

Myst1010
(@myst1010)

13 anos atrás
Não, vc terá que sobrescrever as regras que vc não quer que sejam herdadas.

Você tem algumas opções para corrigir este problema.

Usar o atributo !important em suas regras para a a div div_flutuante, isso irá sobrescrever as regras herdadas que são mais persistentes.

exemplo
```
#div1{font-size:15px;}
#div_flutuante{font-size:12px !important;}
```
Outra é especificar mais claramente que a regra deve ser somente para a primeira div usando >.
```
#div1 > p{font-size:15px;}
#div_flutuante > p{font-size:12px;}
```
Isso pode ajudar, mas leve em conta que o IE6 não irá reconhecer isso.
Criador do tópico achsanos
(@achsanos)

13 anos atrás
Pois é, eu meio que já esperava, mas dei uma forçada de barra pra ver se existia algo do tipo.

O recurso !important eu já usava, mas ele tem o inconveniente de funcionar apenas se vc vai usar um mesmo estilo nas duas div com valores diferentes. No meu caso, eram exatamente as configurações da div pai que não existiam na filha que interferiam.

A segunda dica eu meio que vinha evitando, ela é meio perigosa quando o html já está num estágio avançado. Acabei usando uma solução híbrida.

Solução:
- criei uma lista com os estilos da div pai que não apareciam na div filha, e mudei o valor deles para none ou 0 (zero);
- assinalei todos os estilos da div filha como !important;
- acrescentei a nova lista de estilos aos da div filha;
- já era, a lista nova funciona tipo um css reset.
Valeu!

Visualizando 2 respostas - 1 até 2 (de um total de 2)

O tópico ‘Fazer Div-filha NÃO receber atributos’ está fechado para novas respostas.

Fazer Div-filha NÃO receber atributos

Tags de tópico

Visualizações