Discussion :

[rigadine]

Bonjour,

Je rencontre un souci sur mon fichier html. Le retour ligne au niveau ne s'effectue pas pour la phrase "Protection physique et logique du Système d'Information".
Je souhaiterai qu'il y ait un retour-ligne juste après "Sécurisation du patrimoine informationnel".
le <br> je marche pas ni <br/>.
Autrement ça fonctionne nickel pour les autres "toogles" le retour ligne se fait normalement.

Quelqu'un a une idée ???

Merci beaucoup pour votre aide.

Ci-dessous le code.

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
 <div class="toggle grid-wrap">
                <ul class="titreespace">
                  <p><span class="titreespace">Mise en place de la Correspondance « Informatique & Libertés »</span></p>
                  <br>
                </ul>
                <ul class="espace">
                  <li>Audit et diagnostic du Système d’Information et plan d’action</li>
                  <li>Analyse du besoin</li>
                  <li>Conseil en recrutement du Correspondant Informatique & Libertés</li>
                  <li>Mise en place d’outils de Gestion des données personnelles</li>
                  <li>Diffusion de la culture Informatique & Libertés</li>
                </ul>
              </div>
 
              <div class="toggle grid-wrap">
                <ul class="titreespace">
                  <span class="titreespace">Sécurisation du patrimoine informationnel</span><br>
                </ul>
                <ul class="espace">
                  <li>Protection physique et logique du Système d'Information</li>
                </ul>
              </div>
            <li>
              <h5 class="toggle-title">Gestion des projets informatiques et Systèmes d'information</h5>
              <div class="toggle grid-wrap">
                <ul class="espace">
                  <li> Définition du périmètre du projet : fonctionnel, organisationnel, technologique </li>
                  <li>Définition des rôles et responsabilités des acteurs (MOA/MOE)</li>
                  <li>Rédaction du  cahier des charges dans la démarche du projet</li>
                  <li>Mise en place du projet</li>
                  <li>Pilotage du Projet</li>
                  <span class="retourlignespace">Mise en place de tableaux de bord et indicateurs</span>
                  <li>Accompagnement au changement</li>
                  <li>Formation des utilisateurs aux nouveaux processus et procédures</li>
                  <li>Mise en place d’une politique de Communication interne et externe</li>
                </ul>
              </div>
            </li>

et le code CSS :

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
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
 
/* - Toggles */  
.toggle-view > li {
	margin-top: 1em;
	position: relative;
}
.toggle-title {
	padding: 0.8em 2em;
	}
 
.toggle-title-detail {
	font-size: 0.8em;
	color: #000;
	font-weight: normal;
	text-transform: lowercase;
}
.toggle-title:after {
	content: "\25C0";
	float: right;
	color: #999;
}
.toggle-title:hover:after {
	color: #555
}
.tactive {
	background: #FFF
}
.tactive:after {
	content: "\25BC";
	color: #555;
}
.toggle {
	padding: 1em 2em;
	display: none;
	overflow: hidden;
}
.toggle > ul li {
	line-height: 2.5
	margin-left: 30px;
	}
.toggle > ul li:before {
	content: "\2714 ";
	color: #ddd;
	margin-right: 1em;
}
.espace {
	margin-left: 30px;
	font-size: 14px;
	float: left;
	left: auto;
	color: #3D74AC;
	line-height: 1.6;
	font-family:"Open sans","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;	
}
.titreespace {
margin-left:0.625em;
	font-size: 93.8%;
	float: left;
	left: auto;
	color: black;
	line-height: 1.6;
	font-family:"Open sans","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
	padding-top:5px 0 5px 0;
	font-weight:100;	
 
}
 
.retourlignespace {
	margin-left:25px;
}

[rodolphebrd]

Bonjour,

il y a un problème sur la construction de votre code HTML due à une confusion d'utilisation des balises UL et LI.
Des Ul vides ...
Des LI sans UL ...

L'utilisation de la balise BR est inappropriée pour créer des espaces entre les balises. La propriété margin remplie bien cet office.

[rigadine]

Merci Rodolphe, je vais regarder tout ça. Je débute ;-)

[Invité]

Bonjour,

.... Je débute ;-)

Voici d'excellents cours et tutos pour bien débuter :
=> Les meilleurs cours et tutoriels (X)HTML
=> Les meilleurs cours et tutoriels CSS

On notera au passage qu'il faut utiliser les "bonnes" balises :
- un titre se met dans des balises <h1>,<h2>,<h..>,<h6>
De plus, cela permet une hiérarchisation des informations, et donc un meilleur référencement.