Codage HTML tableau : problème de rendu Firefox/Chrome

[Résolu/Fermé]
Signaler
-
Messages postés
15
Date d'inscription
lundi 7 janvier 2013
Statut
Membre
Dernière intervention
20 mars 2013
-
Bonjour,
J'ai fait un codage html avec notepad ++ ( je suis très très très grande débutante et "j'apprends" sur le tas comme on dit ).
J'ai un problème, le rendu souhaité est effectif lorsque je suis sur le navigateur Chrome, mais le navigateur Firefox ne rend pas ce que j'attends.
Voici mon code :
<center>
<table width="750" cols="4" cellspacing="0" cellpadding="5" rules="rows" frame="box" style="border: 1px solid black">
    <tbody>
        <tr valign="CENTER" align="CENTER">
            <td width="750" height="95" bgcolor="#345588" colspan="4"><font size="5" color="#FFFFFF">IMAGE BISMILLAH PLUS TITRE : J'apprends l'alphabet arabe</font></td>
        </tr>
        <tr valign="CENTER" height="130" align="CENTER">
            <td width="187.5" bgcolor="#DDEBF6"><font size="5" face="Comic Sans MS">L'alphabet<br />
            lettre par lettre</font></td>
            <td bgcolor="#9BC1E6" colspan="3"><font size="3.5" face="Comic Sans MS">Moustafa Abou Oumama a conçu pour vous cette série de cours dans laquelle une lettre égale un cours. Ne vous méprenez pas, en plus de vous apprendre le nom et la prononciation de chaque lettre, bien d'autres choses sont à découvrir à l'intérieur de ces cours.</font></td>
        </tr>
        <tr valign="CENTER" align="CENTER">
            <td width="400" rowspan="4" colspan="2"><img width="220" height="310" alt="" src=".../document/images/livre_alpha_arabe.png" /></td>
            <td width="165" bgcolor="#2C76B7" style="border-right:1px solid; border-left:1px solid" rowspan="4"><font size="4.5" face="Comic Sans MS" color="#FFFFFF">Cet ensemble de séries concernant l'alphabet a été fait en étudiant le livre ci-contre, dont les références sont les suivantes : J'apprends l'Alphabet Arabe, paru aux éditions Sana, et signé Mahrez Landoulsi.</font></td>
            <td width="275" height="100" bgcolor="#DDEBF6"><font size="5" face="Comic Sans MS">Première série</font></td>
        </tr>
        <tr valign="CENTER" align="CENTER">
            <td width="275" height="100" bgcolor="#9BC1E6"><font size="5" face="Comic Sans MS">Deuxième série</font></td>
        </tr>
        <tr valign="CENTER" align="CENTER">
            <td width="275" height="100" bgcolor="#DDEBF6"><font size="5" face="Comic Sans MS">Troisième série</font></td>
        </tr>
        <tr valign="CENTER" align="CENTER">
            <td width="275" height="100" bgcolor="#9BC1E6"><font size="5" face="Comic Sans MS">Quatrième série</font></td>
        </tr>
    </tbody>
</table>
</center>


J'aimerais si possible que vous me disiez si cela est inévitable et si je dois laisser comme ça ( tanpis pour ceux qui utiliserons firefox ), ou bien s'il y a une possibilité pour que Firefox m'affiche la même chose que Chrome... ?
Le problème n'est pas grave en soit puisque c'est uniquement visuel mais s'il y avait une possibilité ça m'arrangerait quand même...

Je vous remercie d'avance ceux qui se pencheront sur mon problème.
A bientôt.
Mlle Lili

11 réponses

Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 581
Bonjour,

le meilleur conseil que je pourrais te donner est d'essayer d'apprendre le CSS.
Aujourd'hui, il est fortement recommandé de ne plus utiliser les positionnement en tableau, même si lorsqu'on débute ça semble plus pratique et facile d'approche.

En gros tu fais une page web "à l'ancienne", et les normes d'aujourd'hui sont plus souples, tu auras aussi moins de soucis d'un navigateur à l'autre (encore que ça reste sujet à débat...)

C'est tout ce qu'il y a dans ta page ?

Dans le pire des cas, peut être pourrais-tu te tourner vers un wysiwyg...
Bonjour, merci de ta réponse rapide.

Oui c'est tout ce qu'il y a dans ma page, rien de plus. J'ai environ 15 tableaux à faire comme ça, en fait je les avait préparé sur excell puis pour les mettre dans la plateforme Chamilo (ce pour quoi ils sont destinés ) je refait les tableaux en html car la plateforme dans les outils d'édition il y a justement le moyen d'entrer du contenu en mode html.

Pour l'instant je vais laisser comme ça alors si rien n'est faisable au niveau html, et en parallèle je vais chercher des tutos pour apprendre le CSS alors pour pouvoir le refaire par la suite et corriger le problème, c'est vrai que quand je fait des recherches dans les forums ça parle beaucoup CSS.

Je ne sais pas ce que c'est qu'un wysiwyg mais je chercherai pour voir un peu de quoi ça parle ^^

Merci beaucoup !
A partir de mon code posté plus haut, quelqu'un pourrait me refaire la même chose avec le CSS pour que je vois ce que ça doit donner et que je parte de ça pour comprendre le système et comment ça marche ? Ca m'aidera dans mes recherches pour apprendre.
Si possible en mettant le codage CSS dans la même page que le html, càd entre les balises <HEAD></HEAD>.
Je vous en serais très reconnaissante.
Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 581
les tableaux suivants auront les mêmes dispositions ?
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
Salut,

Je te conseillerais quand même de créer un fichier CSS a part que tu utiliserai avec ton HTML via la ligne de code

<link rel="stylesheet" type="text/css" href="style.css" />



puis dans style.css tu aurai du code CSS comme cela :

table
{
width : 750px;
border : solid black 1px;
}
Pas les mêmes dispositions, mais compte tenu de la rapidité avec laquelle j'ai réussi à faire ça toute seule en partant de zéro et de simples petits exemples, je pense que juste avec l'exemple pour ce tableau je réussirais à faire les autres. Une fois que j'ai le codage de celui-là en html/css, je le prendrai pour exemple et je regarderai quoi correspond à quoi etc et avec des recherches sur le net j'arriverais à faire les autres et petit à petit à apprendre le CSS. Il y a plein de pages sur ce sujet si je n'y arrive pas ça voudra vraiment dire que je suis un âne ^^
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
D'autres exemples de ce que un tableau peux recevoir comme caractéristiques venant du CSS :

table.gauche
{
float: left;
height: auto;
width : auto;
border : solid 4px #ffffff ;
margin-bottom : 10px ;
margin-left: 20px;
/*margin-right: 850px;*/
margin-top: 21px;
color: white;
border-radius: 5px;
padding: 2px;
background: white;
box-shadow: 0px 0px 20px #000;
}
Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 581
J'ai fait ça... ça se rapproche fortement de ce que tu avais, après il a du fignolage à faire, mais au moins tu as le principe...
Pour le centrage vertical, je t'avouerai que j'ai pas eu le courage de chercher absolument comment le faire...

Pour t'expliquer de façon simple la différence entre ce que tu avais fait et ce que je te donne ici : aujourd'hui la norme veut qu'on sépare le fond de la forme, ou fait donc le contenu en HTML (souvent généré à partir de PHP/MySQL, mais ça pour ce qu'on a là, pas besoin de s'en soucier...) et la mise en page et déléguée au CSS... voilà voilà...

Et comme l'a déjà dit SkRo91, l'idéal est de mettre le css dans un fichier à part. Comme ça quand tu apportes une modification à ton style, pas besoin de repasser dans tous tes fichiers...

<style type="text/css"> 
    #principal { 
        width: 100%; 
        font-family: Comic Sans MS; 
    } 
    #cadre { 
        width: 750px; 
        border: 1px solid black; 
        margin: auto; 
    } 
    #ligne1 { 
        height: 95px; 
        line-height: 95px; 
        background-color: #345588; 
        font-family: Times; 
        font-size: 24px; 
        color: white; 
        text-align: center; 
    } 
    #ligne2 { 
        height: 130px; 
        border-bottom: 1px solid black; 
        border-top: 1px solid black; 
    } 
    #colonne21 { 
        float: left; 
        width: 25%; 
        height: 100%; 
        background-color: #DDEBF6; 
        font-size: 24px; 
        text-align: center; 
        display: table-cell; 
        vertical-align: middle; 
    } 
    #colonne22 { 
        float: left; 
        width: 75%; 
        height: 100%; 
        background-color: #9BC1E6; 
        font-size: 18px; 
        text-align: center; 
    } 
    #ligne3 { 
        height: 400px; 
    } 
    #colonne31 { 
        float: left; 
        width: 308px; 
        text-align: center; 
    } 
    #colonne32 { 
        float: left; 
        width: 165px; 
        height: 100%; 
        text-align: center; 
        color: white; 
        background-color: #2C76B7; 
        font-size: 18px; 
        border-left: 1px solid black; 
        border-right: 1px solid black; 
    } 
    #colonne33 { 
        float: left; 
        width: 275px; 
        font-size: 24px; 
        text-align: center; 
        line-height: 100px; 
    } 
    .claire { 
        background-color: #DDEBF6; 
        border-bottom: 1px solid black; 
    } 
    .foncee { 
        background-color: #9BC1E6; 
    } 
</style> 

<div id="principal"> 
    <div id="cadre"> 
        <div id="ligne1">IMAGE BISMILLAH PLUS TITRE : J'apprends l'alphabet arabe</div> 
        <div id="ligne2"> 
            <div id="colonne21">L'alphabet<br />lettre par lettre</div> 
            <div id="colonne22">Moustafa Abou Oumama a conçu pour vous cette série de cours dans laquelle une lettre égale un cours. Ne vous méprenez pas, en plus de vous apprendre le nom et la prononciation de chaque lettre, bien d'autres choses sont à découvrir à l'intérieur de ces cours.</div> 
        </div> 
        <div id="ligne3"> 
            <div id="colonne31"><img width="220" height="310" alt="" src=".../document/images/livre_alpha_arabe.png" /></div> 
            <div id="colonne32">Cet ensemble de séries concernant l'alphabet a été fait en étudiant le livre ci-contre, dont les références sont les suivantes : J'apprends l'Alphabet Arabe, paru aux éditions Sana, et signé Mahrez Landoulsi.</div> 
            <div id="colonne33"> 
                <div id="ligne331" class="claire">Première série</div> 
                <div id="ligne332" class="foncee">Deuxième série</div> 
                <div id="ligne333" class="claire">Troisième série</div> 
                <div id="ligne334" class="foncee">Quatrième série</div> 
            </div> 
        </div> 
    </div> 
</div>


Si tu as besoin de faire des tests rapides et de visualiser ce que tu fais tu peux essayer des sites comme http://jsbin.com par exemple...

Bon courage.
Merci beaucoup pour cette réponse aussi rapide !
Je vous remercie vous deux, je viens d'y jeter un coup d'oeil et ça ne m'a pas l'air si compliqué que ça, je dirais même que ça m'a l'air très logique.
J'étudie ça ce soir plus en profondeur, et je reviens mettre un beau et gros "Résolu" si mon problème est enfin réglé.

Vous m'avez été d'une aide précieuse j'ai de quoi travailler et apprendre maintenant, je pars d'une bonne base et non de zéro entièrement.

Je pense que je vais faire feuille de style séparée finalement ainsi je n'ai pas à toucher au code html une fois qu'il est fait dans le cas ou je devrais modifier des choses au niveau du style. Je me servirais du lien dont vous avez parlé plus haut, je vais me pencher aussi sur "comment ça fonctionne".

MERCI BEAUCOUP
Messages postés
499
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
27 avril 2021
115
Ce que t'ont écrit SkRo91 et ThEBiShOp, à savoir définir les styles dans un fichier à part, sont de précieux conseils. Comme il a été dit, on n'a plus à retoucher les 500 pages du site, il suffit de redéfinir les feuilles de styles pour changer les 500 pages d'un coup.

Tu peux aussi définir des styles différents selon la destination :
- écran :
<rel link="stylesheet" href="styles_scr.css" type="text/css" media="screen" />
- imprimante :
<rel link="stylesheet" href="styles_prt.css" type="text/css" media="print" />
et même d'autres telles que imprimantes en braille, par exemple
(voir : https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Par ailleurs si la page en question est générée par du PHP, celui ci peut générer une page avec un contenu différent (nom du fichier de style par exemple) en fonction du navigateur client.

Exemple: après détection du navigateur client écrire :
<rel link="stylesheet" href="......." type="text/css" media="screen" />
avec :
- href="styles_ie_scr.css" (client = Internet Explorer) ou
- href="styles_ch_scr.css" (client = Chrome) ou
- href="styles_ff_scr.css" (client = Firefox) ou
- href="styles_other_scr.css" (client = autre navigateur)
selon le navigateur client détecté.

Bon courage.
Messages postés
15
Date d'inscription
lundi 7 janvier 2013
Statut
Membre
Dernière intervention
20 mars 2013

Bonjour !
Je ne suis pas revenue sur ce topic,
mais finalement j'ai réussi à faire ce que j'avais à faire avec le html, css.
J'utilise même du javascript dans certaines pages.

Je vous remercie pour votre aide qui m'a bien aidée pour le démarrage !

Je met donc un beau et gros résolu !