Discussion :

[docteurdread]

Hello la communauté!

Je crée actuellement un site WEB grâce à des tutoriels trouvés sur notre magnifique internet

Je suis confronté à un problème, voici une explication:

-Je souhaite superposer 2 blocs: 1 image et 1 div

Mais voilà, lorsque j'ajoute les "position: relative" et "position: absolute", les 2 div disparaissent et seul un petit bout reste visible ^^

Petite image, histoire d'illustrer le problème:



Comme vous pouvez le constater, tout ça n'est pas le résultat souhaité



Voici le code HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
	  <section class="page3">
	      <div class="page_container">
		      <ol class='portfolio-list'>
	              <li>
		              <img src="image1.jpg" alt="logo" />
					  <div class="img-alpha"> </div>
	              </li>
              </ol>
  	      </div>
      </section>

Et l'incontournable 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
    .main section .page_container {
      position: relative;
      margin: 0 auto 0;
      max-width: 1100px;
      z-index: 3;
    }
    .main section  {
      overflow: hidden;
    }
 
///////////////////////////////////////
 
 .main section.page3 {
	  background: #ffffff;
    }
    .main section.page3 .page_container {
      overflow: hidden;
    }
 
 
.portfolio-list
{   
    margin: 0;
    padding: 0;
    display: inline-block;
	overflow: hidden;
	margin-top: 100px;
}
 
.portfolio-list li
{
    float: left;
    display: block;
    padding: 0;
}
 
.portfolio-list li img
{
    width: 500px;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 1px 1px 8px #555;
	z-index: 0;
	position: absolute;
}
 
.img-alpha
{
    width: 500px;
	height: 500px;
	position: absolute;
	background: rgba( 51, 51, 51, 0.5);
	z-index: 1;
}
 
.img-alpha:hover
{
    width: 500px;
	height: 500px;
	position: absolute;
	background: rgba( 51, 51, 51, 0.9);
	z-index: 1;
}

Voilà !



Je vous remercie d'avance pour vos réponses

[NoSmoking]

Bonjour,
avec ce que tu nous donnes il y a peu de chance que l'on puisse t'aider efficacement si ce n'est te donner des pistes.

Vérifie qu'un élément ne vienne pas recouvrir ta SECTION, car même si le code HTML n'est pas des plus judicieux, il semble être conforme.

[docteurdread]

Merci pour ta réponse
J'ai ajouté du code CSS que j'avais oublié de mentionner, je m'excuse :s
Par contre, je suis sûr que rien au-dessus de la section (au niveau hiérarchique) ne peut recouvrir la section.

Par contre, je me demande (avec le code css ajouté), si le page_container ne pose pas problème :/

[NoSmoking]

Je viens de prendre ton code et de le tester à brut, je n'ai pas de soucis de visibilité de la totalité de la SECTION.

Aurais tu une page de test en ligne car sur l'image on voit en plus un menu et...

[docteurdread]

Voici: http://jsfiddle.net/ug47atc1/
Je te préviens, c'est plutôt long

Merci pour ta réponse

[Candygirl]

Hello,

Je n'ai rien testé mais à lire ton bout de code dans le premier message ton résultat me semble assez logique.

Tu attribues des overflow:hidden à un peu tout: .main section, .main section.page3 .page_container , .portfolio-list
Tout ce que tu as à l'intérieur de .page_container, c'est des éléments positionnés en absolute, donc "invisible" pour leurs ancêtres et donc pas pris en compte par ce dernier pour fixer sa hauteur. Il a donc une hauteur (quasi) nulle et comme tu as spécifié de cacher tout ce qui dépasse, forcément que tes blocs positionnés en absolute à l'intérieur "disparaissent".