Sitio de Artem Grebenyuk

He decidido agrupar todas las preguntas sobre la tematización de mi sitio en un solo tema.

Me enviaron aquí por consejo desde Vkontakte.

Vamos al grano:

Estoy tematizando Drupal, creé Page.tpl.php sin problemas.

Han surgido inconvenientes en  Node.tpl.php

Así que aquí está:

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 simple <a href="#">enlace</a></div>
<div class="node" id="posttitle">texto simple <a href="#">enlace</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">La World Wide Web está formada por millones de servidores web en Internet, ubicados en todo el mundo. Un servidor web es un programa que se ejecuta en una computadora conectada a la red y utiliza el protocolo HTTP para transmitir datos. En su forma más simple, este programa recibe una solicitud HTTP para un recurso específico, encuentra el archivo correspondiente en el disco duro local y lo envía a la computadora que hizo la solicitud. Servidores web más complejos pueden distribuir recursos dinámicamente en respuesta a solicitudes HTTP. Para identificar recursos (a menudo archivos o partes de ellos) en la World Wide Web se utilizan identificadores uniformes de recursos URI (en inglés, Uniform Resource Identifier). Para determinar la ubicación de los recursos en la red se utilizan localizadores uniformes de recursos URL (en inglés, Uniform Resource Locator). Estos localizadores URL combinan la tecnología de identificación URI con el sistema de nombres de dominio DNS (en inglés, Domain Name System): el nombre de dominio (o directamente la dirección IP en notación numérica) forma parte de la URL para designar la computadora (más precisamente, uno de sus interfaces de red) que ejecuta el código del servidor web requerido.
Para revisar la información obtenida del servidor web, se utiliza un programa especial en la computadora cliente: el navegador web. La función principal del navegador web es mostrar hiperenlaces. La World Wide Web está intrínsecamente relacionada con los conceptos de hiperenlace y enlaces hipertextuales. La mayor parte de la información en la Web es precisamente hiperenlace. Para facilitar la creación, almacenamiento y visualización de hiperenlaces en la World Wide Web, tradicionalmente se utiliza el lenguaje HTML (en inglés, HyperText Markup Language), un lenguaje de marcado de hiperenlace. El trabajo de marcado de hiperenlace se llama maquetación, y los maestros de maquetación son llamados webmasters. Después del marcado en HTML, el hiperenlace resultante se coloca en un archivo, y dicho archivo HTML es el recurso principal de la World Wide Web. Una vez que el archivo HTML está disponible para el servidor web, se le comienza a llamar "página web". Un conjunto de páginas web forma un sitio web. En el hiperenlace de las páginas web se añaden enlaces hipertextuales. Los enlaces hipertextuales ayudan a los usuarios de la World Wide Web a navegar fácilmente entre recursos (archivos) independientemente de si los recursos están en la computadora local o en un servidor remoto. Los enlaces hipertextuales de la web se basan en la tecnología URL.</div>
<div><div class="node" id="tagsnode">Etiquetas: <a href="#">Etiqueta uno</a>, <a href="#">Etiqueta dos</a>, <a href="#">Etiqueta tres</a></div><a href="#" id="more" class="node">Más detalles</a></div>
<div class="node" id="post"></div>
</div>

Así es como se ve 

A continuación integraré en Drupal: el Css es el mismo, pero aquí está el Node.tpl.php (no he llegado a la parte donde se muestran los comentarios y todo eso aún)

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

Y así es como se muestra en el sitio 

¡Así que la pregunta número uno! ¿Cómo deshacerme de los divs adicionales que causan este margen?

¡Pregunta número dos! ¿Cómo hacer que en lugar de la palabra "tags" aparezca "etiquetas", que estén en línea y con una coma después de cada una?

P.d.    En las respuestas, por favor aclaren qué acciones se realizan en el código modificado, para que yo pueda entender mejor problemas similares en el futuro.

P.p.d. ¡La captcha al registrarse es genial, ¿podrían decirme dónde conseguirla?

P.p.p.d. ¿Cómo puedo volver a escribir texto normal después de insertar el código en el tema? Tuve que desactivar el modo visual y mover las etiquetas.

P.p.p.p.d. Administradores, por favor ajusten un poco el campo "Hola, Login", ¡inserten un espacio después de la coma!

Atentamente, Grebenyuk Artem