Ir para conteúdo

POWERED BY:

Arquivado

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

Apenas Eu

Divs de fundo colorida

Por , em Desenvolvimento frontend

Recommended Posts

Apenas Eu    13

Apenas Eu
Postado

Ola!

 

Uma pequena duvida:

 

Por exemplo eu montei uma DIV com o nome de "tudo". Em cima dela, coloquei otra div com a área do texto e ao lado uma outra div para um menu qualquer.

 

No CSS da DIV tudo, eu quero colocar um fundo branco por exemplo, para não dae aquele problema de aparecer a cor de fundo do <body>.

 

Minha duvida seria, pq que o navegador não está aceitando a cor do div tudo?

(eu quero a cor de fundo na div por baixo das divs "texto" e "esquerda" ao invés de colocar nas duas Divs. Como sabem isso dá problema no visual, fica com cara de BUG)

 

Fiz assim este trexo da Lista:

#tudo {
z-index:auto;
font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#CCCCCC;
font-size:12px;
width: 998px;
margin:0 auto;
position:relative;
float:none;
}

}
#texto {
background:#FFFFFF;
z-index:auto;
margin: auto;
width: 750px; margin:auto; float:left;
padding: 10px; 
position:relative;
color: #A98F71;
}
#esquerda {
background:#FFFFFF;
width: 197px;
height:auto;
float:left;
border-left: dashed 1px #CCCCCC;
padding: 0 0 0 30px;
}

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alisson Zampietro    6

Alisson Zampietro
Postado

Amigo se eu não entendi direito você quer que a div tudo fique transparente?, ou você quer que ela fique branca?

 

se por acaso for deixar transparente aplica um background:transparent; na div tudo..ou deixa-la branca!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

É porque #texto e #esquerda, que parecem ser filhos de #tudo, estão flutuando. Assim, o #tudo perde a sua altura. Você pode resolver de duas maneiras:

 

1. #tudo, adicionar o display:inline-block;

2. acrescentar uma div com clear:both ao final do #tudo (antes de fechá-lo).

 

PS.: tem um fecha-chave sobrando ali em #tudo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

Opa!!

Obrigadoo pelas dicas!

 

Eu quero que a DIV tudo fique branca e as que estão em cima transparentes. Desculpe eu não conseguir me expressar direito. As vezes eu tenho essa dificuldade.

 

Eu segui as sugestões do André, deram certas. Fiquei horas ontem quebrando a cabeça --'

 

 

Valeuu a todos :thumbsup:

 

Deu certo...mas surgiu outro probleminha. Eu quero que a div fique no centro da tela e essa linha do display, joga ela pro canto da tela. Sem ela fica no centro, com ela fica no quanto.

Vo mandar o cód. completo desta vez, pode ser que ajude mais né?

 

* {
font-family: Arial, Helvetica, sans-serif; 
margin: 0 auto;
padding: 0
}

body {
background: #CCCCCC url(../imagens/fundo.jpg) no-repeat;
height:auto; width: 100%; 
font-size:12px;

}
#tudo {
z-index:auto;
font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#CCCCCC;
font-size:12px;
width: 998px;
margin:0 auto;
position:relative;
background:#FFFFFF;
display: inline-block;
clear:both;

}
#cabeca {
position: relative;
width: 100%;
height:208px;
padding-top: 20px;


}
#texto {
z-index:auto;
margin: auto;
width: 750px; margin:auto; float:left;
padding: 10px; 
position:relative;
color: #A98F71;
}
#esquerda {
width: 197px;
height:auto;
float:left;
border-left: dashed 1px #CCCCCC;
padding: 0 0 0 30px;
}
#rodape {
background: url(../imagens/rodape.gif) repeat;
padding: 10px 0 10px 0;
width: 100%; 
height:550px;
font-family:Tahoma, Geneva, sans-serif;
position:relative;
float: left;
}

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Bom, para alinhar elemento inline-block no centro da tela, tem um recurso antiquado que é declarar text-align:center para o pai (no caso, parece ser o body), e voltar text-align:left para o elemento em questão.

 

Por isso, prefira o uso do elemento extra com clear:both. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apenas Eu    13

Apenas Eu
Postado

é né? Mas mesmo com o clear both a div tava ficando pra esquerda.

 

Ahh mas deixa, eu também nao queria colocar text-alight center no body mas acho que vo fazer isso mesmo. Dae nos trechos onde eu não quero que fique centralizado, eu faço o text... left. Acho que é o jeito por enquanto :)

 

Obrigados de novo

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito