como ocupar todo o espaço de uma div?

[Tiago Mesquita 0]

Olá pessoal,

 

Meu problema é o seguinte:

Tenho 2 DIVs, div A e div B, sendo que a div A está dentro da div B, que está posicionada no centro e com o diâmetro desejado...

o div A na verdade são 8 divs fazendo um box com cantos arredondados... eu queria que esse box, no caso essas divs, ocupacem todo o espaço livre no div B, é possível?

 

os códigos vão abaixo:

html:

<div id="content">
  <div class="box-top">
	<div class="box-bottom">
	  <div class="box-left">
		<div class="box-right">
		  <div class="box-bottom-left">
			<div class="box-bottom-right">
			  <div class="box-top-left">
				<div class="box-top-right"> Lorem ipsum dolor sit amet consectetur adipisicing elit<br />sdfsfsd<br />ddsfsd<br />sdfsd </div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	</div>
  </div>
</div>

css:

#content {
	margin-top: 153px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 300px;
	text-align: center;
	background-color: #EAF5F2;
}
bottom-copyright  { margin: 19px 0 25px 0; }

body {
	background-image: url(bg-body-top.png);
	background-repeat: repeat-x;
	background-color: #EBF5F2;
}
 .box-top {
	width: 20em;
	background-image: url(img/content_top.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	background-color: #C3D7D2;
	margin-right: auto;
	margin-left: auto;
}
.box-bottom {
	background-image: url(img/content_bottom.png);
	background-repeat: repeat-x;
	background-position: 0 100%;
	margin-right: auto;
	margin-left: auto;
}
.box-left {
	background-image: url(img/content_left.png);
	background-repeat: repeat-y;
	background-position: 0 0;
	margin-right: auto;
	margin-left: auto;
}
.box-right {
	background-image: url(img/content_right.png);
	background-repeat: repeat-y;
	background-position: 100% 0;
	margin-right: auto;
	margin-left: auto;
}
.box-bottom-left {
	background-image: url(img/content_bottom_left.png);
	background-repeat: no-repeat;
	background-position: 0 100%;
	margin-right: auto;
	margin-left: auto;
}
.box-bottom-right {
	background-image: url(img/content_bottom_right.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	margin-right: auto;
	margin-left: auto;
}
.box-top-left {
	background-image: url(img/content_corner_left_top.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-right: auto;
	margin-left: auto;
}
.box-top-right {
	padding:10px;
	background-image: url(img/content_corner_right_top.png);
	background-repeat: no-repeat;
	background-position: 100% 0;
}

[Ronaldo Bitencourt 0]

:blink: q locura heim !!!!

 

assim Tiago você só esqueceu que não temos as imagens ai fica meio dificil de te dar uma boa resposta !!

 

coloca um link de onde esta ese code que fica mais facvil !!!! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[programador php 0]

não seria mais interessante a construção de Box com 3 imagens...

 

o codigo fica mais limpo!!!

 

mas vamos a sua duvida!!

 

hehe

 

isso não fica completamente devido ao padding declarado!!!

 

abraço

[Mau B. Miranda 0]

Fala ae Tiago, beleza!!

Cara, quanta div!!!!!!! :blink:

Não precisa disso tudo!!!

A dica do Programador PHP é ótima!!! Dá uma olhada no site do Maujor (www.maujor.com) lá ele mostra o esquema de como fazer box com cantos redondos!!!!

Com isso vai ficar até mais fácil de ajeitar o conteúdo!!!

 

Outra dica é dar uma limpada no seu css!! Deixá-lo mais otimizado!!

Por exemplo:

.box-top-left {

background-image: url(img/content_corner_left_top.png);

background-repeat: no-repeat;

background-position: 0 0;

margin-right: auto;

margin-left: auto;

}

 

Você pode dar uma reduzida!!!

box-top-left {

background: url(img/content_corner_left_top.png) no-repeat 0 0;

margin: 0 auto;

}

 

Outra coisa, você está usando png no BG!! Tem navegadores q não suportam isso!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Sei q posso ter fugido um pouco do tema da sua dúvida, mas espero q as dúvidas possam ser úteis!!!!! :)

 

 

[]'s