Forum d'entraide PHPFrance

Bonsoir à tous,

Je cherche une solution pour faire apparaitre / disparaitre des <div> sans javascript.

à savoir que je connait le système en css pour les menu http://www.css-faciles.com/menu-deroulant.php mais là je ne vais pas utilisé de liste (li).

Par avance merci.

Cry13

Salut,
ce n'est pas une question d'utilité de telle ou telle balise, c'est une question de sémantique.

On utilise les balises correspondant à leur destination dans la structure du document. Il faut distinguer en effet la structure d'une page de sa mise en forme. Dans une page, on a des titres, sous-titres, paragraphes, listes, images, bloc de citations, etc, etc.. Donc en fonction de ce à quoi correspond la partie du contenu, on utilise la balise appropriée. Après seulement on s'occupe de la mise en forme et même de l'affichage ou non de tel ou tel élément et cette mise en page se fait avec une ou plusieurs feuille(s) de style.

Dans le cas d'un menu par exemple, on a affaire à quoi ? À une liste de liens, il est donc sémantiquement approprié d'utiliser des listes HTML ul ou ol voire dl.

J'ajoute un point : attention avec la balise div qui est trop souvent utilisée à tort et à travers : c'est un élément de bloc destiné à isoler une partie du contenu d'un document. On ne l'utilise pas parce que tout le monde dit de le faire, on l'utilise parce que c'est approprié par rapport à cette structure. On doit prendre garde à ce que dans son bouquin « CSS, Pratique du design web » Raphaël Goetter appelle « la divite » : ce qu'il faut apprendre, c'est la distinction dans les balises HTML les éléments de bloc des éléments de ligne.

Va faire un tour sur le site csszengarden et vois ce qu'on peut faire comme mises en page tout en conservant intacte la structure HTML.

Merci pour ta réponse Cyrano.

ne t'inquiète pas, je n'abuse pas des <div> j'ai déjà mon menu en <li>

Mais la c'est différant, je m'explique : dans ma page produits, j'ai une liste de 5 familles qui amène chacune une liste d'une douzaines de sous famille qui doivent donner sur une liste de beaucoup de produits.

Ce que je compte faire dans ma page produits c'est afficher les familles en titre, mettre les sous famille sous forme de jolie boutons avec des petit picto dedans et afficher la liste de produits que le client aura sélectionné.

Dans le cas d'un catalogue, le format approprié pourrait parfaitement être un tableau HTML : il ne faut effectivement pas bannir ce dernier en dehors d'une utilisation à des fins de mise en page. Mais les données d'un catalogue, c'est justement ce qu'on appelle des données « tabulaires » qu'on peut disposer en lignes et en colonnes, avec par exemple une ligne pour chaque produit et les informations sur les colonnes,.... ou l'inverse selon le cas. La sémantique serait tout à fait respectée de cette manière.

Mais ça dépend du besoin : est-ce que pour chaque produit tu as plusieurs informations différentes à faire apparaître ou bien juste un nom de produit avec éventuellement une image et le tout assorti d'un lien ? Comme tu mentionnes des catégories/sous-catégories, les listes imbriquées seraient peut-être effectivement plus indiquées puisque l'indentation va justement montrer la séparation entre les catégories. Ça, c'est pour la structure. Ensuite pour la mise en page, tu ajoutes un style CSS qui va masquer les contenus ou les afficher selon le survol des différents liens.

À mon sens, le premier élément à définir, c'est la structure des données de ta page : elle doit être logique indépendamment de toute mise en page. Après seulement tu pourras t'attarder sur le coté visuel et « cosmétique ».

Je comprend tout à fais ce que tu veux dire, il est vrais que les liste conviendrais tout à fais pour les classe et sous classes de produits.

en suite chaque liste de sous classes son identique et ne contienne que du texte, les tableaux suffiront amplement et seront différents pour chaque familles de sous produits.

pour ce qui est de l'apparition pas au survol mais au clic car cela ferais trop brouillon.

Mais cela ne résout pas mon souci : Comment faire apparaitre les tableaux sans .js ?!

Tu peux te baser là-dessus: http://www.alsacreations.com/tuto/lire/ ... ation.html
mais honnêtement, sans javascript, tu n'arriveras pas à rester compatible avec beaucoup de navigateurs :/

Pourquoi souhaites-tu ne pas utiliser javascript?

Comment faire apparaitre les tableaux sans .js ?!

Tu ne peux pas : si tu veux garder un code valide. En CSS, il faudrait utiliser la pseudo-classe hover sur un lien : or tu ne peux pas inclure un tableau dans une ancre <a></a>.

Je pense que je vais utilisé js en fin de compte.

Merci bien

Je pense que je vais utilisé js en fin de compte.

D'où l'importance d'une bonne structure de document HTML de telle sorte que pour le cas où tu tombes sur un parano qui a désactivé le JavaScript, la navigation n'est en rien altérée, il n'y a de perte pour ce même internaute qu'au niveau de l'ergonomie.

L'utilisation du JavaScript ne devrait en effet n'avoir lieu que pour améliorer un fonctionnement de base déjà efficace en soi même si les limitations techniques ne permettent pas certains subtilités ou effets spéciaux, effets qu'on peut ajouter ensuite de façon indépendante.

yeah je vois tout à fais ce que u veux dire Et c'est d'autant plus important pour un bon référencement.

Alors voilà :

Je me suis décidé à utilisé js j'ai donc mes bouton :

<li><a title="nom" onclick="switchDiv(1)" href="#produits1"><img width="180" height="40" alt="nom" src="img/produits/btn_nom.png"/></a></li>
<li><a title="nom" onclick="switchDiv(2)"  href="#produits2"><img width="180" height="40" alt="nom" src="img/produits/btn_nom.png"/></a></li>

Ainsi que mes tableau :

<table id="produits1" class="produits" width="880" border="0" style="display:none;"></table>
<table id="produits2" class="produits" width="880" border="0" style="display:none;"></table>

et mon js :
Hors, lorsque je désactive JavaScript, je n'es pas accès au information... Un tchio coup de main ?

Tu pars à l'envers : commence par préparer un code qui affiche tout, et ensuite seulement masque le superflu avec JavaScript. De cette manière, en désactivant le JavaScript, ton site reste navigable et le contenu est toujours là, même si c'est moins heureux visuellement.

Donc, crée tes tableaux avec leur contenu, ensuite, utilise un gestionnaire d'évènement body.onload pour masquer les éléments à ne faire apparaitre que sous condition, le survol d'un élément par la souris par exemple.

Merci encore, mais je te rassure ma page est terminer c'est juste que je ne vais pas vous copier un pavé je ne met que le plus important,

et j'ai réglé mon souci avec :
C'est ce à quoi tu penser ?

Exactement.

Allez, j'ajoute que tu peux même avantageusement simplifier ta fonction de switchDiv :

function switchDiv(n)
{
    // Identifiant du bloc à traiter
    var id = 'produits' + n;
    // Récupération du statut courant
    var sc = document.getElementById(id).style.display;
    // Définition du nouveau statut
    var ns = (sc == 'block') ? 'none' : 'block';
    // Application du nouveau statut
    document.getElementById(id).style.display = ns;
}

Essaye ça, normalement ça devrait fonctionner correctement quel que soit le nombre de blocs à utiliser.