Mettre des images différentes d'une liste dans 2 pages

**jlb59** · 11/09/2024, 10h27

Bonjour à tous,

Dans 1 page, j'ai fait une liste avec image :

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
/* ##### Tolltip du Test de QI ##### */
ul {
  list-style-image: url("images/deco/g.jpg");;
}
li {
  display: flex;
  align-items: center;
  position: relative;
}
li::before {
  content: "» ";
  color: #F00;
  font-size: 1.18em; 
  margin-right: .3em; 
}
li a {
  min-width: auto;
  position: relative;
}
.info-content {
  font-size: 0.85em;
  display: none;
  z-index: 555;
  position: absolute;
  top: 100%;
  left: 50%;
  width: auto; 
  margin-top: 0.3em;
  padding: .5em;
  min-width: 24em; 
  border: 2px solid #080;
  border-radius: 10px;
  color: #000;
  background-color: #AFEEEE;
}
.info-content big {
  margin: 0 0 .25em;
}
 
li a:link{color: blue;}
 
li a:hover {
  background-color: yellow;
  color: #000;
}
li a:hover .info-content {
  display: block;
}

Code source de la page :

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
<!-- <div class='liste-test-qi'> -->
	<section class='ecart60'>
 
		<header><span class="puce-page">&nbsp;&nbsp;</span><span class="majuscule gras">Section générale</span></header>
 
		<ul>
			<li>
				<a href="?page=mot_etranger" class="info-inside">Mot étranger
					<div class="info-content">
						<big><b>Mot étranger</b></big><br><b>(20 questions)</b><hr>
						<div>Cherchez le mot ne correspondant pas à ceux présents.</div>
					</div>
				</a>
			</li>
			<li>
				<a href="?page=manque_chiffre_lettre" class="info-inside">Manque Chiffre et/ou Lettre
					<div class="info-content">
						<big><b>Choix de chiffre et/ou de lettre</b></big><br>(10 questions)<hr>
						<div>Soyez attentif et réfléchi pour trouver la bonne combinaison.</div>
					</div>
				</a>
			</li>

Ce qui donne :
Nom : xxxx.jpg
Affichages : 118
Taille : 15,4 Ko

Jusque là tout va bien
Mais pour faire un sitemap, je voudrais faire la même chose mais avec d'autres images mais je n'y arrive car ce sont les images du Tooltip qui s'affichent :

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
/* ##### Sitemap ##### */
div# plan {
	font-family : verdana, tahoma, arial, Times, serif;
	padding-top:    10px;
	padding-bottom: 10px;
	padding-left:   70px;
}
.rep {
	list-style-image : url(../images/sitemap/folder.gif);
}
.files {
	margin-left : 2px;
	list-style-image : url(../images/sitemap/book2.gif);
}
 
.centre_img {
    display: block;
    margin: 10px auto;
}

Code source de la page :

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
<div id="plan">
  	<ul>
  		<li class="rep">Page de bienvenue
  			<ul>
  				<li class="files"><a href="?page=accueil">Accueil</a></li>
  			</ul>
  		</li>
	</ul>
  	<ul>
  		<li class="rep">A propos
  			<ul>
  				<li class="files"><a href="?page=apropos">A propos</a></li>
  			</ul>
  		</li>
	</ul>

Ce qui donne :
Nom : Image2.jpg
Affichages : 115
Taille : 28,2 Ko

Vous voyez ce ne va pas ?

Merci de votre aide.

**NoSmoking** · 11/09/2024, 17h36

Bonjour,
tes éléments <li> sont en display: flex donc la propriété list-style-image ne s'applique pas !

Pour la partie <div id="plan"> il te faudrait écrire quelque chose comme :

Code :

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

1
2
3
4
5
6
#plan li {
  display: list-item;    /* ou display: revert */
}
#plan li:before {
  content: none;
}

... pour annuler le style des tes autres listes.

Au passage

ton sélecteur div# plan est non valide !
l'élément <big> est obsolète et ne sert en plus à rien

**jlb59** · 11/09/2024, 17h39

Bonjour,

C'est noté et je vais faire les modifs.

**jlb59** · 11/09/2024, 18h15

Le dernier est modifié.

Au niveau du Sitemap, je ne comprends pas très bien ce que tu veux dire.

Mais je pense que je n'aurais pas dû mettre les 2 parties du code, seule la 2ème pose problème, dont tu m'a dit quoi faire.

Seulement, il n'y a aucune image qui s'affiche sauf les puces normales des listes.
Mais je ne comprends pas trop bien quand tu m'as dit de mettre "display: list-item;"

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
/* ##### Sitemap ##### */
#plan li {
	display: list-item;
	font-family : verdana, tahoma, arial, Times, serif;
	padding-top:    10px;
	padding-bottom: 10px;
	padding-left:   70px;
}
#plan li:before {
	content: none;
}
 
div# .rep ul {
	list-style-image : url(../images/sitemap/folder.gif);
}
div# .files ul li {
	margin-left : 2px;
	list-style-image : url(../images/sitemap/book2.gif);
}

**NoSmoking** · 11/09/2024, 19h46

Envoyé par NoSmoking;

Au passage

ton sélecteur div# plan est non valide !

tu n'as pas corrigé correctement les sélecteurs, div# ne veut rien dire, .files ul li ne cible aucun élément et .rep ul ne cible pas ce que tu penses, le CSS n'est donc pas appliqué et/ou le sera mal !

Il te faudrait avoir dans ton CSS le code suivant :

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
/* ##### Sitemap ##### */
#plan ul {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 70px;
  font-family: verdana,tahoma,arial,Times,serif;
}
#plan li {
  display: list-item;
}
#plan li:before {
  content: none;
}
#plan .rep {
  list-style-image: url(../images/sitemap/folder.gif);
}
#plan .files {
  margin-left: 2px;
  list-style-image: url(../images/sitemap/book2.gif);
}

**jlb59** · 11/09/2024, 20h16

Envoyé par NoSmoking

tu n'as pas corrigé correctement les sélecteurs, div# ne veut rien dire, .files ul li ne cible aucun élément et .rep ul ne cible pas ce que tu penses, le CSS n'est donc pas appliqué et/ou le sera mal !

Il te faudrait avoir dans ton CSS le code suivant :

C'est vrai que je mélange trop.
Tu sais, je suis de la vielle école, et ré apprendre les nouveautés du CSS demandent des applications, comme celles que tu m'as données.

Comme je fais mes tests pour le que, ça demande de la recherche et aussi mon apprentissage d'il y a + de 50 ans, surtout l'algèbre. Avant, j'étais pas trop mauvais mais j'ai beaucoup oublié.

Donc, je n'avais pas trop le temps de mettre au point certaines parties du CSS, comme le sitemap, parce que j'ai gardé l'ancienne structure que j'avais, mais ça n'allait plus avec le CSS.
Par exemple le "before", je l'avais déjà vu, mais je ne savais pas comment l'appliquer.

Bon, là il se fAit tard mais je vais modifier avec ce que tu m'as donné... en espérant ne pas faire trop de bêtises.

Bonne soirée et merci encore.

**jlb59** · 12/09/2024, 07h50

Bonjour,

C'est toujours pareil, que des puces standard, il doit certainement y avoir un mauvais chemin d'indiquer pour les images existantes.

Je vais voir ça de plus près.

**NoSmoking** · 12/09/2024, 16h59

C'est toujours pareil

si je m'en réfère à la page en ligne le soucis a été résolu avec l'application des indications fournies.

**jlb59** · 12/09/2024, 17h26

Exact !
J'ai fait ça juste avant de partir.
Donc, c'est résolu.
J'ai trouvé en passant au mode classique.

Je suis sur le portable, et je n'ai pas vu le bouton "résolu", ça peut se fait avec un téléphone ?

Mettre des images différentes d'une liste dans 2 pages

CSS

Discussions similaires

Partager

Partager