Zone de commentaire en marge de texte

**tubaas** · 30/09/2011, 19h22

Bonjour.
Je suis débutant en développement WEB et j'étais intéressé par le système de commentaires du Django-book.
Je bloque pour l'instant sur un problème très basique : comment définir chacune des zones que l'on peut survoler et cliquer. Je suppose que c'est avec des éléments div mais je n'ai aucune idée de la mise en oeuvre du CSS pour ces éléments.
Voici le code HTML :

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
<!DOCTYPE html>
<html>
	<head>
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Un document HTML</title>
	</head>
	<body>
		<div class="comment_zone" id="ID_1289309448"></div>
		<h1>Livre</h1>
		<div class="comment_zone" id="ID_799214640"></div>
		<h2>Chapitre 1</h2>
		<div class="comment_zone" id="ID_1890545136"></div>
		<p>la du texte pour ce chapitre</p>
		<div class="comment_zone" id="ID_1868772464"></div>
		<h2>Chapitre2</h2>
		<div class="comment_zone" id="ID_100702650"></div>
		<h3>Section 1</h3>
		<div class="comment_zone" id="ID_191897855"></div>
		<p>la du texte pour cette section la</p>
		<div class="comment_zone" id="ID_657812945"></div>
		<h3>Section2</h3>
		<div class="comment_zone" id="ID_632306700"></div>
		<p>la du texte pour cette section ci</p>
	</body>
</html>

Je voulais savoir si j'étais sur la bonne voie et si vous aviez des conseils. Merci.

**tubaas** · 01/10/2011, 10h21

J'ai finalement trouvé un système similaire (ucomment) qui offre ses sources dont voici la page css et une page d'exemple associée.
Voici les passages intéressants du fichier CSS :

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
/* ucomment-border: the 20px margin creates the click elements for the ucomments */
#ucomment-border {
        margin-left: 20px;        /* Only use "px": used in Javascript calculations */
        background: white;
        color: black;
    padding-top: 1em;     /* Don't remove top and bottom padding: leads to    */
    padding-bottom: 2em;  /* unwanted horizontal borders around the document. */
        padding-left: 2em;
        padding-right: 2em;
 
}
 
 
 
/* Floating indicator that appear in the left margin.  The left-edge pixel
   location is set in the Javascript file: it is usually -44px though.*/
span.ucomment-indicator {
    position: absolute;
    width: 20px;
    z-index: 100;
    text-align: center;
    color: black;
    font-size: 11px;
    font-weight: normal;
    left: -44px;
    top: 0; }
 
span.ucomment-indicator:hover {
    /* Colour when hovering mouse in comment margin*/
    background-color: #4080BB;
}
span.ucomment-indicator span {
    position: absolute;
    top: -10px;
    width: 25px;
    height: 25px;
    left: -10px;
}
span.ucomment-indicator:hover span{
    background-image: url(add-comment.png);
}
span.ucomment-has-comments > span,
span.ucomment-has-comments:hover > span {
    background-image: url(existing-comment.png);
}

Je remarque qu'il utilise des éléments span et non div, je vais donc regarder plus en détail la création des pages html (ucomment-indicator n'apparaît pas dans le template principal), ainsi ensuite que leur interaction avec javascript.

Edit : en effet les balises span sont créées dans le fichier javascript l.563 et l.250

Zone de commentaire en marge de texte

CSS

Vue hybride

Discussions similaires

Partager

Partager