Jump to content

divs dentro de divs


coxosclassic
 Share

Recommended Posts

Boas a todos,

Tou com um problema em relacao a posicionamento de divs

Aqui vai um exemplo:

html:

<html>
 <head>
<link rel="stylesheet" href="test.css" />
 </head>
 <body>
<div>
  <div class="container">
	<div class="content-a">

	</div>
	<div class="content-b">

	</div>
	<div class="content-c">

	</div>
  </div>
  <div class="footer">
  </div>
</div>
 </body>
</html>
 

css:

.container {
 width :100%;
 height: auto;
 position: relative;
}

.content-a {

 width: 100%;
 height: 200px;
 position: absolute;
}

.content-b {

 width: 100%;
 height: 100px;
 position: absolute;
}

.content-c {

 width: 100%;
 height: 300px;
 position: absolute;
}

.footer {
 width: 100%;
 height: 48px;
 position: relative;
}
O que eu pretendo é que as divs "content-*" fiquem dentro da div "container", e que o height dessa div container seja igual ao dos conteudos (content-*), e obviamente o footer fique por baixo do container...

ex:  http://brunoperry.net/stuff/example.png

o que me esta a acontecer, é que a div container fica sem height nenhum, e o footer fica no topo por baixo das divs content...

Alguem me pode ajudar a resolver isto?

Cumps,

cc

Cumps,

cc

Link to comment
Share on other sites

ops... ja corrigi / editei o post 😉

o que eu pretendo é que as divs 'content' estejam umas por cima das outras, dai ter usado o position:absolute para cada uma delas. Agora o problema é que a div 'container' fica sem height nenhum, e o footer fica por cima das divs content...

obg!

Edited by coxosclassic

Cumps,

cc

Link to comment
Share on other sites

<html>
 <head>
   <link rel="stylesheet" href="test.css" />
   <style type="text/css">
     html, body {
       padding: 0;
       margin: 0;
     }

     .clear {
       clear:both;
     }

     .container {
       width: 100%;
       height: 280px;
     }

     .content-a {
       top: 20px;
       left: 20px;
       width: calc(100% - 80px);
       height: 200px;
       position: absolute;
       border: 1px solid black;
       background-color: #FAFF9E;
     }

     .content-b {
       top: 40px;
       left: 40px;
       width: calc(100% - 80px);
       height: 200px;
       position: absolute;
       border: 1px solid black;
       background-color: #CBD4F7;
     }

     .content-c {
       top: 60px;
       left: 60px;
       width: calc(100% - 80px);
       height: 200px;
       position: absolute;
       border: 1px solid black;
       background-color: #F7CBCB;
     }

     .footer {
       width: calc(100% - 40px);
       height: 48px;
       position: relative;
       border: 1px solid black;
       margin: 0 20px;
     }
   </style>
 </head>
 <body>
   <div>
     <div class="container">
       <div class="content-a"></div>
       <div class="content-b"></div>
       <div class="content-c"></div>
     </div>
     <div class="clear"></div>
     <div class="footer"></div>
   </div>
 </body>
</html>
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Boas!

@I-NOZex: Muito obrigado pelo link, ainda nao tive tempo para o ler a 100%, mas tambem acho que me pode vir a dar muito jeito 👍

@HappyHippyHippo: Obrigado pelo snipet! mas o problema mantem-se... A ideia seria ter o height do container ajustado com o height dos contents (tipo um wrap-content), isto porque o conteudo dos contents é dinamico, dai eu nunca ter a certeza da altura real da 'coisa'.. Basicamente, estou lixado se meter um valor real no height do container, e se mudar o height para 'auto'... o problema mantem-se 😞

Mas muito obrigado pela dica 🙂

Cumps,

cc

Edited by coxosclassic

Cumps,

cc

Link to comment
Share on other sites

ops... ja corrigi / editei o post 😉

o que eu pretendo é que as divs 'content' estejam umas por cima das outras, dai ter usado o position:absolute para cada uma delas. Agora o problema é que a div 'container' fica sem height nenhum, e o footer fica por cima das divs content...

obg!

a div container está sem height por que você definiu height:auto à ela.

Some todos os height's e substitua o valor total pelo "auto" do height(container), aplicando também um position:absolute. Ficando assim:

.container {
 width :100%;
 height: 600px;
 position: absolute;
}

E para o footer, adicione a tag div dele dentro da tag div container. Ficando assim:

<html>
 <head>
    <link rel="stylesheet" href="test.css" />
 </head>
 <body>
    <div>
	  <div class="container">
		    <div class="content-a">
		    </div>
		    <div class="content-b">
		    </div>
		    <div class="content-c">
		    </div>
		    <div class="footer">
		    </div>
	  </div>
    </div>
 </body>
</html>

E no CSS remova o position:relative.

Link to comment
Share on other sites

Ola ske,

Eu preciso que o height do 'container' seja mesmo auto, porque eu nunca irei saber (de ante-mao) qual o valor real de height dos 'contents', pois estes irao ter conteudo dinamico.. (logo as suas dimensoes serao dinamicas)

Eu queria evitar ao maximo o uso de javascript, visto isto ser uma operacao basica em qualquer ambiente de desenvolvimento de UI...

Mas pelo que parece, HTML e CSS nao dao essa hipotese, e la tive eu de reinventar a roda... (Peco desculpa se estarei a ofender o pessoal mais hardcore de html e css, mas isto esta a deixar-me mesmo frustado e continuo com a ideia de que me estara a escapar algo...)

Obrigado à mesma! 👍

cumps,

cc

Cumps,

cc

Link to comment
Share on other sites

Se a ideia é colocar div dentro de div deverias definir isso mesmo no css.

Ou seja, deverias dar á primeira div um id e se as outras forem classes nomea-las juntamente ás divs. Se as colocares com id deverás tambem fazer o mesmo.

Exemplificando:

HTML:

<div id="content>
<div class="content-a>
....
</div>
</div>

CSS:

div#content{
....
}
div#content.content-a{
....
}

Espero ter ajudado. 🙂

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.