Besoin d'une petite aide

[Scorpio]

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]

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]

J'y est pensé mais le résultat me conviens pas du tous car j'avais essayer comme ton code
le résultat avec ton code voila 

 

[Arcy]

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]

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]

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]

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]

Rien, un

#content > table > th, #content > table > td {        text-align: center;}

devrait faire l'affaire je pense.

[Scorpio]

je l'ai rajouté mais sa change rien

[Arcy]

Bah aucune idée alors ...

[RinDman]

Vous la connaissez tous : Bootstraaaaaaaaaaaaaaaaaaaaaaaaaaaaap

[Scorpio]

Non je connais pas

[Arcy]

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]

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]

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]

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]

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]

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