Site d'Artem Grebenyuk

J'ai décidé de regrouper toutes les questions concernant la thématisation de mon site dans un seul thème.

On m'a envoyé ici pour demander conseil depuis Vkontakte.

Passons aux choses sérieuses :

Je thématise Drupal, j'ai créé Page.tpl.php sans problème.

J'ai rencontré des blocages dans  Node.tpl.php

Voici ce que j'ai :

Css 

.node#wrapper{width:720px; margin:0 auto;}
.node#title{height:20px; width:720px; font-size:20px; font-family:Arial, Helvetica, sans-serif; color:#37B700;}
.node#title::first-letter{text-transform:uppercase} 
.node#title a{color:#37B700; text-decoration:none;}
.node#title a:hover{color:#37B700; text-decoration:underline;}
.node#posttitle{height:10px; width:720px; font-size:9px; font-family:Arial, Helvetica, sans-serif; color:#AAA;}
.node#posttitle::first-letter{text-transform:uppercase}
.node#posttitle a{text-decoration:none}
.node#posttitle a:hover{text-decoration:underline}
.node#img{float:left; margin-right:5px;margin-bottom:5px; border:ridge 2px #CCC}
.node#comments{display:block; width:50px; height:60px; float:right; margin-left:5px; margin-bottom:5px; background:url(images/comment.png); font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:24px; text-decoration:none; text-align:center;}
.node#comments p{ margin-top:13px;}
.node#more{background-image:url(images/more.png);display: block;float: right;height: 28px;line-height: 24px;margin-left: 5px;font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:14px;text-decoration:none; text-align:center;width: 85px;}
.node#content{width:720px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:justify;}
.node#post{width:738px; height:8px; margin-left:-8px; background:url(../images/postnode.png); clear:both; margin-top:35px; background-repeat:repeat-x; margin-bottom:6px;}
.node#tagsnode{float:left; margin-top: 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.node#tagsnode a{color:#37B700; text-decoration:none;}
.node#tagsnode a:hover{color:#37B700; text-decoration:underline;} 

Html

<div class="node" id="wrapper">
<div class="node" id="title">texte simple <a href="#">lien</a></div>
<div class="node" id="posttitle">texte simple <a href="#">lien</a></div>
<hr width="100%" size="3">
<div class="node" id="img"><img src="logo.png" /></div>
<a href="#" class="node" id="comments"><p>56</p></a>
<div class="node" id="content">Le World Wide Web est constitué de millions de serveurs web à travers le monde. Un serveur web est un programme qui s'exécute sur un ordinateur connecté au réseau et utilise le protocole HTTP pour transmettre des données. Dans sa forme la plus simple, ce programme reçoit une requête HTTP pour une ressource spécifique, trouve le fichier correspondant sur le disque dur local et l'envoie à l'ordinateur demandeur via le réseau. Des serveurs web plus complexes peuvent répartir dynamiquement les ressources en réponse à une requête HTTP. Pour identifier les ressources (souvent des fichiers ou leurs parties) sur le World Wide Web, on utilise des identifiants uniformes de ressources URI (Uniform Resource Identifier). Pour déterminer l'emplacement des ressources sur le réseau, on utilise des localisateurs uniformes de ressources URL (Uniform Resource Locator). Ces localisateurs URL combinent la technologie d'identification URI et le système de noms de domaine DNS (Domain Name System) — le nom de domaine (ou directement l'adresse IP sous forme numérique) fait partie de l'URL pour désigner l'ordinateur (plus précisément, l'une de ses interfaces réseau) qui exécute le code du serveur web requis.
Pour visualiser les informations reçues du serveur web, un programme spécial est utilisé sur l'ordinateur client — le navigateur web. La fonction principale d'un navigateur web est d'afficher du hypertexte. Le World Wide Web est indissociable des concepts de hypertexte et de hyperliens. La plupart des informations sur le Web sont en effet du hypertexte. Pour faciliter la création, le stockage et l'affichage de hypertexte sur le World Wide Web, on utilise traditionnellement le langage HTML (HyperText Markup Language), un langage de balisage de hypertexte. Le travail de balisage de hypertexte est appelé mise en page, et les maîtres de la mise en page sont appelés webmasters. Après le balisage HTML, le hypertexte résultant est placé dans un fichier, ce fichier HTML étant la ressource principale du World Wide Web. Une fois que le fichier HTML devient accessible au serveur web, il est alors appelé « page web ». Un ensemble de pages web constitue un site web. Des hyperliens sont ajoutés au hypertexte des pages web. Les hyperliens aident les utilisateurs du World Wide Web à naviguer facilement entre les ressources (fichiers), qu'elles soient sur l'ordinateur local ou sur un serveur distant. Les hyperliens du web reposent sur la technologie URL.</div>
<div><div class="node" id="tagsnode">Tags : <a href="#">Tag un</a>, <a href="#">Tag deux</a>, <a href="#">Tag trois</a></div><a href="#" id="more" class="node">En savoir plus</a></div>
<div class="node" id="post"></div>
</div>

Voici à quoi cela ressemble 

Ensuite, j'intègre dans Drupal : le Css reste le même mais voici le Node.tpl.php (je ne suis pas encore arrivé à l'endroit où afficher les commentaires et tout ça)

<div class="node" id="wrapper">
<div class="node" id="title"><?php if ($page == 0): ?><a href="<?php print $node_url; ?>"><?php endif; ?><?php print $title ?><?php if ($page == 0): ?></a><?php endif; ?></div>
<div class="node" id="posttitle"><?php print $submitted ?></div>
<hr width="100%" size="3">
<?php if ($content[field_image]): ?>
<div class="node" id="img"><?php print render($content['field_image'])?></div>
<?php endif; ?>
<a href="<?php print $node_url; ?>" class="node" id="comments"><p><?php print $comment_count ?></p></a>
<div class="node" id="content"><?php print render($content['body'])?></div>
<div><div class="node" id="tagsnode"><?php print render($content['field_tags']) ?></div><a href="<?php print $node_url; ?>" id="more" class="node">En savoir plus</a></div>
 <?php print render($content['comments']);  ?>
<div class="node" id="post"></div></div>

Voici comment cela s'affiche sur le site 

Donc, question numéro un ! Comment se débarrasser des div supplémentaires qui causent cet espacement ?

Question numéro deux ! Comment faire pour que le mot "tags" soit remplacé par "tégés", qu'ils soient alignés sur une ligne et séparés par une virgule après chacun ?

P.s.    Dans les réponses, je vous prie d'expliquer quelles actions sont effectuées dans le code modifié, afin que je puisse moi-même comprendre de tels problèmes à l'avenir !

P.p.s. Lors de l'inscription, il y a un captcha sympa, pourriez-vous me dire où le trouver ?

P.p.p.s. Comment revenir à taper du texte normal après avoir inséré le code dans le thème, car j'ai dû désactiver l'éditeur visuel et déplacer les balises.

P.p.p.p.s. Administrateurs, veuillez ajuster légèrement le champ "Bonjour, Login" en ajoutant un espace après la virgule !

Cordialement, Gribenyuk Artem