Hello !
Je suis en train de mettre en place un site destiné à la famille (pour l'instant), et je rencontre quelques soucis esthétiques et de compréhension du css, et c'est pourquoi je poste ici.
D'abord, un aperçu de la page à cet entroit : http://bouriaud.dyndns.org(...)
Sous le titre Menu, il y a un menu pliable/dépliable codé en css+js.
Ce que j'aimerai comprendre concernant le fonctionnement de cette fonctionnalité (réalisée par un click sur le lien référencé par le +) codée comme suit :
dans le source html :
<a href="#" onclick="return (change_class(this, document.getElementById ('SousMenu1')));">+</a>
Le source du js :
function change_class(link, elm)
{
elm.setAttribute('class', (elm.className.indexOf("O")> 0) ? 'SousMenu' : 'SousMenuOpen');
link.innerHTML = (elm.className.indexOf("O") > 0) ? ' - ' : ' + ';
return (false);
}
Enfin, le css :
.SousMenu
{
height:17px;
font-size:12px;
margin-left:10px;
overflow:hidden;
text-align:left;
}
.SousMenuOpen
{
height:auto;
font-size:12px;
margin-left:10px;
text-align:left;
}
Voilà, tous les éléments sont réunis, passons aux questions ;c)
1) Comment se fait-il que ceci ne fonctionne que si on met un href vers # et un onclick. Normalement, on devrait pouvoir faire un a href="JavaScript:laFontction();". J'ai essayé sans succès.
2) Problème de typo : comment se fait-il que le changement de caractère (passage du + au -) décale vers la gauche ? Il semble pourtant que ces deux caractères font la même largeur ? Ce point n'est pas très gênant, mais dans certains cas, il faut bouger la souris pour re-cliquer....
3) Je voulais changer l'apparence du + et du - (mettre une bordure, ce genre de choses), mais comme ça décale, c'est moche (cf. point 2). De plus, si on ne précise pas un display:block; pour le tag a utilisé, les précisions de largeur/hauteur, centrage, marges et padding restent sans effet sur cet élément, et de plus, le texte qui suit le lien se retrouve à la ligne. Pas top...
Pour le texte qui passe à la ligne, j'ai bien essayé de le passer en display:bock; position: relative; et en précisant top:-15px; left:20px; ca fonctionne, c'est à peu près ce que je veux, mais alors les éléments de menus se trouvent décalés vers le bas par la place prise par cette boite avant qu'elle ne soit déplacée. C'est moche.
Voilà, ce sont les questions que je me pose. Elle ne remettrons pas la condition humaine en jeu, ne changeront rien à votre vie de tous les jours. Par contre, si des réponses sont apportées, je me sentirais un peu moins con le prochain coup que je me coucherai, et j'en saurais un peu plus sur ces mystérieux points qui m'agacent.
Ah, j'oubliais, les tests ont été effectués sur ma machine qui fait tourner un environnement sous KDE 3.2.3. J'utilise par conséquent konqueror, et uniquement lui (pour l'instant je ne vois aucune raison de changer).
Voilà, merci à ceux qui pourront m'aider, et bon we aux autres !
Forum Programmation.web Divers problèmes de css....
7
août
2004
# J'oubliais....
Posté par Gyro Gearllose . Évalué à 1.
# patch pour le pb numéro 2
Posté par _alex . Évalué à 3.
a.changeur { text-align: center; text-decoration:none; border: thin dotted #000000; width: 20px; display: block; position: absolute; }
.changeurTitre { margin-left: 25px; }
------ index.html
< div class="menuHeader">
< a href="#" class="changeur" onclick="change_class(this, document.getElementById ('SousMenu2'));return (false);">+< /a>
< span class="changeurTitre">Espace public< /span>< /div>
< div id="SousMenu2.1" class="SousMenu">< a href="http://bouriaud.dyndns.org/AFaire.html(...)">A faire< /a>< /div>
< div id="SousMenu2.2" class="SousMenu">< a href="http://bouriaud.dyndns.org/about.html(...)">A propos...< /a>< /div>
< /div>
< /div>
----
changeur et changeurTitre devienne des block mais le second est affiché avec une marge de 25px, comme le précédent (celui qui contient le +) fait 20px de large, cela fonctionne.
[^] # Re: patch pour le pb numéro 2
Posté par Gyro Gearllose . Évalué à 1.
Je dis que ce n'est pas parfait, car sur certaines pages, j'ai plusieurs titres de menu de même niveau par exemple :
Dans ce cas, le + qui précède le SousMenu1.1 s'affiche alors que rien n'est développé. Si on développe tout, l'affichage est correct, mais si on replie SousMenu1.1, Menu2 reste à sa place (c'est peut-être un bug de konqui ou de khtml ceci dit !
En tout cas, merci. Ca m'a permis de vois un peu à quoi servait le tag <span> et d'avoir une solution qui, si elle n'est pas pleinement fonctionnelle dans tous les cas, au moins me met sur la piste avec un truc que j'aime bien !
[^] # Re: patch pour le pb numéro 2
Posté par _alex . Évalué à 2.
inline - donc en ligne pour span
block - par bloc pour div
[^] # Re: patch pour le pb numéro 2
Posté par Gyro Gearllose . Évalué à 2.
D'abord, merci pour ton aide qui m'a permis d'élucider quelques mystères. La différence de taille du caractère '+' et du caractère '-' vennait de l'utilisation de la police par défaut qui devait être une police truetype ou quelque chose du genre. J'ai donc changé ça en font-family:fixed; et depuis, ça ressemble plus a ce que je voulais (et surtout ça ne change plus de taille). Il ne me restait plus qu'à "jouer" avec les tailles des blocks, des "padding" (je ne connais pas la traduction de ce mot), et de placer un "letter-spacing" judicieux pour avoir à l'écran ce que j'avais en tête.
Du coup, ça résoud mes points 2 et 3. Pour le point 1, ce n'est pas si grave. Si ça fonctionne comme ça, je n'en demande pas plus !
Encore une fois, mille mercis. Bon courage si tu bosses !
[^] # Re: patch pour le pb numéro 2
Posté par _alex . Évalué à 1.
http://devedge.netscape.com/toolbox/sidebars/(...)
Sinon l'inspecteur DOM de Mozilla est bien sympa pour "debugger" une page.
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.