Comment puis-je refaire une page à ma manière ?

Bonjour à toutes et à tous,

J'ai une page sur mon site qui est pour l'instant mal codée mais qui correspond à ce que je veux :

<?php include('include/header.php'); ?>

  <h1 align="center">Abonnez-vous &agrave; l'<span class="red"><strong>Acad&eacute;mie 
    de Succ&egrave;s Bourse</strong></span></h1>
						
  <!-- Debut selection PMP !-->
    <div align="center"><font color="#FF0000" size="1"><em>Remarque pr&eacute;alable</em></font></div>
    <div align="center"><font color="#FF0000" size="1"><em>L'</em></font><span class="red"><strong>Acad&eacute;mie 
      de Succ&egrave;s Bourse</strong></span> <font color="#FF0000" size="1"><em>vous 
      laisse libre de partir lorsque vous le choisissez.</em></font></div>
    <div align="center"><font color="#FF0000" size="1"><em>Vous pouvez donc arr&ecirc;ter votre abonnement 
    &agrave; tout moment. </em></font></div>
	  <div>&nbsp;</div
<div align="center">L'abonnement mensuel est d'un montant de 77,00 euros (soixante 
  dix-sept euros). </div>
    <div>&nbsp;</div>
<div align="center">Merci d'indiquer vos coordonnées ci-dessous et de procéder 
  au règlement de votre abonnement</div>
  	    <div>&nbsp;</div>
			    
<div></div>
<!-- Debut formulaire PMP !-->

J'ai ôté les <div>, etc. pour aboutir à ceci :

<?php include('include/header.php'); ?>

  <h1>Abonnez-vous &agrave; l'Acad&eacute;mie 
    de Succ&egrave;s Bourse</h1><br />
    <div>Remarque pr&eacute;alable :<br />
    L'<span class="red",>Acad&eacute;mie 
      de Succ&egrave;s Bourse</span> vous 
      laisse libre de partir lorsque vous le choisissez.<br />
    Vous pouvez donc arr&ecirc;ter votre abonnement 
    &agrave; tout moment. <br />
L'abonnement mensuel est d'un montant de 77,00 euros (soixante 
  dix-sept euros).<br />
Merci d'indiquer vos coordonnées ci-dessous et de procéder 
  au règlement de votre abonnement</div><br />
			    
<!-- Debut formulaire PMP !-->

mais j'obtiens ceci :



Que faut-il que je fasse ?

Je ne suis pas un spécialiste mais mon css est approuvé par le W3C, donc il est correct.

Merci à qui me donnera le renseignement.
Modifié par gafguy (24 Jan 2010 - 09:13)

Bonjour,

Si le but est de se passer des align=center et autres balises <font>, c'est louable. La solution consiste à reproduire la mise en forme voulue grâce aux styles CSS. Cela implique notamment:
1. de savoir utiliser les sélecteurs de base en CSS (éléments, classes, identifiants, sélecteur de descendant);
2. de savoir utiliser les styles de texte de base en CSS (alignement, taille du texte, couleur, etc.);
3. à vue de nez, tu aurais également besoin d'utiliser un peu de padding sur ton conteneur pour éviter que le texte ne vienne se coller sur les bords.

Si ces points ne sont pas connus, tout cela s'apprend grâce à des articles, tutoriels et documentations que l'on peut trouver sur Alsacréations et ailleurs.

Merci Florent,

Pour le padding, pardon, j'ai oublié, c'est vrai.

Ce que je voulais surtout savoir, c'est comment rédiger dans le XML, plusieurs balises span, comment les réunir en une seule.
Par exemple,

<span class="red> + <span class ="gras">

est-il possible de les mettre sous la forme (exemple toujours) :

<span class="red","gras">

ou :

<span class:red, :gras>

ou encore :

<span class:red :gras>

ou autrement ?
Modifié par gafguy (24 Jan 2010 - 11:43)

La bonne syntaxe est la suivante :

<span class="red gras">

Cela dit, il vaut mieux éviter de nommer les classes selon la mise en forme voulue. Autrement dit, on évitera d'utiliser les couleurs ou la graisse du texte pour nommer les classes. En somme :

W3C a écrit :
Use class with semantics in mind.

(source de la citation)

Pourquoi aurais-tu besoin de classes "red" et "gras" alors que tu peux simplement faire:

#content h1 {
  font-size: 1.5em;
  font-weight: bold;
  color: #A00;
}

Et, si je puis me permettre, une remarque sur ton code HTML:
- tu devrais utiliser des paragraphes pour les paragraphes, plutôt que des DIV;
- gérer les espaces entre les paragraphes avec des <br> est une erreur de débutant... qui ne sait pas encore se servir des marges en CSS.
Modifié par Florent V. (24 Jan 2010 - 19:19)

Bonsoir, Florent,

Et merci.

Ce n'est pas pour h1 que j'ai un souci, mais pour ce qu'il y a en dessous.

J'ai fait <div>...</div> parce que c'est un ensemble sous lequel j'ai mon code de paiement (PMP) ; cela dit, j'ai hésité car j'avais envie de mettre <p>...</p>.

Mais il est vrai que je peux faire un # content quelque chose
dans mon CSS
et id content quelque chose dans le html.

Quant au <br />, il faudra que je regarde les marges en css.

Cela dit, je suis toujours un débutant, moi mon boulot principal a été d'écrire 209 livres, une trentaine d'ebooks, des milliers d'articles, etc., donc pas de coder...

Bonne soirée, de la part de

Guy