Bonjour,

Je rencontre des soucis lorsque j'affiche mon site internet sur un telephone.

En effet, j'ai des DIV et des styles écrit en css et le rendu sur un ordinateur convient, en revanche, si j'affiche le site sur un téléphone, je rencontre un comportement bizarre sur certaines pages.

Si j'utilise des styles de paragraphes ou balise A ecrit en 16px, aucun problème sur ordinateur mais sur le telephone, si ce texte est écrit dans un tableau alors l'affichage est beaucoup plus petit que prévu (et si je sors le texte du tableau, alors le texte s'affiche à la bonne taille (mais je perd la mise en page et les alignements faits grâce à mon tableau).

Pour s'en rendre compte, la page est ici (je ne comprends pas le comportement différent dans et hors tableau) :

http://tpa.raidghost.com/Page_web/index_2.php?ma_page=Pages/club_adhesion

le texte ecrit dans le fichier php est ci-dessous :

<p class="article">&nbsp;Veuillez trouver ci-dessous, les formules proposées par le Club pour ces licenciés</p><br />

<p class="article">&nbsp;Texte écrit volontairement HORS du tableau pour tester l'affichage</p><br /><br />
<p class="adhesion_titre">Formules pour les Jeunes AVEC cours (Environ 30 semaines de cours)</p><br />
<p class="adhesion_info">(Comprenant la licence, la cotisation et les cours pour les - de 18 ans)</p><br />
<p class="adhesion_formule">Mini-Tennis (2015 inclus) - </p><p class="adhesion_prix">100 €uros : </p><p class="adhesion_heure">1H00 de cours par Semaine</p><br />
<p class="adhesion_formule">Loisir - </p><p class="adhesion_prix">150 €uros : </p><p class="adhesion_heure">1H00 de cours par Semaine</p><br />
<p class="adhesion_formule">Compétition - </p><p class="adhesion_prix">190 €uros : </p><p class="adhesion_heure">1H30 de cours par Semaine</p><br />
<p class="adhesion_formule">Compétition - </p><p class="adhesion_prix">220 €uros : </p><p class="adhesion_heure">2H00 de cours par Semaine</p><br />
<p class="adhesion_formule">Compétition - </p><p class="adhesion_prix">245 €uros : </p><p class="adhesion_heure">2H30 de cours par Semaine</p><br />
<p class="adhesion_formule">Compétition - </p><p class="adhesion_prix">270 €uros : </p><p class="adhesion_heure">3H00 de cours par Semaine</p><br /><br />
    
       
<table width="670" cellpadding="2" cellspacing="0" ALIGN="CENTER" class="bordure_noire">

    <tr height="60" class="bordure_noire">
        <td COLSPAN="2" bgcolor="FFFFDD" align="center">
            <p class="article">&nbsp;Texte écrit volontairement A L'INTERIEUR du tableau pour tester l'affichage</p><br /><br />
        </td>
    </tr>
    <tr height="60" class="bordure_noire">
        <td COLSPAN="2" bgcolor="FFFFDD" align="center">
            <p class="adhesion_titre">Formules pour les Jeunes AVEC cours (Environ 30 semaines de cours)</p><br />
            <p class="adhesion_info">(Comprenant la licence, la cotisation et les cours pour les - de 18 ans)</p>
        </td>
    </tr>
    <tr class="bordure_noire" height="30">
        <td align="center" valign="middle" bgcolor="#FFFFF8" width="270">
            <p class="adhesion_formule">Mini-Tennis (2015 inclus)</p>
        </td>
        <td align="left" valign="middle" bgcolor="#FFFFF8" width="400" class="bordure_interieure_noire">
            <p class="adhesion_prix">100 €uros : </p>
            <p class="adhesion_heure">1H00 de cours par Semaine</p>
        </td>
    </tr>
    <tr class="bordure_noire" height="30">
        <td align="center" valign="middle" bgcolor="#FFFFF8">
            <p class="adhesion_formule">Loisir</p>
        </td>
        <td align="left" valign="middle" bgcolor="#FFFFF8" class="bordure_interieure_noire">
            <p class="adhesion_prix">150 €uros : </p>
            <p class="adhesion_heure">1H00 de cours par Semaine</p>
        </td>
    </tr>
    <tr class="bordure_noire" height="30">
        <td align="center" valign="middle" bgcolor="#FFFFF8" ROWSPAN="4">
            <p class="adhesion_formule">Compétition</p>
        </td>
        <td align="left" valign="middle" bgcolor="#FFFFF8" class="bordure_interieure_noire">
            <p class="adhesion_prix">190 €uros : </p>
            <p class="adhesion_heure">1H30 de cours par Semaine</p>
        </td>
    </tr>
    <tr class="bordure_noire" height="30">
        <td align="left" valign="middle" bgcolor="#FFFFF8" class="bordure_interieure_noire">
            <p class="adhesion_prix">220 €uros : </p>
            <p class="adhesion_heure">2H00 de cours par Semaine</p>
        </td>
    </tr>
    <tr class="bordure_noire" height="30">
        <td align="left" valign="middle" bgcolor="#FFFFF8" class="bordure_interieure_noire">
            <p class="adhesion_prix">245 €uros : </p>
            <p class="adhesion_heure">2H30 de cours par Semaine</p>
        </td>
    </tr>
    <tr class="bordure_noire" height="30">
        <td align="left" valign="middle" bgcolor="#FFFFF8" class="bordure_interieure_noire">
            <p class="adhesion_prix">270 €uros : </p>
            <p class="adhesion_heure">3H00 de cours par Semaine</p>
        </td>
    </tr>
</table>

le style des paragraphes et polices est ci-dessous :

p                {font-family: Arial,'Trebuchet MS', Verdana, serif;font-size: 14px;font-style: normal;text-decoration: none;text-align: justify;line-height: 20px;}
p.article_noir    {color: #000000;}

p.titre_cadre     {color: #004400;font-style: bold;text-align: left;margin-left:30px;text-decoration:none;line-height:16px;}
p.titre_cadre_gauche     {color: #004400;font-style: bold;text-align: left;margin-left:5px;text-decoration:none;line-height:16px;}

p.article        {color: #000040;margin:5px;}
p.article_titre    {color: #A50000;text-align: left;font-size: 16px;}
p.article_rouge_1    {color: #800000;}
p.article_bleu_1    {color: #000080;}

p.adhesion_titre        {font-family: Arial,Tahoma, Verdana,'Trebuchet MS', serif;font-size:1em;color: #600000;font-weight:normal;text-align:left;  text-decoration:none;display:inline;}
p.adhesion_info            {font-family: Arial,Tahoma, Verdana,'Trebuchet MS', serif;font-size:1em;color: #005000;font-weight:normal;text-align:left;  text-decoration:none;display:inline;font-style: italic;}
p.adhesion_formule        {font-family: Arial,Tahoma, Verdana,'Trebuchet MS', serif;font-size:1em;color: #000000;font-weight:normal;text-align:center;text-decoration:none;display:inline;}
p.adhesion_prix            {font-family: Arial,Tahoma, Verdana,'Trebuchet MS', serif;font-size:1em;color: #880000;font-weight:normal;text-align:center;text-decoration:none;display:inline;}
p.adhesion_heure        {font-family: Arial,Tahoma, Verdana,'Trebuchet MS', serif;font-size:1em;color: #404082;font-weight:normal;text-align:center;text-decoration:none;display:inline;}

Bonjour,

Et si tu ajoutes l'indispensable balise meta viewport : https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html ?

Non effectivement, je n'ai pas mis cette balise, je viens de tester en mettant :

<meta name="viewport" content="width=device-width, initial-scale=1.0"> et de ce fait, la page est affichée de manière très petite.

J'avoue que je ne me souvenais plus de cette balise (et que je ne la maitrise pas).
Je ne vois pas comment forcer l'affichage en taille normale (car hors du tableau, cela s'affiche correctement mais dans mon tableau non, c'est bien trop petit)

Peux-tu m'en dire un peu plus sur la notion de zoom à utiliser, faut-il faire une règle de 3 ?????

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

---

Bonjour, pourquoi utiliser un doctype XHTML 1.1 plutôt qu'un doctype HTML5?

Passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Pas de commentaire avent le doctype. Les deux première ligne de votre code devraient être

<!DOCTYPE html>
<html lang="fr">

Il manque la balise meta viewport, si vous faite du responsive.

La balise <center> est obsolète depuit 1999, à supprimer de toute urgence.

La balise <br> sert à créer un retour ligne dans une portion de texte, elle n'est pas la pour créer des espacements entre vos tableau, pour ce faire vous avez les margin et padding en CSS. 

La balise <img> ne sort jamais sans son attribut alt obligatoire.

Beaucoup trop de chose à dire sur ce code, corriger TOUTES les erreurs que vous indique le validateur.

-
Edité par AbcAbc6 6 octobre 2021 à 16:09:15

Merci pour cette info, je vais passer mon code à la moulinette et je modifierais toutes mes erreurs pour revenir sur ce sujet (quand mo n code sera propre).

Bonjour,

J'ai corrigé les anomalies css et repassé mon site à la validation W3, ca semble correct.

En ce qui concerne mon soucis, je rapellle que c'est en affichage sur telephone (alors que sur PC, ca semble OK).

Ma page est ici : http://tpa.raidghost.com/Page_web/index.php?ma_page=Pages/club_adhesion

Elle s'affiche bien mais de manière trop petite pour le texte sur TELEPHONE.

J'ai donc fait une 2nde page TEST pour afficher le texte AVANT le tableau puis dans le tableau (car mon problème apparait sur les textes dans des table)

Ma page est ici : http://tpa.raidghost.com/Page_web/index.php?ma_page=Pages/club_adhesion_test1

Le problème persiste sur les textes dans les tableaux alors qu'avant le tableau le texte s'affiche plus gros.

Mon 3ème et dernier test (que je ne maitrise pas) est l'ajout de la balise meta name = viewport

Ma page est ici : http://tpa.raidghost.com/Page_web/index.php?ma_page=Pages/club_adhesion_test2

La c'est le meme problème sachant que la fenetre s'affiche en mode ZOOM (et ce n'est pas ce que je veux).

=> Mon soucis est de comprendre pourquoi le texte qui s'affiche HORS TABLEAUX est de la bonne taille alors que dans les tableaux, il est très petit.

Faut-il que je revoie ma méthode de création de ces pages pour ne pas utiliser de tableaux ?????

Merci par avance