Ir para conteúdo

POWERED BY:

Arquivado

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

mrf28

background-color somente para o content

Por , em Desenvolvimento frontend

Recommended Posts

mrf28    0

mrf28
Postado

Olá, sou novo aqui no forum e também ao desenvolvimento web.

 

Estou com pequenas dúvidas, não achei nada aparente que se encaixasse nas minhas dúvidas.

Se houver algum tópico que as sane peço por favor para me redirecionar para ele.

 

Estou com o seguinte problema:

 

Para usar transparência nas bordas uso rgba, porém, quando uso um bg-color, altera-se a cor da borda (devido ao fator alpha), então uso um artifício para sanar este problema. Uso uma div preenchendo todo o conteúdo, assim deixo a borda livre.

 

O que acontece é que quando adiciono algum conteúdo a div interna ela se desloca.

 

Div%20dentro%20de%20div.png

 

o código html que estou usando é este:

 

<div id="Header" >
<div class="Content">
<h1> Header content.</h1>
</div>
</div>

 

e o css:

 

#Header{
position: relative;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
width: 1000px;
height: 150px;
z-index: 1;
border-width: 24px;
border-color: rgba(199,199,199,0.7);
border-style: solid;
border-radius: 16px;
-moz-border-radius: 16px;
}

#Header h1{ 
text-align: center;
}

.Content {
margin: 0 0 0 0;
padding: 0 0 0 0;
outline: 0 0 0 0;
width: 100%;
height: 100%;
background-color: rgba(216,248,255,0.9);
}

 

obs: já tentei usar margin: 0; padding: 0;

 

Alguem sabe como faço para o conteúdo não se deslocar deixando aquele espaço branco?

Ou como atribuir bg-color somente para o content??

 

Uma dúvida fora do assunto é: Alguem sabe como tirar aquele quadrado mais escuro no centro da borda? obs: ele só aparece no chrome.

 

 

Se de algum modo for uma inconviniência perguntar sobre estes assuntos peço desculpas previamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

- KbeçãO -    0

- KbeçãO -
Postado

no caso da cor, passe o <h1> para fora da diva content

 


<div id="Header" >

   <h1> Header content.</h1>
   <div class="Content">

    [b]Conteudo aqui.....[/b]

   </div>
</div>

 

no caso do deslocamento o tamanho do conteudo supera o da div?

no caso seria considerado o valor da div mãe (Header):

width: 1000px;
height: 150px;

 

ja que:

 


<div id="Header" >
  <div class="Content">
  <h1> Header content.</h1>
  </div>
</div>

 

se o conteudo for maior que o da div mae (ex: 1100px no caso) geralmente se desloca

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrf28    0

mrf28
Postado

no caso da cor, passe o <h1> para fora da diva content

 


<div id="Header" >

   <h1> Header content.</h1>
   <div class="Content">

    [b]Conteudo aqui.....[/b]

   </div>
</div>

 

no caso do deslocamento o tamanho do conteudo supera o da div?

no caso seria considerado o valor da div mãe (Header):

width: 1000px;
height: 150px;

 

ja que:

 


<div id="Header" >
  <div class="Content">
  <h1> Header content.</h1>
  </div>
</div>

 

se o conteudo for maior que o da div mae (ex: 1100px no caso) geralmente se desloca

 

 

 

KbeçãO, obrigado pela resposta, mas se eu deixar a tag h1 fora da div content como você sugeriu a cor do fundo não se ajusta ao conteúdo da div e sim desce ainda mais no layout.

 

Quanto ao tamanho da div filha ser maior que o da mãe, já estava usando 100% na altura e na largura. Mas foi realmente essa questão que me ajudou, eu havia descrito o tamanho porém, não disse onde a div começava e onde ela terminava, daí usei o atributo position para sanar este problema. Veja como ficou:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Página</title>
<style type="text/css">

body{
background-image: url("http://tugastech.com/e107_images/newspost_images/imagem_ubuntu_ultimate01.jpg");
background-width: 100%;
background-height: 100%;
}

#Header{
position: relative;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
width: 800px;
height: 150px;
z-index: 1;
border-width: 24px;
border-color: rgba(199,199,199,0.7);
border-style: solid;
border-radius: 16px;
-moz-border-radius: 16px;
}

#Header h1{ 
text-align: center;
}

.Content {
margin: 0; padding: 0; outline: 0; border none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(216,248,255,0.9);
}

</style>

</head>


<body>

<div id="Header" >
<div class="Content">
<h1> Header content.</h1>
</div>
</div>

</body>

</html>

 

Obrigado pela ajuda!

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