[Résolu] Menu avec commentaires au survol - Aide complémentaire

Bonjour à tous !

J'utilise pour mon site (la prochaine mise en page) cet excellent tuto d'alsacréation :
Un menu avec commentaires au survol. Un code très clair m'a permis de l'adapter facilement (i.e. Ctrl+c Ctrl+V ).

Mais, parce qu'il y a toujours un mais, la largeur est fixée à 700px et je voudrais que le commentaire qui apparaît occupe toute la largeur de l'écran vers la droite (on ne couvre pas le futur beau logo de mon beauf' non mais !)et ce quelle que soit la résolution.

J'ai bien essayé "width: 100%" ou d'imposer les marges gauche et droite en comptant bien que la largeur s'ajusterait d'elle-même, mais non !
En fait, et pour être exacte, la seconde méthode mfonctionne avec Firefox mais pas avec IE.

D'avance merci et bonne soirée à vous !

PS-Oups ! C'est ici que ça se passe pour voir : Les albums photos de Maëlle, nouvelle version et ça ne concerne que le menu du haut (les copains, la famille... )
Modifié par Mkl (13 Jul 2005 - 23:00)

Rapidement, je déplace dans le bon salon : "Tutoriels et exercices Alsacréations : "Service Après Vente""

premier problème à résoudre, avant cela : l'interopérabilité. Ce menu à effet donne des résultats...
- surprenants dans Opera (problème CSS à revoir)
- mais surtout potentiellement catastrophiques sans css (c'et gentil, un lien de deux kilomètres de long), même si le mot clé du lien se trouve par définition au début. ça, c'est un problème de structure plus grave.

La même chose avec javascript serait plus probante (comme souvent pour ce qui touche au comportement, et non à la présentation statique) : elle délivrerait de l'obligation d'inclure dans l'intitulé du lien un texte qui l'alourdit inutilement pour bcp d'utilisateurs.
Modifié par Laurent Denis (13 Jul 2005 - 21:49)

Raphael a écrit :
Rapidement, je déplace dans le bon salon : "Tutoriels et exercices Alsacréations : "Service Après Vente""

Encore un qui n'avait pas tout lu de la FAQ et des règles Oups, c'est moi ! Merci !

Laurent Denis a écrit :
premier problème à résoudre, avant cela : l'interopérabilité. Ce menu à effet donne des résultats...
- surprenants dans Opera,
- mais surtout catastrophiques sans css (c'et gentil, un lien de deux kilomètres de long)

La même chose avec javascript serait plus probante (comme souvent pour ce qui touche au comportement, et non à la présentation statique)

Surprenant sous Opéra ? Ah oui ! Je viens de l'installer par curiosité ! c'est le même résultat que si j'impose une marge à droite sous IE ! Pas terrible hein ?

Catastrophique sans CSS ! Ca par contre c'est plus ennuyeux ! Effectivement je dois admettre qu'un lien de 2 km de long peut nuire à la compréhension d'un site.

Va pour un .js alors. Le problème c'est autant je commence vaguement à bidouiller des morceaux de html et css. Je sais utiliser la propriété display... un peu. Et j'adore la position:fixed même si ça ne fonctionne pas sous IE, mais javascript ??? Mais... je vais chercher !

Merci... euh si jamais quelqu'un a une solution, je suis quand même preneur !
Modifié par Mkl (13 Jul 2005 - 23:22)

Effectivement, je comprends la réaction de Laurent Denis.
Par contre, passer par Javascript lorsque les commentaires sont essentiels me paraît risqué : si JS n'est pas activé, les informations n'apparaîtront pas.

Mieux vaut :
- des informations en CSS qui créeront un lien géant si CSS est désactivé ?
- des informations en Javascript qui n'apparaîtront pas si JS est désactivé ?

PS : ceci n'est pas un troll
Modifié par Raphael (13 Jul 2005 - 22:30)

Raphael a écrit :
Effectivement, je comprends la réaction de Laurent Denis.
Par contre, passer par Javascript lorsque les commentaires sont essentiels me paraît risqué : si JS n'est pas activé, les informations n'apparaîtront pas.

Mieux vaut :
- des informations en CSS qui créeront un lien géant si CSS est désactivé ?
- des informations en Javascript qui n'apparaîtront pas si JS est désactivé ?

Ah ! Merci M'sieur le modérateur ! Bon, alors, conclusion : Mes commentaires n'ont rien de fondamentaux (ils pourraient très bien disparaître si je choississais un JS et qu'il était désactivé par un utilisateur) mais je choisis le lien géant et la CSS !

A part ça et comme indiqué en objet, je considère mon problème comme résolu ! J'ai mis une largeur qui couvre au mieux le second menu et cela me convient ! Voir :Les albums photos de Maêlle, version 3

PS : En fait il y a surtout un élément CONTRE le Javascript, c'est que pour l'instant je n'ai que du code html, mais une fois ma mise en forme effectuée, je vais intégrer dedans mes boucles SPIP.

Raphael a écrit :
Effectivement, je comprends la réaction de Laurent Denis.
Par contre, passer par Javascript lorsque les commentaires sont essentiels me paraît risqué : si JS n'est pas activé, les informations n'apparaîtront pas.

Bah... Si CSS foire, comme ici, les commentaires posent également un léger problème

Surtout, l'absence de support javascript ne veut pas dire qu'ils n'apparaîtront pas. Juste qu'ils ne feront pas zig zag je suis là je suis plus là, comme dans cet amusant menu. Ce qui n'est pas plus mal

Soyons sérieux. De trois choses l'une :
- les commentaires sont essentiels : ils n'ont pas plus à dépendre du support CSS que du support javascript, dans leur présentation comme dans leur génération. Il y a un problème de contenu à résoudre d'abord, dans l'idée même de ces "commentaires" qui ne devraient pas en être (revoir par exemple l'intitulé du menu).
- les commentaires sont des commentaires : peut importe qu'il dépendent d'une implémentation telle que javascript ou CSS. ce sont des options utiles, mais des options.
- les commentaires sont là pour faire joli : on peut s'en passer à tel point qu'on peut carrément, si on veut les générer entièrement en CSS, en javascript ou en texte-en-image.

Alors, dans le cas médian (les commentaires sont des commentaires), pourquoi plutôt javascript ?
- c'est plus fiable (voir le flop de ce menu dans Opera)
- il s'agit ici d'un comportement dynamique, rôle du script, non ?
- plus simple à réaliser

Et puis, CSS, ça devient lassant.
Modifié par Laurent Denis (14 Jul 2005 - 00:33)

Laurent Denis a écrit :

Et puis, CSS, ça devient lassant.

Stoppez les machines, enregistrez tout ! lol
Laurent, toi qui rejetais le JavaScript il y a quelques temps ! ^^ roohh
Modifié par Olivier (14 Jul 2005 - 00:42)

minute historique, hein, Olivier ?

Disons que le dom est un bon contre-poid aux abus de CSS.

Mkl : c'est toujours aussi affreux dans Opera.

Laurent Denis a écrit :
minute historique, hein, Olivier ?

Juste histoire de te charrier pour une fois que j'en ai l'occasion ! c'est rare

Laurent Denis a écrit :
Disons que le dom est un bon contre-poid aux abus de CSS.

Tout à fait d'accord, et un bon javascript bien externalisé a peu de chance de faire des dégats même si c'est possible mais shhht !

Et je te rejoins pour ce qui concerne ce topic, le JavaScript me parait plus approprié, plus souple, plus pratique, plus efficace et aussi moins bordélique

Aucune perte de donnée à prévoir pour la non activation du JS.

<h2>Menu</h2>
<dl id="menu">
<dt><a href="...">mon item</a></dt>
<dd>mon explication</dd>
</dl>

Les listes de définition sont assez adaptées ici à mon sens puisque l'explication est en directe rapport et en direct complément du lien (titre) mais une structure à base de liste non ordonnée pour Laurent qui n'aime pas (encore ? ^^) les listes de définition est tout à fait envisageable.

Ensuite on passe tout ça à la moulinette JS

function feuxDartifice14juillet()
{
var menu = document.getElementById('menu');
var dts = menu.getElementsByTagName('dt');
for (var d = 0; d < dts.length; ++d) {
dts[d].onmouseover = function()
{
// bla bla
};
dts[d].onmouseout = function()
{
// bli bli
};
}
}

Par exemple mais le comportement onclick serait appréciable pour éviter l'effet 14 juillet
Modifié par Olivier (14 Jul 2005 - 00:55)

Olivier a écrit :
Les listes de définition sont assez adaptées ici à mon sens puisque l'explication est en directe rapport et en direct complément du lien (titre) mais une structure à base de liste non ordonnée pour Laurent qui n'aime pas (encore ? ^^) les listes de définition est tout à fait envisageable.

ce n'est pas que je ne les aime pas, Olivier. Mais c'est que, lorsqu'elles remplacent une structure de titres, elles sont bcp moins accessibles.

Ici, en revanche, aucun titrage ne se justifie : allez, deuxième minute historique : une dl sera très bien

Houla ! Fallait pas vous mettre dans des états pareils !

Laurent Denis a écrit :
Bah... Si CSS foire, comme ici, les commentaires posent également un léger problème

Laurent Denis a écrit :
Mkl : c'est toujours aussi affreux dans Opera.

Ca c'est résolu, si, si ! Voir : Les albums photos de Maëlle, version 3. Avec une largeur imposée qui couvre presque complètement la ligne du dessous et un fond blanc. C'est correct avec Firefox, IE ET Opéra !
Enfin normalement ?

Ca c'est pour la forme !

Pour le fond, J'ai encore des réflexes de peureux. Je sais utiliser, pardon je sais copier du code et le bidouiller. Mais j'ai encore du mal à m'aventurer vers d'autres balises. Je suis d'accord dans l'esprit, mon "menu" est plus une liste de "définitions" et peut très bien s'accomoder de balises dl, dt, dd. Je vais voir ça, de toute façon à force de le triturer dans tous les sens, pour essayer que ça fonctionne, il y a certainement des choses que je reprendrais. Je serais attentif à la structure.

Je suis ravi de ce topic ! Je n'ai pas eu de réponse précise que j'aurais pu utiliser à bon coup de "copier-coller". Mais des avis, des points de vue et des arguments constructifs ! Ah ! Vive le forum d'alsacréations !

Dernier point :

Olivier a écrit :

Ensuite on passe tout ça à la moulinette JS

function feuxDartifice14juillet()
{
var menu = document.getElementById('menu');
var dts = menu.getElementsByTagName('dt');
for (var d = 0; d < dts.length; ++d) {
dts[d].onmouseover = function()
{
// bla bla
};
dts[d].onmouseout = function()
{
// bli bli
};
}
}

Si je copie ça bêtement, ça va fonctionner ? Ou bien il faut que je réflechisse un peu ?

Encore merci !

Ahh bah nan, faut réfléchir un peu, c'est juste l'ossature générale

Olivier a écrit :
Ahh bah nan, faut réfléchir un peu, c'est juste l'ossature générale

Ouf, j'ai eu peur !