Entendendo As Heranças

#1 Cristiano Dias

Visitantes

Posted 04/11/2003, 09:21

Olá.
Alguém poderia me ajudar a entender o código abaixo?
Do jeito que está aparecem duas linhas de texto com fundo cinza. Essas linhas tem uma largura fixa. Se eu apago o código para a largura da linha (width:550px;) a segunda linha de texto fica com o fundo branco. Porque isso?

Obrigado.

<html>
<head>
  <title>Untitled</title>
  <style type="text/css">
  #principal{
    background-color: #dddddd;
    width:550px;
  }
  .esquerda {
    float:left;
  }
  .direita {
    float:right;
  }
  </style>
</head>

<body>

<div id="principal">
  teste
  <div class="esquerda">
    continuação
  </div>
  <div class="direita">
    mais ainda
  </div>
</div>

</body>
</html>

#2 soller_2003

Grêmio 1º do Brasil e a Segunda Divisão é a .... que .....

Usuários
151 posts

Sexo:Não informado
Localidade:Porto Alegre - RS

Posted 04/11/2003, 09:24

Derrepente muda de cor porque invalida o resto do codigo tu tirar uma parte ...

falow

Copiando se aprende, pensando se cria...

#3 Ganbah

Novato no fórum

Usuários
2 posts

Sexo:Não informado

Posted 04/11/2003, 09:33

Derrepente muda de cor porque invalida o resto do codigo tu tirar uma parte ...

falow

Como assim invalida o código? O código fica errado?
Eu só tiro a linha da largura. fica:

<html>
<head>
 <title>Untitled</title>
 <style type="text/css">
 #principal{
   background-color: #dddddd;
 }
 .esquerda {
   float:left;
 }
 .direita {
   float:right;
 }
 </style>
</head>

<body>

<div id="principal">
 teste
 <div class="esquerda">
   continuação
 </div>
 <div class="direita">
   mais ainda
 </div>
</div>

</body>
</html>

É invalido?

Obrigado.

#4 soller_2003

Grêmio 1º do Brasil e a Segunda Divisão é a .... que .....

Usuários
151 posts

Sexo:Não informado
Localidade:Porto Alegre - RS

Posted 04/11/2003, 09:53

Epa... eu tinha intendido que o fundo do codigo no editor ficava diferente, agora que eu reli que entendi a pergunta ... e realmente não entendi porque o fundo fica branco

falow

Copiando se aprende, pensando se cria...

#5 Ganbah

Novato no fórum

Usuários
2 posts

Sexo:Não informado

Posted 04/11/2003, 10:12

hehehe
Pois é.
Eu li em algum lugar que Background-color não herda. Isso significa que não é passado de um bloco pra outro, não é? Então se eu tenho um div dentro do outro e o div de fora tem uma cor de fundo o div de dentro não deveria receber a mesma cor. Mas na prática recebe (como nesse exemplo).

<div style="background-color:#eee">
  texto do div externo
  <div>
    texto do div interno
  </div>
</div>

Mas o texto do segundo div não recebe a cor quando eu adiciono um float:

<div style="background-color:#eee">
  texto do div externo
  <div style="float:left">
    texto do div interno
  </div>
</div>

Só acontece com o estilo Float, outros estilos não mudam a cor do fundo.
No entanto se eu coloco uma largura fixa no primeiro div a cor no segundo volta:

<div style="background-color:#eee;width:500px">
  texto do div externo
  <div style="float:left">
    texto do div interno
  </div>
</div>

Qual é a confusão aqui? Porque o float influi na cor de fundo?

Obrigado.

Edição feita por: Ganbah, 04/11/2003, 10:13.

#6 Dinho Z.

Rock'n'Roll !!! Yeah !!!

Usuários
755 posts

Sexo:Não informado
Localidade:Santo André - SP

Posted 06/11/2003, 09:20

Realmente o background no CSS não é herdável, este problema que está acontecendo é do IE...

No Netscape e no Mozilla ele não herda, mesmo com o width e no Opera aparece tudo na mesma linha...

Teste este código nos navegadores que eu falei ou em outros ainda se quiser...

Dinho

Ajude a proibir os "jabás" nas rádios brasileiras.
Mas, afinal, o que é o "jabá"?!? acesse Rock Brasil
Acesse Fórum SOS Designers
Coluna de JavaScript/CSS do Upmasters