Discussion :

[NeoGeekette]

Bonjour à vous,

Comme le dis mon pseudo, je suis toute nouvelle dans le monde du développement. Suite à un petit souci de santé, je suis en cours de reconversion vers ce métier ô combien passionnant.

Actuellement je travaille sur un projet pour lequel je me retrouve face à un manque de connaissance, un manque de compréhension, ou peut être suis je trop blonde pour résoudre mon souci ; c'est pourquoi je me retourne vers la communauté de Développez.com.

Voilà mon souci,j'ai créée un sprite vertical qui sera utilisé comme menu, il s'affiche mais pas dans le conteneur voulu mais juste en dehors et je ne vois pas où est le problème. Vous trouverez ci dessous, les bouts de mon code concerné, attention on ne rigole pas, j'en vois déjà qui sourient au fond de la salle . Je rappelle que j'ai moins d'un an de formation et que je débute, donc désolé par avance pour les bêtises que je dirais .

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
26
27
28
29
30
31
 
<aside>
 
 
		<div>
			<!-- div définissant la section html se rapportant  à la map-->
			<div class="map" id="map"></div>
 
			<div id="aside-l">
				<ul class=icone>
					<li class="icone-1"></li>
					<li class="icone-2"></li>
					<li class="icone-3"></li>
					<li class="icone-4"></li>
					<li class="icone-5"></li>
					<li class="icone-6"></li>
					<li class="icone-7"></li>
				</ul>
			</div>
 
		</div>
 
		<!-- SCRIPT D'INITIALISATION DE LA MAP-->
		<script type="text/javascript">
                init();
                AddMarker();
                </script>
 
 
 
	</aside>

et le CSS qui va avec :

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
68
69
 
aside {
	background: black;
	width: auto;
	height: 1125px;
	position: relative;
}
 
.map {
	width: 1335px;
	height: 1125px;
	float: left;
	list-style: none;
}
 
#aside-l {
	position: absolute;
	background: black;
	width: 48px;
	height: 1125px;
	z-index: 1000;
	float: left;
	opacity: 0.3;
	background-position: 0px 0px;
}
 
.icone ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
 
.icone li {
	width: 48px;
	height: 48px;
	background: url("./js/img/spriteIcone.png") no-repeat;
	float:left;
	list-style: none;
	margin:0;
	padding:0;
}
 
.icone .icone-1 {
	background-position: Left top;
}
 
.icone .icone-2 {
	background-position: Left -48px;
}
 
.icone .icone-3 {
	background-position: Left -96px;
}
 
.icone .icone-4 {
	background-position: Left -144px;
}
 
.icone .icone-5 {
	background-position: Left -192px;
}
 
.icone .icone-6 {
	background-position: Left -240px;
}
 
.icone .icone-7 {
	background-position: Left -288px;
}

Je vous remercie par avance pour l'aide que vous m'apporterez afin que je comprenne mon erreur.

Flo, neogeekette un jour, neogeekette toujours

[Bisûnûrs]

A vue d'oeil, je vois déjà une erreur dans ton CSS :

Code :

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

1
2
3
.icone ul {
   ...
}

Comme c'est le ul qui a la classe .icone, le ul n'est donc pas inclus dans la classe .icone comme ton CSS le suggère.

Après, sans l'image, difficile de se faire une idée. Peut-être peux-tu poster ton code sur codepen.io, pour qu'on puisse se rendre compte du résultat ?

[NeoGeekette]

Bonjour Bisûnûrs,

Je suis confuse et je dois avouer rouge de honte , car en effet mon souci venait de cette erreur çi. En retirant le .icone et en laissant juste ul tout s'est mis en place correctement. Et dire que je chercher comme une folle alors que c'était sous mon nez, désolé pour le dérangement.

Merci mille fois pour avoir vu mon problème au premier coup d’œil. Merci, merci.