Salut,
Arf... J'avais commencé à taper mon message mais je suis trop long...
bref...
Je me trompe peut-être mais il me semble, comme papyjo te l'a fait remarquer, que tu ne gères pas les id et les classes correctement. Si on se limite au code que tu montres, il suffirait de faire ceci :
<!-- BEGIN new -->
<div id="ident1">
<p>{TITRE}</p>
</div>
<div id="ident2">
<p>{DATE}</p>
</div>
Le fait de mettre un span à la place d'un paragraphe n'est pas le plus judicieux car tu changes le sens de la balise pour des besoins de mise en page (En réalité, tu passes d'un élément de type "bloc" à un dit "en ligne"). Ca ne devrait pas être le cas ; c'est au CSS de s'adapter, pas à la structure HTML.
La div est avant tout faite pour englober plusieurs éléments et ne comporte pas de sens particulier. On peut effectivement en rajouter comme tu l'as fait pour entourer un paragraphe si la mise en page l'exige mais est-ce bien le cas ? J'en doute ici...
Dans tous les cas, ce qui compte, c'est avant tout le sens donné aux éléments ; il faut que les balises représentent ce qu'elles contiennent.
Une explication sur la sémantique et ce que sont les types "bloc" et "en ligne" t'aideront à y voir plus clair :
http://openweb.eu.org/articles/respecter_semantique/
http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne
Au sein de ton CSS, tu peux accéder à la structure proposée ci-dessus par :
div { ... }
div p { ... }
#ident1 { ... }
#ident2 { ... }
#ident1 p { ... }
#ident2 p { ... }
D'une manière générale, il faut toujours partir du plus généraliste pour spécialiser au fur et à mesure, c'est à dire :
- Commencer par définir les styles directement sur les balises et y accéder en cascade
- Spécialiser en mettant une classe sur l'élément.
- Spécialiser encore en mettant un identifiant.
Plus tu places tes classes et identifiants sur les conteneurs et non directement sur l'élément, mieux c'est... Ca te permet d'englober plus de cas.
Par exemple :
<div>
<h2>titre</h2>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
</ul>
</div>
<div class="uneClasse">
<h2>titre</h2>
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
</ul>
</div>
<div class="uneClasse">
<h2>titre</h2>
<ul>
<li><a href="#">lien1</a></li>
<li id="unIdentifiant"><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
<li><a href="#">lien1</a></li>
</ul>
</div>
Dans ce code, tu peux affecter les styles comme suit :
div { ... }
div h2 { ... }
div ul { ... }
div ul a { ... }
.uneClasse { ... }
.uneClasse h2 { ... }
.uneClasse a { ... }
#unIdentifiant { ... }
#unIdentifiant a { ... }
La lecture de ces documents devrait t'aider à mieux cerner le principe :
http://developer.mozilla.org/fr/docs/CSS: Premiers_pas:Cascade_et_h%C3%A9ritage
http://developer.mozilla.org/fr/docs/CSS: Premiers_pas:Les_s%C3%A9lecteurs
http://developer.mozilla.org/fr/docs/CSS: Premiers_pas:Des_CSS_lisibles
(Pour les liens cités ci-dessus, supprime les espaces après ":" -> ça faisait des smileys
)
Par ailleurs, tu indiques :
top:0px;
Cette instruction ne sert à rien lorsque tu restes en positionnement statique. Elle a de l'utilité dès lors que tu passes en relatif ou en absolu.
Et puis, 0 vaut toujours 0, que ce soit des patates, des kiwis ou des pixels donc c'est le seul cas où l'indication des unités est optionnel.
A un endroit, tu mets :
font-family:Arial, Verdana, Tahoma, Comic Sans MS;
Il faut terminer par une famille de polices des fois que celles indiquées ne soient pas disponibles sur le poste de l'utilisateur.
Voir ici :
http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-10-6.html
Tu mets aussi :
font-size:7pt;
L'unité pt est destinée à l'impression et non aux écrans. Particulièrement pour IE, il est nécessaire de se servir d'une unité qui permette de redimensionner tes écritures afin que quelqu'un, qui fatigue ou qui a un problème avec les petits caractères, puisse visualiser le contenu correctement.
Voir là (l'un des meilleurs tutos qu'on est, soit dit en passant
) :
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em
Pour le positionnement de tes éléments, tu peux commencer par tenter des définir des marges et du remplissage sur tes éléments. Si ce n'est pas assez souple, tu peux modifier le mode de positionnement en passant en relatif, ce qui permet de conserver l'élément dans le flux, ou bien en absolu, en flottant voire en fixe (l'élément sort alors du flux).
Les bases du positionnement :
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/ 
