Scorpio Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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
Arcy Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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
Scorpio Posté(e) le 24 juillet 2015 Auteur Posté(e) le 24 juillet 2015 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
Arcy Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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>
Scorpio Posté(e) le 24 juillet 2015 Auteur Posté(e) le 24 juillet 2015 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
Arcy Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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 ...).
Scorpio Posté(e) le 24 juillet 2015 Auteur Posté(e) le 24 juillet 2015 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;}
Arcy Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 Rien, un #content > table > th, #content > table > td { text-align: center;} devrait faire l'affaire je pense.
Scorpio Posté(e) le 24 juillet 2015 Auteur Posté(e) le 24 juillet 2015 je l'ai rajouté mais sa change rien
RinDman Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 Vous la connaissez tous : Bootstraaaaaaaaaaaaaaaaaaaaaaaaaaaaap
Arcy Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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.
RinDman Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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.
foetus Posté(e) le 24 juillet 2015 Posté(e) le 24 juillet 2015 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>
Scorpio Posté(e) le 24 juillet 2015 Auteur Posté(e) le 24 juillet 2015 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
Scorpio Posté(e) le 25 juillet 2015 Auteur Posté(e) le 25 juillet 2015 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; }
foetus Posté(e) le 25 juillet 2015 Posté(e) le 25 juillet 2015 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
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.