Discussion :

[narkhor]

b'soir,

voila mon problème, j'ai quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="parent">
  <div class="div1">
    bla bla bla ...
  </div>
  <div class="div2">
    autre bla bla ...
  </div>
</div>

ce que je veux, c'est que div1 et div2 soit superposer et prennent tout deux toute la place de parent.

j'ai réussit a faire ce que je veux si la taille de parent est fixe, malheureusement, je cherche a le faire avec une hauteur quelconque (en fait, la hauteur de parent est celle nécessaire a div1.

le css pr la taille fixe:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
  height : 200px;
}
 
.div1{
  position: relative;
  height:100%;
}
 
.div2{
  position: relative;
  top:-100%;
  height:100%;
}

le résultat peut-être vu ici ou ici, c'est la news:
il y a div1 que contient le texte de la news qui a un fond transparent et div2 en dessous avec un font d'image dont la transparence est réglé avec opacity:0.x;

j'aimerai obtenir le même résultat sans avoir a fixer la hauteur.

si quelqu'un a une idée, je suis prenneur.

[narkhor]

j'ai finalement réussit *ouf*

pour ceux que ça intéresse,

html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="news">
  <div class="news_bg"><br/></div>
  <div class="news_cont">
    <h3>2006-03-02: titre</h3>
    <pre>ma 
news</pre>
    de <i>auteur</i>
 
  </div>
</div>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.news{
  position : relative;
  width: 70%;
  margin-left:auto;
  margin-right:auto;
  margin-top: 20px;
}
 
.news_cont{
  posietion: absolute;
  height:100%;
  background: transparent;
  padding: 10px;
}
 
.news_bg{
  position: absolute;
  background-image: url(../img/fond.jpg);
  height:100%;
  width:100%;
  opacity: 0.4;
  z-index: -1;
}
 
div.news_cont > pre {
  border: 1px solid red;
}

et vala!