5568 sujets

Sémantique web et HTML

Besoin de conseils sur l'utilisation des <div> et <table>

Bonjour

Je travaille encore à l'ancienne avec des tableaux pour positionner les élements de ma page. Smiley confused

Après avoir lu votre article j'aimerai me mettre aux div mais je voudrais bien avoir quelques conseils car j'arrive pas à voir ce qu'il faut garder en tableau et ce qu'il faut convertir en div.

Donc je vais vous décrire ma page

J'ai un tableau à deux colonnes contenant :
- Un menu à gauche
- Un contenu qui se trouve dans la colonne de droite et qui s'affiche en fonction du lien cliqué dans le menu

- Mon menu est composé de plusieurs petits tableaux avec dans l'entête du tableau le nom du menu et dans le corps les liens de ce menu

- Ma page de contenu possède des tableaux pour certaines rubriques comme la page des liens ou j'ai un lien + description par ligne

- Ma page de news a un tableau par news qui contient une ligne avec le titre, une avec le contenu, et la dernière qui contient la date et le nombre de commentaire

Pour l'instant je vois une chose à convertir c'est le tableau principal en le remplaçant par deux div flottants
C'est pour le reste que je sais pas
Faut il que je convertisse les menus (un tableau par menu) en div? (donc un div par menu)
Faut il que je convertisse les tableaux contenant les news en div? (un div par news)
Faut il que je convertisse le tableau de la page des liens en div?

Désolé pour toutes ces questions Smiley lol
Je vous remercie d'avance pour vos conseils Smiley cligne
Tu ne dois pas penser "je vais mettre au div" mais plutot "je vais respecter les standards : utiliser du html à bon escient et du css pour la présentation".

Je te conseilles de lire les articles ici : www.openweb.eu.org Smiley smile
Administrateur
Hell a écrit :
car j'arrive pas à voir ce qu'il faut garder en tableau et ce qu'il faut convertir en div.
...

Faut il que je convertisse les menus (un tableau par menu) en div? (donc un div par menu)
Faut il que je convertisse les tableaux contenant les news en div? (un div par news)
Faut il que je convertisse le tableau de la page des liens en div?

Salut Hell et bienvenue sur le forum.

Pour éviter que tu n'attrappes une "Divite chronique" ou autre maladie CSS, je vais te proposer de lire la Méthodologie d'introduction à ce salon CSS. Tu y trouveras de très bonnes bases indispensables.

Pour répondre à ta question : il ne faut surtout pas mettre des <div> partout. C'est justement le contraire de l'utilisation propre de HTML.

Il faut employer chaque balise pour sa fonction :
- <ul> pour les listes (par exemple les listes de liens, les menus)
- <p> pour les paragraphes
- <hn> pour les titres
- <div> pour regrouper d'autres balises
- etc.

Commence ton apprentissage en lisant les deux liens que je viens de te donner. Ils devraient mettre les choses au point dès le départ.

Bonne chance Smiley smile
Bonjour
Merci beaucoup la page sur les maladies css était très intéressante!
Pour les menus je veux bien faire une liste mais je vois pas comment m'organiser car mon tableau a un entête avec son propre fond et je peux pas reproduire la même chose avec une liste à puce
Désolé de vous embêter avec mes problèmes Smiley confus
Non j'y avais pas pensé Smiley smile
Par contre j'ai réussi à faire quelque chose de bien je pense rien qu'avec les listes à puces:


<ul class="menu">
Titre du menu<br>
<li>- <a href="?p=l1">Lien 1</a></li>
<li>- <a href="?p=l2">Lien 2</a></li>
</ul>

.menu { text-align:center; background-color: #347CA3; font-size:10px; font-weight: bold; font-family: "Verdana"; color: #ffffff; border: 1px solid black; width: 200px; padding: 1.5px 0px 0px 0px; margin: 0px 0px 5px 0px;}

.menu li { text-align: left; text-indent: 5px; color: #006699; background-color: #FFFAF5; list-style-type: none; font-weight: normal;   font-family : "Verdana"; font-size : 10px; }

.menu li a { color: #006699; }
.menu li a:link.titre_menu { text-decoration: none; }
.menu li a:visited.titre_menu { text-decoration: none; }
.menu li a:active.titre_menu { text-decoration: none; }
.menu li a:hover.titre_menu { text-decoration: underline; }
Sujet clos
Aller à