Posté(e) le 24 juillet 20159 a Bonjour, Je viens vers vous afin d'avoir une petite aide car j'arrive pas à résoudre mon soucis. Voilà sur une page web j'ai mis un Picto en dessous l'intituler de la rubrique et en dessous le chois des sous rubrique pour le premier pas de soucis cela fonctionne et le résultat et comme je le souhaité. Je souhaite en rajouté, mais à chaque fois que je les rajoute comme le premier sa me l'ai met les un en dessous des autre. Hors NON j'aimerais en mettre 3 voir 4 pars ligne Voici en image : Première rubrique résultat positif ajout de la deuxième rubrique mais : celle ci au lieu de se mettre à droite de la première, elle se met en dessous. se que j'aimerais sa serais comme ceci voici mon code de cette partie <div id="content"> <div align="center"> <table width="500" border="0"> <tr> <img src="../../images/logo-utilitaires.jpg" alt=" " width="120" height="80" border="1" /> <th scope="col"><span class="Style1">Utilitaires</span> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./OS/">Systèmes d'exploitation</option> </select> </form> </th> </tr> </table> <table width="500" border="0"> <tr> <img src="../../images/logo-personnalisation.png" alt=" " width="120" height="80" border="1" /> <th scope="col"><span class="Style1">Personnalisation</span> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Ecran_veille">Ecran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </th> </tr> </table> </div></div> dans l'attente d'une réponse de votre pars, je vous en remercie d'avance Bien cordialement
Posté(e) le 24 juillet 20159 a Perso, j'aurai plus vu comme ça (même si j'aurai pas choisi cette méthode) : <div id="content"> <div align="center"> <table width="500" border="0"> <tr> <th scope="col"> <img src="../../images/logo-utilitaires.jpg" alt=" " width="120" height="80" border="1" /> </th> <th scope="col"> <img src="../../images/logo-personnalisation.png" alt=" " width="120" height="80" border="1" /> </th> </tr> <tr> <td><span class="Style1">Utilitaires</span></td> <td><span class="Style1">Personnalisation</span></td> </tr> <tr> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Ecran_veille">Ecran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </td> </tr> </table> </div></div> Si ça peut te donner un coup de main : https://devdocs.io/html/element/table Modifié le 24 juillet 20159 a par Arcy
Posté(e) le 24 juillet 20159 a Auteur J'y est pensé mais le résultat me conviens pas du tous car j'avais essayer comme ton codele résultat avec ton code voila
Posté(e) le 24 juillet 20159 a J'avais oublié un formulaire : <div id="content"> <div align="center"> <table width="500" border="0"> <tr> <th scope="col"> <img src="../../images/logo-utilitaires.jpg" alt=" " width="120" height="80" border="1" /> </th> <th scope="col"> <img src="../../images/logo-personnalisation.png" alt=" " width="120" height="80" border="1" /> </th> </tr> <tr> <td><span class="Style1">Utilitaires</span></td> <td><span class="Style1">Personnalisation</span></td> </tr> <tr> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./OS/">Systèmes d'exploitation</option> </select> </form> </td> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Ecran_veille">Ecran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </td> </tr> </table> </div></div>
Posté(e) le 24 juillet 20159 a Auteur Merci, cependant sa fais pas très jolie on dirait que les images sont centré et que l’intitulé et le formulaire et aligné à gauche j'aimerais que sa fasse comme sa si c'est possible Merci d"'avance
Posté(e) le 24 juillet 20159 a Là après, il faut voir avec le CSS. Pour les tables, le CSS offre plus de possibilité en terme de positionnement intérieur (vertical-align, align-text, tout ça ...).
Posté(e) le 24 juillet 20159 a Auteur Quel informations te faudrait il de mon CSS Voici son contenue body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #000000; color: #cccccc; background: url('./images/mb_images/bgr_body.gif');}a:link { color: #e4e4e4; text-decoration: none; font-weight: bold;}a:visited { text-decoration: none; color: #e4e4e4; }a:hover { text-decoration: none; color: #ffffff; }a:active { text-decoration: none; color: #e4e4e4; }h1 { font-size: 16px; }h4 { font-size: 14px; }#img { vertical-align:middle;}#wrapper { margin: 0 auto; margin-top: 16px; width: 940px; background:url('./images/mb_images/bgr_main.gif') repeat-y; border: 4px solid #000000;}#header { width: 940px; float: left; height: 131px; margin: 0 auto; color: #cccccc; background-image:url('./images/mb_images/header.gif');}#title { width: 300px; float: left; padding: 5px; margin: 0 auto; color: #bc0216;}#title a:link,#title a:visited { color: #bc0216; font-size: 14px; }#title a:hover,#title a:focus,#title a:active { color: #f40205; font-size: 14px; }#leftcolumn { color: #cccccc; margin: 0 auto; padding: 0; padding-top: 30px; width: 152px; float: left;}#content { float: left; color: #cccccc; margin: 0 auto; padding: 0 5px 0 5px; width: 626px;}#rightcolumn { color: #cccccc; margin: 0 auto; padding: 0; padding-top: 30px; width: 152px; float: left;}#footer { width: 940px; height: 33px; clear: both; color: #cccccc; margin: 0 auto; background-image:url('./images/mb_images/footer.gif');}.menulist { width: 137px; margin: 0 auto; padding-top: 6px; padding-bottom: 6px; list-style-type: none; background-color :#000000;}.newslist { width: 127px; margin: 0 auto; padding: 5px; list-style-type: none; background-color :#000000; color: #cccccc;}#nav,#nav li { width: 137px; margin:0 auto; padding: 0; list-style: none; display: block;}#nav a { width: 137px; height: 27px; background: url('./images/mb_images/button.gif') no-repeat; display: block; padding: 9px 0 0 0; position:relative; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #cccccc; text-transform:uppercase;}#nav a:hover,#nav a:focus,#nav a:active { background-position: 0 -36px; display: block; padding: 8px 0 0 0; color: #FFFFFF; position:relative; text-transform:uppercase;}#copyright { font-size: 11px; padding-top: 15px; color: #dfdfdf;} Modifié le 24 juillet 20159 a par Scorpio
Posté(e) le 24 juillet 20159 a Rien, un #content > table > th, #content > table > td { text-align: center;} devrait faire l'affaire je pense.
Posté(e) le 24 juillet 20159 a Vous la connaissez tous : Bootstraaaaaaaaaaaaaaaaaaaaaaaaaaaaap Là pour le coup, je peux que cautionner En plus le site officiel est vraiment bien foutu, impossible de ne pas arriver à suivre les exemples.
Posté(e) le 24 juillet 20159 a C'est la norme, ou pas encore officiellement... En tout cas, c'est le framework qui durera le plus longtemps possible. Tant que le W3C et le monde plussoient cette belle pièce, ça sera le cas Pour faire simple Scorpio : Il te propose des classes, tu les customises ( on ne réécrit pas leur règle de comportement ils sont corrigés à chaque MAJ, uniquement le style ). Il te propose son JS pour ses animations jolis et simples. ( Ok JQuery ça peut être lourd et monopolise son $ mais y a moyen de l'oublier le dollar , et de nos jours on a du multi core partout, ça reste "light" ) J'ai commencé à l'utiliser réellement qu' à mon stage d'intégrateur ( Merci à JC ) T'auras toujours du code html propre, des alignements propres, c'est centré, etc etc ... Bref, difficile de faire mieux ! La seule merde quand tu fais un site, c'est de penser mobile pour que les hypster ne se crèvent pas les yeux Les sites qui t'apprennent les langages informatique et qui sont à jour, te proposera souvent des framework populaires ET accessible ( OpenClassRoom by exemple ), impossible de louper.
Posté(e) le 24 juillet 20159 a Il faut le tester sur les navigateurs, et certaines valeurs sont harcodées (par exemple 3 colonnes -> 100/ 3 = 33% ou alors le top à 25%) Et n'oublies pas d'échapper tes caractères. <?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'><head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Ma barre des rubriques</title> <meta name='description' content='Ma barre des rubriques' /> <meta name='Date' content='Friday 24, Jully 2015' /> <style type='text/css'> #main_body { width: 600px; height: 200px; background-color: black; } .one_column { width: 33%; height: 100%; float: left; } .center_div_top { width: 100%; height: 75%; float: left; text-align: center; } .center_div_bottom { width: 100%; height: 25%; float: right; text-align: center; } .elmt_valgin { position: relative; top: 25%; } </style></head><body> <div id='main_body'> <div class='one_column'> <div class='center_div_top'><img class='elmt_valgin' src='http://static.nextinpact.com/forum_uploads/av-100713.png?_r=1366199862' /></div> <div class='center_div_bottom'> <form class='elmt_valgin'> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Écran_veille">Écran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </div> </div> <div class='one_column'> <div class='center_div_top'><img class='elmt_valgin' src='http://static.nextinpact.com/forum_uploads/av-175159.png' /></div> <div class='center_div_bottom'> <form class='elmt_valgin'> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Écran_veille">Écran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </div> </div> <div class='one_column'> <div class='center_div_top'><img class='elmt_valgin' src='http://static.nextinpact.com/forum_uploads/av-138541.jpg' /></div> <div class='center_div_bottom'> <form class='elmt_valgin'> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Écran_veille">Écran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </div> </div> </div></body></html> Modifié le 24 juillet 20159 a par foetus
Posté(e) le 24 juillet 20159 a Auteur J'ai trouver quelque chose qui fonctionne et qui donne les résultats souhaité, après est ce que cela est correct je sais pas Code avant modification <div id="content"> <div align="center"> <table width="500" border="0"> <tr> <th scope="col"> <img src="../../images/logo-utilitaires.jpg" alt=" " width="120" height="80" border="1" /> </th> <th scope="col"> <img src="../../images/logo-personnalisation.png" alt=" " width="120" height="80" border="1" /> </th> </tr> <tr> <td><span class="Style1">Utilitaires</span></td> <td><span class="Style1">Personnalisation</span></td> </tr> <tr> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./OS/">Systèmes d'exploitation</option> </select> </form> </td> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Ecran_veille">Ecran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </td> </tr> </table> </div></div>Code modifié <div id="content"> <div align="center"> <table width="350" border="0"> <tr> <th scope="col"> <img src="../../images/logo-utilitaires.jpg" alt=" " width="100" height="80" border="1" /> </th> <th scope="col"> <img src="../../images/logo-personnalisation.png" alt=" " width="100" height="80" border="1" /> </th> </tr> <tr> <td><p align="center"><span class="Style1">Utilitaires</span></p></td> <td><p align="center"><span class="Style1">Personnalisation</span></p></td> </tr> <tr> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./OS/">Systèmes d'exploitation</option> </select> </form> </td> <td> <form> <select name="listepages" size="1" onChange="chgpage(this.form)"> <option selected="selected">Choisissez votre rubrique.</option> <option value="./Personnalisation/Amélioration_bureau">Amélioration du bureau</option> <option value="./Personnalisation/Curseur-Icone">Curseur & Icone</option> <option value="./Personnalisation/Ecran_veille">Ecran de veille </option> <option value="./Personnalisation/Gadgets-inutilitaires">Gadgets et inutilitaires</option> <option value="./Personnalisation/Police_caractère">Police de caractère</option> <option value="./Personnalisation/Thèmes_bureau">Thèmes de bureau</option> <option value="./Personnalisation/Widgets">Widgets</option> </select> </form> </td> </tr> </table> </div></div> modifié <table width="350" border="0"> ligne 3 ajout de <p align="center"> ligne 13 et 14 et j'obtiens
Posté(e) le 25 juillet 20159 a Auteur En faite j'ai supprimer mes modif <p align="center"> en ligne 13 et 14 et j'ai mis sa en CSS et sa marche impeccable #content table { text-align: center; }
Posté(e) le 25 juillet 20159 a Ben oui c'est le "text-align: center;" qui fait tout (dans mon code je l'utilise) Mais après avec le HTML moderne, il faut faire attention au type du bloc que l'on configure avec le propriété display Modifié le 25 juillet 20159 a par foetus
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.