Positionnement d'images en CSS

Version imprimable

30/08/2016, 23h15
ColChope

2 pièce(s) jointe(s)

Positionnement d'images en CSS

Bonjour,
J'ai besoin d'aide sur quelque chose que je ne sais pas faire avec du CSS.
Pour vous aider au maximum à comprendre le problème, je vais déjà utiliser deux images pour vous montrer ce que je souhaite :
Ce que j'ai (je suis obligé de donner un lien, l'image étant trop lourde):
http://image.noelshack.com/fichiers/...72591245-1.png

Ce que je voudrai (montage):
http://image.noelshack.com/fichiers/...72591460-2.png

Ensuite, vous pouvez accéder au site ici.

L'élément concerné est :
Pièce jointe 219214

Et en CSS, on a ça :
Pièce jointe 219215

J'ai déjà essayé de changer les attributs de display et position bien sûr, rien n'y fait.

Naturellement, vous pouvez me demander des détails.

Merci par avance !
05/09/2016, 20h06
ColChope

J'ai peut-être mal formulé ma demande ? :/
06/09/2016, 13h59
NoSmoking

Bonjour,
pas forcément mais je ne connais pas grand monde qui a envie de re-écrire ton CSS/HTML pour faire des tests ;)
06/09/2016, 18h50
vttman

Hello ColChope,

Si si c'est complètement compréhensible ;)

Peut-être regarder du coté flexbox ?
Taper par exemple sous Goo*gle "a complete guide to flexbox"
06/09/2016, 21h43
Invité

Bonjour,

comme dit plus haut, le mieux est que tu COPIES-COLLES (dans le contenu du message) le code (HTML, CSS), plutôt qu'en mettre des images !

Citation:

"Aide-nous à t'aider" !

Si on ne peut pas tester... :koi:

Autant pour moi, je vous poste mon css:

Code:

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
68
69
70
71
72
73
74
#thumbnails {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 0 0.75em;
		margin-top: 20px;
	}
 
		#thumbnails article {
			position: relative;
			width: 50%;
			height: 100%;
			background: #101010;
			outline: 0;
		}
 
			#thumbnails article .thumbnail {
				-webkit-tap-highlight-color: transparent;
				display: block;
				position: relative;
				border: 0;
				outline: 0;
			}
 
				#thumbnails article .thumbnail img {
					display: block;
					width: 100%;
					height:100%;
				}
 
				#thumbnails article .thumbnail:before {
					-moz-pointer-events: none;
					-webkit-pointer-events: none;
					-ms-pointer-events: none;
					pointer-events: none;
					-moz-transition: opacity 0.25s ease;
					-webkit-transition: opacity 0.25s ease;
					-ms-transition: opacity 0.25s ease;
					transition: opacity 0.25s ease;
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					box-shadow: inset 0 0 0 2px #00D3B7, inset 0 0 0px 3px rgba(0, 0, 0, 0.15);
					opacity: 0;
					z-index: 1;
				}
 
				#thumbnails article .thumbnail:focus:before {
					opacity: 0.5;
				}
 
			#thumbnails article h2, #thumbnails article p {
				display: none;
			}
 
			#thumbnails article.active .thumbnail:before {
				opacity: 1;
			}
 
		@media screen and (max-width: 480px) {
 
			#thumbnails article .thumbnail:before {
				display: none;
			}
 
		}

Mais, vous n'y avez pas accès en allant sur le site avec la console de votre navigateur ?

Sinon vttman, je n'ai pas vu où flexbox intervient dans mon code. Où l'as-tu vu ?

Citation:

Sinon vttman, je n'ai pas vu où flexbox intervient dans mon code. Où l'as-tu vu ?

[EDIT]
Pas dans le code donné initialement non ...
Mais je le vois là maintenant !?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 thumbnails { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 0.75em; margin-top: 20px; }

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#thumbnails {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
  display: block;
  margin-top: 20px;
  padding: 0 0.75em;
}
 
#thumbnails article {
  background: #101010 none repeat scroll 0 0;
  height: auto;
  outline: 0 none;
  width: 100%;
  padding: 0;
  margin: 0;
}

08/09/2016, 23h16
ColChope

vttman, ah d'accord c'est ça flexbox. Ce n'est pas moi qui ai fait le code, tu dois t'en douter :p

jreaux62, merci à toi ça marche parfaitement !

Merci aux autres également !