Avec jquery, on peut faire des trucs facilement:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta charset="UTF-8" />
<title>Titre de l'article - Nom du site</title>
<meta name="description" lang="fr" content="Description de l'article" />
<script type="text/javascript">
document.documentElement.className ="hasJS " + document.documentElement.className;
</script>
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size:90%;
}
h1 {
color: red;
}
/*si javascript est désactivé ou activé mais visible*/
div#comments, .hasJS div#comments.visible {
background-color: #CCC;
position:static;
top: 0;
left: 0;
}
/*si javascript est activé, envoi des commentaires en dehors de la page)*/
.hasJS div#comments {
position: absolute;
top: -5000px;
left: -5000px;
}
</style>
</head>
<body class="post">
<header id="top" role="banner">
<h1><span><a href="http://monsite.net/">Nom du site</a></span></h1>
</header>
<article id="p177" class="post">
<header>
<h2 class="post-title" lang="fr">Titre de l'article</h2>
<p class="post-info">Par <b class="author"><a href="http://monsite.net/">Truc</a></b>
le <time datetime="2010-10-24T11:54:00+02:00" pubdate="pubdate">dimanche 24 octobre 2010, 11h54</time>
- <a href="http://monsite.net/category/Alsa">Alsa</a>
- <a href="http://monsite.net/mon-article">Lien permanent</a>
</p>
</header>
<div class="post-content" lang="fr">
<p>Blablabla…
contenu de l'article
</p>
</div>
<section>
<div id="comments">
<h3>Commentaires</h3>
<article id="c426" class=" odd first">
<header>
<h4><a href="#c426" class="comment-number">1.</a>
Le <time datetime="2010-10-24T15:15:10+02:00" pubdate="pubdate">dimanche 24 octobre 2010, 15 h 15</time>
par <b class="author"><a href="http://www.guillaume.fr" rel="nofollow">Guillaume</a></b></h4>
</header>
<div>
<p>Super génial</p>
</div>
</article>
<article id="c430" class=" ">
<header>
<h4><a href="#c430" class="comment-number">2.</a>
Le <time datetime="2010-10-29T15:51:35+02:00" pubdate="pubdate">vendredi 29 octobre 2010, 15 h 51</time>
par <b class="author"><a href="http://www.pof.org" rel="nofollow">pof</a></b></h4>
</header>
<div class=" ">
<p>Sacré boulot, bravo</p>
</div>
</article>
<form action="http://monsite.net/mon-article" method="post" id="comment-form">
<h3>Ajouter un commentaire</h3>
<p class="field"><label for="c_name">Nom ou pseudo :</label>
<input required="required" aria-required="true" name="c_name" id="c_name" type="text" maxlength="255"
value="" />
</p>
<p class="field"><label for="c_mail">Adresse email :</label>
<input required="required" aria-required="true" name="c_mail" id="c_mail" type="email" maxlength="255"
value="" placeholder="mail@example.com" />
</p>
<p class="field"><label for="c_site">Site web (facultatif) :</label>
<input name="c_site" id="c_site" type="url" maxlength="255"
value="" placeholder="http://www.example.com/" />
</p>
<p style="display:none"><input name="f_mail" type="text" size="30"
maxlength="255" value="" /></p>
<p class="field"><label for="c_content">Commentaire :</label>
<textarea required="required" aria-required="true" name="c_content" id="c_content"
rows="7"></textarea>
</p>
<p class="form-help">Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.</p>
<p class="buttons"><input type="submit" class="preview" name="preview" value="prévisualiser" />
</p>
</form>
</div>
</section>
<footer>
<p id="ping-url">URL de rétrolien : http://monsite.net/trackback/177</p>
<p id="comments-feed"><a class="feed" href="http://monsite.net/feed/atom/comments/177"
title="Fil Atom des commentaires de ce billet">Fil des commentaires de ce billet</a></p>
</footer>
</article>
<footer>Pied de page</footer>
<script type="text/javascript">
$(window).load(function(){
/*ajout d'un lien pour afficher les commentaires*/
$('div#comments').before('<p><a href="#comments" id="showcomments">Voir les commentaires</a></p>');
/*si on clique sur le lien ils s'affichent*/
$('a#showcomments').bind('click', function() {
$('div#comments').toggleClass('visible');
return false;
});
});
</script>
</body>
</html>
Si javascript est désactivé, les commentaires et le formulaire s'affichent à la suite…
À adapter à ton cas.
Modifié par Patidou (25 Nov 2010 - 13:53)
!
.