5568 sujets

Sémantique web et HTML

upload/1574-menugauche.jpg

Bonjour à tous. Je suis nouveau parmi vous et je n'ai pas une grande habitude des forums.
Voici la partie gauche d'un petit site de vente de vêtements. Deux éléments de menus en haut et un panier en dessous.
Comment dois-je ecrire ça en pur html, le plus simplement possible sachant qu'il y aura une CSS pour la mise en forme ?
En fait j'hésite a utiliser une table pour les lignes du panier, mais on me dit qu'il ne faut pas utiliser les tables parce que leur mise en forme varie selon les navigateurs. Un DIV, on me dis 'Trop de div tue les div' Smiley cligne ? Une liste que je formaterais 'inside' à l'interieur de la liste ? Des SPANs ? Aiiiddeeez-moi !!!

Si vous avez une idée...
Merci beaucoup par avance !

Frantz.
Modifié par frantz (18 Apr 2005 - 23:58)
Bonjour et merci Smiley ohwell Bienvenue à toi quand même.

Il n'est pas dit que les tableaux sont à proscrire mais que leur utilisation détournée pour de la mise en page est mauvaise. Dans ton cas l'utilisation d'un tableau pour organiser des données me parait indiquée.
Administrateur
En passant, merci de bien vouloir prendre le temps de relire les Règles du forum :
Règle a écrit :
11- Conventions d'écriture

L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'.
D'accord, ça m'apprendra à être pressé. Smiley rolleyes
Je commence bien, moi !

Donc Bonjour à tous (il n'est jamais trop tard),
Igor, merci pour ta réponse si rapide. Raphael, c'est promis je retiendrais les règles du forum.

Igor, pourrais-tu m'aider à écrire le code du panier en suivant ton conseil, faire un tableau, en le prévoyant pour accueillir facilement la CSS ? Est-ce qu'on peux totalement maitriser la mise en forme d'un tableau avec les feuilles de style ou y a t-il forcement des différences entre les navigateurs ?
Est-ce qu'il faut laisser tous les attributs html par défaut ?

Merci d'avance (il n'est toujours pas trop tard pour bien faire)

Frantz.
Bonjour et bienvenue frantz Smiley smile

Oupsssssss ! je t'assure que ce n'est pas de l'acharnement contre toi.... Smiley cligne

Mes collègues modos ont oublié de te demander de changer le titre de ton sujet pour un titre plus explicite qui permettra des recherches plus faciles dans l'avenir. Il suffit juste d'utiliser le bouton "Editer" du premier post.

Merci d'avance Smiley smile

Ps : Bah ! y a des jours comme ça Smiley cligne ... Mais demain est un autre jour Smiley jap
Modifié par dominique (18 Apr 2005 - 17:39)
Smiley fache Je vais y arriver à faire un message correct, je vais y arriver, les gars ! C'est comme en html, c'est une histoire de balises.

<sujet></sujet>
<message>
<bonjour></bonjour>
Mon message
<merci></merci>
</message>
salut frantz Smiley smile

je te propose ça


<ul>
<li><a href="">Assitant tailles</a></li>
<li><a href="">Nous contacter</a></li>
</ul>


<h3>Ma commande</h3>
/* le niveau d'en-tête de section (h3), est mis au hasard */


<ul>
<li>article 1</li>
<li>article 2</li>
</ul>

<p>
Total :
</p>

<div>
<a href="">Régler</a>
</div>


++
Modérateur
Salut clb56,

Par contre, si tu regarde bien, il y a une colonne pour le nom de l'article, et une autre colonne pour le prix.

Donc à mon avis, il faudrait utiliser un tableau html.
c'est juste


<ul>
<li><a href="">Assitant tailles</a></li>
<li><a href="">Nous contacter</a></li>
</ul>


<h3>Ma commande</h3>
/* le niveau d'en-tête de section (h3), est mis au hasard */


<dl>
<dt>article 1</dt>
<dd>prix></dd>
<dt>article 2</dt>
<dd>prix</dd>
</dl>

<p>
Total :
</p>

<div>
<a href="">Régler</a>
</div>


++
Modifié par clb56 (18 Apr 2005 - 18:08)
Modérateur
clb56, mais pourquoi diable ne veux-tu pas utiliser un tableau html ? C'est pourtant l'élément le plus sémantiquement correcte pour ca. Smiley confus

D'ailleurs, même si on pourrait en venir à la conclusion qu'une liste de définition et un tableau serait tout aussi bien sémantiquement correcte, juste au niveau de l'affichage, ce serait mieux d'utiliser un tableau car il correspond davantage à l'apparence qu'on veut lui donner. Sans CSS, il gardera quand même l'aspect voulu et formatter des listes de définitions par CSS risque de donner des résultats assez différents d'un navigateur à l'autre.

Je reste tout de même convaincu qu'il vaut mieux utiliser un tableau parce qu'il apporte plus d'informations qu'une simple liste de définition. Le tableau peut informer ce qu'il contient, afficher ce que signifie chaque colonne (article, prix, action de supprimer), contrairement à la liste de définition avec laquelle on doit définir soi-même (par logique) ce que chaque dt et dd contient.
Modifié par Merkel (18 Apr 2005 - 18:50)
Et oui !
Est-ce que tu pourrais me montrer ça (le code du tableau) par hasard ? Smiley confused
Plus je lis vos réponses, plus je lis de choses sur les tableaux, (notamment http://pompage.net/pompe/autableau/ ) et plus ça me parait 'difficile' de faire quelquechose de strictement clean.

Merci !
Modifié par frantz (18 Apr 2005 - 19:02)
Modérateur
En fait, ce n'est pas si difficile que ca de faire quelque chose de clean. Si tu lis l'article de pompage.net que tu viens de trouver, tu devrais y arriver sans trop de difficultés. Commence par structurer ton tableau pour ton panier et montre-nous le après. On pourra ensuite t'indiquer tes erreurs et te guider vers les tutoriaux nécessaires pour mettre du style à ton tableau.
Bon alors voilà ce que je vous ai concocté :

<table>
<caption>Ma commande</caption>
	<tr>
		<td>1</td>
		<td>Panama</td>
		<td>M</td>
		<td>Col. 2456</td>
		<td>19.50 €</td>
		<td><a href="supprimer.html"><img src="icoPoubelle.jpg" alt="Supprimer"/></a></td>
	</tr>
	<tr>
		<td>1</td>
		<td>Sunny</td>
		<td>L</td>
		<td>Col. 001</td>
		<td>12.40 €</td>
		<td><a href="supprimer.html"><img src="icoPoubelle.jpg" alt="Supprimer"/></a></td>
	</tr>
	<tr>
		<td colspan="4">Total</td>
		<td>19.50 €</td>
	</tr>
	<tr>
		<td colspan="5"><a href=""><img src="icoFlecheS3.gif" alt="" width="5" height="5" />Visualiser et régler</a></td>
	</tr>
</table>


Seulement, je suis pas sûr de pouvoir remettre avec CSS les éléments taille et couleur dans l'ordre indiqué sur mon image.
Si je dois respecter l'ordre, faut-il faire des <tbody> pour chaque ligne ? Ça deviendrait un peu compliqué, non ? Est-ce qu'il est bien d'utiliser <caption> plutôt qu'un <th colspan="5"> avec les css ? Est-ce que ça risque de bouger en fonction des navigateurs ?