Codage HTML tableau : problème de rendu Firefox/Chrome
Résolu/Fermé
lili78
-
18 janv. 2013 à 10:54
lili78370 Messages postés 15 Date d'inscription lundi 7 janvier 2013 Statut Membre Dernière intervention 20 mars 2013 - 1 mars 2013 à 11:23
lili78370 Messages postés 15 Date d'inscription lundi 7 janvier 2013 Statut Membre Dernière intervention 20 mars 2013 - 1 mars 2013 à 11:23
A voir également:
- Codage HTML tableau : problème de rendu Firefox/Chrome
- Tableau croisé dynamique - Guide
- Codage ascii - Guide
- Codage binaire - Guide
- Tableau word - Guide
- Editeur html - Télécharger - HTML
11 réponses
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
18 janv. 2013 à 11:13
18 janv. 2013 à 11:13
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...
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 !
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.
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.
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
18 janv. 2013 à 12:18
18 janv. 2013 à 12:18
les tableaux suivants auront les mêmes dispositions ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
SkRo91
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
39
Modifié par SkRo91 le 18/01/2013 à 12:30
Modifié par SkRo91 le 18/01/2013 à 12:30
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;
}
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 ^^
SkRo91
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
39
18 janv. 2013 à 12:32
18 janv. 2013 à 12:32
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;
}
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;
}
ThEBiShOp
Messages postés
8378
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
8 février 2021
1 566
Modifié par ThEBiShOp le 18/01/2013 à 15:38
Modifié par ThEBiShOp le 18/01/2013 à 15:38
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...
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.
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
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
heliconius
Messages postés
545
Date d'inscription
mardi 1 juillet 2008
Statut
Membre
Dernière intervention
23 juin 2023
137
18 janv. 2013 à 23:34
18 janv. 2013 à 23:34
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.
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.
lili78370
Messages postés
15
Date d'inscription
lundi 7 janvier 2013
Statut
Membre
Dernière intervention
20 mars 2013
1 mars 2013 à 11:23
1 mars 2013 à 11:23
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 !
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 !