CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| [Résolu] Corriger un code svp ? | |
| Invité Invité
| Bonjour, Serait il possible que quelqu'un me corrige ce code svp ? - Code:
-
<div class="tableauqueel"><table style="width: 100%; border-collapse:collapse;"><tr> <td width="5%"><div style="margin-top:-17px;"><div style="align: center"> <script language="javascript" type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/jquery-re_142.js"></script> <script language="javascript" type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/menu_libre_service_1/a.js"></script> <div *><td width="20%"><div class="gauche"><div style="padding-right:20px;padding-left:6px;"><center><div style="padding-top:7px;"></div></center> <center><font color=#866DA8 size="5"><font style="font-family: 'Sail', cursive;"><div style="padding-top:5px;padding-bottom:5px;">Les nouveaux venus</div></font></font></center> <div class="partiedroite"><div class="gensmall"></span><div align="justify"> <table> <div class="qeel5"><span style="font-size: 10px"><span id="kumao">{TOTAL_POSTS}</span> <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Nos membres ont posté un total de/,"Bienvenue au Gymnase nouveau. Depuis le dernier inscrit(e), nos chers athlètes ont passé près de ");</script> <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/messages/,"compétitions. ");</script><br><span id="matt">{TOTAL_USERS}</span><br><br><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Nous sommes");</script> <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"athlètes qui ont concourrus. ");</script><span id="yosh">{NEWEST_USER}</span> <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier athlète a avoir débarqué est ");</script><br><span class="gensmall"><span id="delf">{TOTAL_USERS_ONLINE}</span> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Il y a en tout/,"En ce moment, il y a ");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"athlète");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"athlète. ");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"adhérent");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"adhérents");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"recruteur,");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"recruteurs,");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"future recrue");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"futures recrues");</script><br><span id="alex">{RECORD_USERS}</span><script type="text/javascript">document.getElementById('alex').innerHTML=document.getElementById('alex').innerHTML.replace(/d'utilisateurs en ligne/,"d'athlètes présents");</script></span><br><br>{LOGGED_IN_USER_LIST}<br /></div></span></div></div></div></table></div></div></div><br></div></div></div></td></div></div></div></div></div></div></div></td> <td width="10%"><div class="groupe"><div style="padding-right:20px;padding-left:6px;"></center><center><font color=#866DA8 size="5"><font style="font-family: 'Sail', cursive;"><div style="padding-top:5px;padding-bottom:5px;">Les groupes</div></font></font></center><div class="partiemoyenne"> <table><center><br><span align="center"><span style="margin-right: 45px; margin-left: 45px;"><div class="gensmall"><link href='http://fonts.googleapis.com/css?family=Sail' rel='stylesheet' type='text/css'><span style="font-family: georgia"><span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: 0pt; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g1-juges"><font color="#F5A2B0" size="4.5"><b> <font color="#EFEFEF"></font>Les Juges</b></font></a></span><br><span class="gensmall"> <span class="groupes"><span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: 0pt; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g2-coach"><font color="#DDB3BE" size="4.5"><b><font color="#EFEFEF"></font>Les coachs</b></font></a></span><br><span class="gensmall"> <span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: -1px; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g3-prof"><font color="#E3AE0A" size="4.5"><b><font color="#EFEFEF"></font>Les profs</b></font></a></span> <br><span class="gensmall"> <span style="font-family:georgia"><span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: 0pt; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g4-athletes"><font color="#BECF08" size="4.5"><b><font color="#EFEFEF"></font>Les athlètes</b></font></a></span></td><center><span class="gensmall"><span style="font-family:georgia"><span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: 0pt; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g5-fan"><font color="#FEB157" size="4.5"><b><font color="#EFEFEF"></font>Les fans</b></font></a></span></center></table></div></div><br></div></div></div></td></span></span></span></div></span> <td width="60%"><center><div style="padding-top:7px;"></div></center><center><font color=#866DA8 size="5"><font style="font-family: 'Sail', cursive;"><div style="padding-top:5px;padding-bottom:5px;"><span align="center">Les fidèles adhérents</span></div></font></font></center><div class="partiegauche"><div class="gensmall"><div align="justify"><table><div style="font-size: 12px;background-color:#EA9F7A;font-size: 10px;"><tr><td class="row1"><span class="gensmall">{L_CONNECTED_MEMBERS}</span></td></tr></div></div></center></table></div><br></div></div></div></td><tr></table><br></div></div><br clear="all" /></td><td valign="top" width="0"><div id="emptyidright"></div></td></tr></tbody></table></div></div>
j'ai des tonnes de balises qui sont fermées pour beaucoup moins de balises ouvertes et je sais pas quoi virer. Et ça me fait un souci dans le pied de page de mon forum (le cadre descends pas jusqu'en bas). http://nilinde-organisation.forumgratuit.org C'est un QEEL je précise Merci |
Dernière édition par Doraleen le Mer 12 Sep 2012, 10:29, édité 1 fois | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonsoir, Malheureusement, CSSActif étant prévu pour l'apprentissage, les codeurs ne sont pas supposés faire ça à ta place, c'est à toi de faire la démarche de nettoyage. Commençons donc par le début : As tu notepad++ ? Si non, c'est le moment de te le procurer, il est gratuit. Une fois installé, colles ton code dans un nouveau fichier et enregistre le au format HTML. Après ça, saute une ligne après chaque ">" grosso modo, puis indente les lignes pour chaque nouveau bloc de données (les tables, tr, td, center, div sont des blocs), comme ceci par exemple : - Code:
-
<table> <tr> <td> ... </td> <td> ... </td> </tr> <tr> <td> ... </td> <td> ... </td> </tr> </table> Grosso modo il faut que tu mettes en valeur qui contient quoi (pour l'exemple une table contient des lignes, qui elles même contiennent des cellules, qui elles même contiennent du texte, par exemple). Une fois que ça sera fait, tu auras certainement l'occasion de croiser bon nombre de balises non fermées. | | |
| | | Invité Invité
| D'accord, je vais essayer ça, et je reviens après. Merci EDIT : Nan en fait j'ai encore des questions... Par exemple, j'ai des lignes comme ça - Code:
-
<span style="font-family: georgia"><span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: 0pt; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g1-juges"><font color="#F5A2B0" size="4.5"><b> <font color="#EFEFEF"></font>Les Juges</b></font></a></span><br> Est ce que je peux regrouper tous ces span en un seul ? | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Oui, tu peux fusionner les styles, et tu peux aussi virer ce <font color="#EFEFEF"> pour le remplacer par la propriété css color:#EFEFEF . Cela étant, tu devrais placer ces styles inutiles directement dans la feuille de style CSS. C'est à dire que - Code:
-
<span style="plein de propriétés CSS">...</span> Devient : - Code:
-
<span class="MaClasse"> ... </span> - Code:
-
.MaClasse { plein de propriétés CSS } | | |
| | | Invité Invité
| Oui 'est une bonne idée, mais faut que j'approfondisse Car c'est une couleur différente pour chaque groupe. Donc à la limite laisser la couleur directement dans le template et la forme du texte en css (sinon ça fait un css par mot juste pour changer la couleur....) | | |
| | | Fire-Fly
{ Membre actif }
Messages : 429
| Non, je ne recommanderais pas de faire toutes les couleurs individuellement dans la feuille de style. Personnellement, je te conseillerais quelque chose qui aurait plus cette forme, question d'épurer un peu: - Code:
-
<div class="groupes"> <span style="color:#XXXXXX;">GROUPE</span> <span style="color:#XXXXXX;">GROUPE</span> <span style="color:#XXXXXX;">GROUPE</span> </div>
Et toutes les propriétés communes pourraient être dans ta classe. | | |
| | | 'Christa
Lostmindy
Messages : 2856
| On peut faire nettement plus simple x) Voyons le code cité plus haut : - Code:
-
<span style="font-family: georgia"><span style="font-size: 10px"><span style="font-style: italic"><span align="center"><span style="text-shadow: 0px 0px 0px WHITE"><span style="letter-spacing: 0pt; text-transform: lowercase"><span class="groupes"><span style="text-shadow: 0px 0px 1px WHITE"><a href="http://artsport.forumgratuit.org/g1-juges"><font color="#F5A2B0" size="4.5"><b> <font color="#EFEFEF"></font>Les Juges</b></font></a></span><br> On repère toutes les propriétés "communes" associées à chacun des groupes, et les propriétés qui sont spécifiques à chaque groupe (là il n'y en a qu'un, difficile de bien voir et j'ai la flemme de fouiller l'autre code XD) Ce qui nous donne pour le tout : font-family:georgia; font-size:10px; font-style:italic; text-align:center <-- inutile puisqu'on est dans un span text-shadow:0px 0px 0px white <-- pas de majuscules !! letter-spacing: 0px; text-transform: lowercase; text-shadow: 0px 0px 1px white <-- DOUBLON ! Et c'est lui qui a la préséance vu qu'il est déclaré en dernier <font color="#F5A2B0" size="4.5"> équivalent de color:#F5A2B0 et de font-size:4.5pt (on vire la balise font, obsolète depuis longtemps) <b> équivalent de font-weight:bold; (et on vire la balise strong) <font color="#EFEFEF"> équivalent de color:#EFEFEF (encore un doublon) - Code:
-
<div class="groupes"> <a href="#lien" class="groupe1">Groupe 1</a> <a href="#lien" class="groupe2">Groupe 1</a> <a href="#lien" class="groupe3">Groupe 1</a> </div> - Code:
-
/* bloc contenant tous les groupes */ .groupes { text-align:center; }
/* commun à tous les groupes */ .groupes a { font-family:georgia; font-size:10px; font-style:italic; letter-spacing: 0px; text-transform: lowercase; text-shadow: 0px 0px 1px white; font-weight:bold; color:#EFEFEF; }
/* spécificités par groupe */ a.groupe1 { color:#000000 } a.groupe2 { color:#000000; } a.groupe3 { color:#000000; } Ah oui, et je rappelle que "un CSS par mot" n'est pas inutile. Voyons ça de plus près. "J'ai la flemme de mettre du CSS pour un seul mot je vais le mettre directement dans le HTML ahah que je suis futée" [... plusieurs semaines plus tard...] "J'ai besoin de changer les couleurs, rhâ il faut que j'aille éditer le code HTML, je sais pas où je suis ! Et il faut que je pense à valider le template ! Ah mince, j'ai effacé une balise par erreur mais j'ai oublié laquelle ! Ah, ce serait si simple si j'avais simplement un bloc de quelques CSS juste pour ça !" Ou pire encore, imagine que tu utilises la même "mise en forme" partout (titres, etc) en style évidemment, et que tu aies besoin soudain de la changer : tu vas faire le tour de tous les messages pour tous les corriger ? x) Bref, TOUJOURS UTILISER DES CLASSES, même pour une seule propriété CSS. | | |
| | | Invité Invité
| Merci à vous deux Je n'ai pas réussi à le faire sur ce code-ci, j'ai désespéré à 2h du matin J'en ai pris un autre un peu plus clair et j'ai fait comme Fire-Fly à mis ci-dessus. Propriétés communes en CSS et les couleurs face au groupe. | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Hum. Tu es en train de me dire que ce que je t'ai pondu à 6h30 du matin au risque de louper mon train n'a servi à rien ? Y compris mes conseils, la méthodologie et tout ça ? | | |
| | | Espeon
Administrateur
Messages : 1819
| Techniquement parlant, si le temps s'écoule de la même façon pour tout le monde (hypothèse plausible), elle ne peux pas parler de ta solution de 6h30 'Christa : - Doraleen a écrit:
- Je n'ai pas réussi à le faire sur ce code-ci, j'ai désespéré à 2h du matin
Donc je conclus que ça n'a pas été testé. En fait, je me permet juste d'intervenir pour encourager Doraleen : ce n'est pas parce-que tu n'y arrive pas que ce n'est pas comme cela qu'il faut faire. Il sera plus productif pour toi de parvenir au résultat que de prendre une solution de facilité qui, comme viens de te l'expliquer 'Christa, n'est pas du tout, mais alors du tout conseillée. Ce que je te suggère, c'est de mettre en place la solution de 'Christa. Si ça ne marche pas, tu désespère pas, tu poste simplement à la suite le code que tu viens de produire et demande où se trouve l'erreur Ainsi tu progressera (et 'Christa ratera son train pour la bonne cause au lieu de se taper une explication exhaustive pour peanut ). | | |
| | | Invité Invité
| J'vais essayer de le faire (pour que Christa n'ait aps raté son train pour rien^^) Désolée de pas avoir posté en allant me coucher, j'étais trop claquée. :/
EDIT : pour les couleurs ça fonctionne. Seulement maintenant mes groupes sont en colonne et plus en ligne. | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Il faudrait que tu nous donne ton code pour qu'on puisse savoir où tu t'es plantée, fondamentalement le raisonnement qu'on te donne est bon, c'est donc un souci entre toi et ton clavier XD
(Pour information, je n'ai pas loupé mon train, j'ai FAILLI le louper, nuance XD) | | |
| | | Invité Invité
| Voila le template du qeel - Code:
-
<div class="cadrqeel"> <div class="groupes" style="font-weight:normal;font-size:22px;letter-spacing:-1px;"><br> <div class="juges">Les Juges</div> <div class="coachs">Les Coachs</div> <div class="profs">Les Profs</div> <div class="athlètes">Les Athlètes</div> <div class="fans">Les Fans</div> </div> </div><br>
<center> <table><tr> <td><div class="cadreqeel2"><br>Bienvenue sur <b>ART SPORT</b>! <span id="messages">{TOTAL_POSTS}</span> <script type="text/javascript">document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de/,"Nos athlètes ont posté un total de");</script> <script type="text/javascript">document.getElementById('messages').innerHTML=document.getElementById('messages').innerHTML.replace(/messages/,"messages dans le gymnase");</script>. <span id="users">{TOTAL_USERS}</span> <script type="text/javascript"> document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membre enregistré/,"sportif ayant rejoint le club.");document.getElementById('users').innerHTML=document.getElementById('users').innerHTML.replace(/membres enregistrés/,"sportifs ayant rejoint le club");</script>. <span id="newuser">{NEWEST_USER}</span> <script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Un nouveau s'est inscrit récemment:");</script>. Nous lui souhaitons la bienvenue parmi les autres athlètes ! <br><br> <span id="totaluser">{RECORD_USERS}</span><br /> <script type="text/javascript">document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateur en ligne/,"athlète");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/utilisateurs en ligne/,"sportifs");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistré/,"Athlète");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Enregistrés/,"Athlètes");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisible/,"Recruteur");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invisibles/,"Recruteurs");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invité/,"Fan");document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Invités/,"Fans");</script><br> <div style="height:50px; overflow:auto; font-size:11px;"> <span id="connecteduser">{LOGGED_IN_USER_LIST}<br /></span> <script type="text/javascript">document.getElementById('connecteduser').innerHTML=document.getElementById('connecteduser').innerHTML.replace(/Utilisateurs enregistrés/,"Sportifs Connectés"); </script> </div> </td> <td> <div style="width: 300px; overflow:auto; height: 180px; font-size:11px; text-align:justify;color:#a39c8d;background-color:#fcf5dd; border:1px solid #e8ebb8; padding:10px; margin-left:25px;line-height: 12px;font-family:Tahoma;"> <table border="0" cellspacing="3" cellpadding="0" align="center" style="text-align: justify; font-size: 8px;"><tr><td class="row1"><span class="gensmall">{L_CONNECTED_MEMBERS}</span></td></tr></table></div></div></td></tr></table>
</center> <!-- END disable_viewonline --> | | |
| | | Espeon
Administrateur
Messages : 1819
| Je ne comprends pas bien là à vrai dire : le post de 'Christa est pourtant bien clair et très détaillé sur la structure finale que doit présenter ton HTML (template) : - Code:
-
<div class="groupes"> <a href="#lien" class="groupe1">Groupe 1</a> <a href="#lien" class="groupe2">Groupe 2</a> <a href="#lien" class="groupe3">Groupe 3</a> </div> Ici, tu inclus les groupes non pas dans des <a> mais dans des <div> . De plus, il reste encore une balise <br /> qui traine, ainsi que du style . Et donc, pour te répondre, tes groupes sont en colonne parce-que tu les as mis dans des balises de type block, et non des balises de type inline. Pour info, <a> est une balise de type inline, <span> est une balise de type inline mais <div> est une balise de type block. Pour info également, cette propriété (par défaut) est modifiable en CSS via la propriété display (et il existe un certain nombre de valeurs plus exotiques à cette propriété). | | |
| | | Invité Invité
| Donc il faut que je mette un span pour qu'elles soient à la suite ? Pour les autres restant encore dans le html et pa encore dans le css c'est normal, j'ai pas fini^^ Ahhh avec des span ça marche Merci | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Ce ne sont pas supposés être des liens ? Pourquoi veux tu utiliser des span ou des div ? Ca ne sert à rien '_' | | |
| | | Invité Invité
| Non, je ne veux pas mettre des liens. Juste faire un rappel des groupes (pourquoi tel membre à cette couleur). Mais je ne veux pas que les membres aient accès aux listes des groupes, donc les liens ne serviront à rien. | | |
| | | Espeon
Administrateur
Messages : 1819
| Ce qui compte c'est que tu parvienne effectivement à adapter le code à tes besoins à toi quoiqu'il en soit Qu'est-ce-que ça donne ? Est-ce-que tu obtiens ce l'effet désiré ? | | |
| | | Invité Invité
| Oui, j'ai réussi a obtenir ce que je voulais. | | |
| | | Espeon
Administrateur
Messages : 1819
| Le problème est-il résolu alors ? Si oui je t'invite à éditer le titre du sujet pour y placer [Résolu] avant afin que les modérateurs puissent le voir plus aisément Merci ! | | |
| | | Melone
{ Modérateur }
Messages : 805
| Bonsoir ! Merci du rappel Espeon, je vois qu'il est affiché, j'imagine donc que le problème est résolu. ^^ Je classe. Bonne fin de journée, | | |
| | | Contenu sponsorisé
| | | | | [Résolu] Corriger un code svp ? | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|