Discussion :

[raaph]

Bonjour !

Je dois réaliser une barre navigation particulière car les éléments (images) sont obliques (image ici => http://hpics.li/cbe7eda).
J'ai d'abord testé les parallélogrammes en CSS (comme présenté ici : https://css-tricks.com/examples/ShapesOfCSS/), mais cela déforme l'image.
J'ai alors fait plus "simple" en créant une div pour chaque élément et ensuite tenté de les rapprocher avec la propriété LEFT et cela donne quasiment le résultat voulu.

Je dit quasiment car le dernier élément DIV est à la ligne. Je pense que le problème vient de la largeur des div qui sont de 400px or le conteneur a une largeur de 1280px. Cela voudrait dire que le left dans le css n'est pas pris en compte dans le calcul par le navigateur ? Car les quatre DIV à la suite n'occupent que 1219px (margin-right inclus)...
J'ai testé tout plein de configuration en jouant sur les différents mode de display, etc. mais rien n'a marché

Quel genre d'alternative je pourrai trouver ? Merci de m'aider

Code HTML :

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
 
<div class="nav">
		<ul class="liens">
			<li class="bloc-fle">
				<a href="#">
					<span class="bloc"></span>
				</a>
			</li>
			<li class="bloc-bts">
				<a href="#">
					<span class="bloc"></span>
				</a>
			</li>
			<li class="bloc-bs">
				<a href="#">
					<span class="bloc"></span>
				</a>
			</li>
			<li class="bloc-lp">
				<a href="#">
					<span class="bloc"></span>
				</a>
			</li>
		</ul>
  </div>

Code CSS :

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
 
 .nav {
	 display:block;
	 width:1280px;
	 margin: 0 auto;
 } 
 ul.liens {
	display: inline-block;
	padding: 0;
}
 ul.liens li {
	display: block;
	float: left;
	text-align: center;	
	width: 400px;
	height: 250px;
	margin-right: 18px;
}
li.bloc-fle { background:url(../img/fle.png) no-repeat center center; background-size: cover; position: relative; left: 0; z-index: 100; }
li.bloc-bts { background:url(../img/bts.png) no-repeat center center; background-size: cover; position: relative; left: -145px; z-index: 90; }
li.bloc-bs { background:url(../img/bs.png) no-repeat center center; background-size: cover; position: relative; left: -290px; z-index: 80; }
li.bloc-link-paris { background:url(../img/lp.png) no-repeat center center; background-size: cover; position: relative; left: -435px; z-index: 70; }
 
ul.liens li a {
	display: block;
	width: 100%;
	height: 100%;
}

[VirgApps]

Bonjour, as tu essayé de mettre

Code :

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

box-sizing: border-box

sur tes div ? En théorie le width spécifié prend ainsi en compte les marges.

[raaph]

Oui mais sans résultat, et aussi en testant en display:inline-flex sauf que ce n'était pas compatible partout.

Mais j'ai trouvé la solution qui était toute simple, utiliser margin-left au lieu de left...