Site Artem Grebenyuk

Decidi reunir todas as questões sobre a tematização do meu site em um único tópico.

Me mandaram para cá para pedir conselhos a partir do VKontakte.

Direto ao ponto:

Estou tematizando o Drupal, o Page.tpl.php criei sem problemas.

Surgiram travamentos no  Node.tpl.php

Então, dado:

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">texto simples <a href="#">link</a></div>
<div class="node" id="posttitle">texto simples <a href="#">link</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">A World Wide Web é formada por milhões de servidores web da Internet localizados em todo o mundo. O servidor web é um programa executado em um computador conectado à rede e que usa o protocolo HTTP para transmitir dados. Na forma mais simples, tal programa recebe pela rede uma requisição HTTP para um determinado recurso, encontra o arquivo correspondente no disco rígido local e o envia pela rede ao computador solicitante. Servidores web mais complexos são capazes de distribuir recursos dinamicamente em resposta à requisição HTTP. Para identificar recursos (frequentemente arquivos ou suas partes) na World Wide Web são usados identificadores uniformes de recursos URI (em inglês Uniform Resource Identifier). Para determinar a localização dos recursos na rede são usados localizadores uniformes de recursos URL (em inglês Uniform Resource Locator). Esses localizadores URL combinam a tecnologia de identificação URI e o sistema de nomes de domínio DNS (em inglês Domain Name System) — o nome de domínio (ou diretamente o endereço IP em notação numérica) faz parte da URL para designar o computador (mais precisamente — uma de suas interfaces de rede) que executa o código do servidor web necessário.
Para visualizar as informações obtidas do servidor web, no computador cliente usa-se um programa especial — o navegador. A função principal do navegador é a exibição de hipertexto. A World Wide Web está inseparavelmente ligada aos conceitos de hipertexto e hyperlink. A maior parte da informação na Web é justamente hipertexto. Para facilitar a criação, armazenamento e exibição de hipertexto na World Wide Web tradicionalmente usa-se a linguagem HTML (em inglês HyperText Markup Language), linguagem de marcação de hipertexto. O trabalho de marcação de hipertexto chama-se diagramação, os mestres de marcação são chamados webmaster. Após a marcação HTML, o hipertexto resultante é colocado em um arquivo, tal arquivo HTML é o recurso principal da World Wide Web. Depois que o arquivo HTML se torna acessível ao servidor web, ele passa a ser chamado de "página web". Um conjunto de páginas web forma um website. Ao hipertexto das páginas web são adicionados hyperlinks. Os hyperlinks ajudam os usuários da World Wide Web a navegar facilmente entre recursos (arquivos) independentemente de os recursos estarem no computador local ou em um servidor remoto. Os hyperlinks da web são baseados na tecnologia URL.</div>
<div><div class="node" id="tagsnode">Tags: <a href="#">Uma tag</a>, <a href="#">Duas tags</a>, <a href="#">Três tags</a></div><a href="#" id="more" class="node">Leia mais</a></div>
<div class="node" id="post"></div>
</div>

É assim que aparece 

Em seguida integro ao Drupal: o Css é o mesmo, mas o próprio Node.tpl.php (até onde exibir comentários e tudo mais ainda não cheguei)

<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">Leia mais</a></div>
  <?php print render($content['comments']);  ?>
<div class="node" id="post"></div></div>

E assim é exibido no site 

Então, pergunta número um! Como se livrar dos divs extras por causa dos quais surge esse espaçamento?

Pergunta número dois! Como fazer para que em vez da palavra tags apareça a palavra tags, elas fiquem em linha e com vírgula após cada uma?

P.s.    Nas respostas peço que expliquem quais ações são executadas no código alterado, para que eu possa depois entender sozinho problemas semelhantes!

P.p.s Na inscrição, captcha legal, poderiam me dizer onde conseguir?

P.p.p.s Como depois de inserir o código no tema voltar a escrever com texto normal, pois tive que desativar o visual e mover as tags.

P.p.p.p.s Admins corrijam um pouco o campo "Olá,Login" depois da vírgula insiram um espaço!

Atenciosamente, Artem Grebenyuk