[HTML/JS/CSS] problème avec les styles!!

problème avec les styles!! [HTML/JS/CSS] - HTML/CSS - Programmation

Marsh Posté le 18-11-2002 à 13:03:29    

salut,
j'ai un problème avec les css, en effet j'ai un div qui en contien d'autres,
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title> New Document </title>
  5. <style>
  6. .over { text-decoration:underline; }
  7. .out { text-decoration:none; }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="over">pouet pouet sousligné
  12. <div class="out">pouet pas sousligné en principe</div>
  13. </div>
  14. </body>
  15. </html>


 
mais la classe out ne s'applique pas :( je sais pas pourquoi, à l'aide siouplé!!!!
 
 
pour mettre un peu plus de piment dans le post, voilà un deuxième exemple:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <style>
  6. .over { text-decoration:underline; font-style:italic;}
  7. .out { text-decoration:none; font-style:normal;}
  8. </style>
  9. </HEAD>
  10. <BODY>
  11. <div class="over">pouet pouet sousligné
  12. <div class="out">pouet pas sousligné en principe</div>
  13. </div>
  14. </BODY>
  15. </HTML>


 
ici la première est soulignée et en italique, la seconde ligne est soulignée mais pas d'italique !!!
 
moi ske je veux est que la deuxième soit pas soulignée et pas en italique, mais il la souligne quand même cet abruti de moz et IE !!!! :fou: pourquoi!!!!! à l'aide!!!!!!
 
 
(ancien post incompréhensible ci dessous, ne pas lire)
 
 
j'ai mis que ce div soit de la classe (disons) mover quand je passe ma souris dessus, et les sous div sont de la classe mout à moins que je passe ma souris dessus...
le problème que je rencontre est que la classe du surdiv "piétine" celle des sous div, car les sous div sont aussi soulignés alors qu'ils ne le devraient pas car leur classe contient text-underline:none;
 
si vous pouviez m'aider, à l'url suivante vous trouverez l'exemple:
 
http://pouet.cocomatic.net/meca/meca_nav.html
 
cliquez deux fois sur test avec urls bidon pour voir apparaitre les div,
merci bcp et silvousplait aidez moi :( paske je perds plein de temps et ne vois pas d'ou ça peut bien venir :/
 
 
edit: la popup qui apparait est une fenetre de debogage indiquant les classes de tous les DIV de la page, la calsse qui m'intéresse en particulier est mout et mover, correspondant à non-souligné et souligné


Message édité par k666 le 18-11-2002 à 18:19:31
Reply

Marsh Posté le 18-11-2002 à 13:03:29   

Reply

Marsh Posté le 18-11-2002 à 14:04:43    

opeu

Reply

Marsh Posté le 18-11-2002 à 15:04:30    

Mmmm je vois pas tellement de solution à part forcer le styles des éléments enfants à .mout...
 
Perso, je trouve vraiment ton menu compliqué... y'a moyen de faire plus simple à grand coup de CSS ce qui réduirait pas mal le JavaScript
 
 
PS: je sais que je me répète mais "/" est interdit dans les id="..."


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-11-2002 à 15:28:46    

yaisse je sais pour les interdits :p je sais c cradeau mais ça m'aide à coder paske je vois ça comme des tiroirs , des répertoires plus ou moins !!!
 
je sais quia bcp plus simple à faire, mais je suis obligé de passer par là, car ce menu de navigation doit être controlable par d'autres frames html ou n'importe quelle autre chose,
et je suis aussi obligé d'avoir tous ces différents états,
j'ai dit à la graphiste qu'elle me ponde une css hyper exhaustive et j'ai mis plein d'éléments en commun sur des classes pis je suis donc obligé de faire de la concaténation de classes comme ça pour reconstruire l'aspect souhaité ...
cette page là aura donc bientôt une API de contrôle de la CSS,
 
 
 
je viens de faire l'essai en forçant la classe de (par exemple) /1057/1058/643 et même comme ça il la souligne :( tu sais pas d'où ça peut bien venir ??? :/

Reply

Marsh Posté le 18-11-2002 à 15:33:00    


/1057/1058/ : level1 a_level1_on click mover
/1057/1058/content/ : mout
/1057/1058/642 : activite mout a_activite_off click
/1057/1058/641 : activite mout a_activite_off click
/1057/1058/643 : mout
 
 
 
en faisant ça, ça reste encore souligné alors que ça devrait pas car le /1057/1058/643 est à mout ainsi que son père /1057/1058/content/ mais son grand père est à mover :( je vois vraiment pas :(:(:(:(

Reply

Marsh Posté le 18-11-2002 à 16:14:23    

Tu dois appliquer mout aux enfants après avoir appliqué mover
 
Cela dit j'ai plusieurs questions :  
 
Pourquoi tu appliques onmouseover à un élément qui n'est pas un lien ? (sites et images)
 
Pourquoi tu n'utilises pas l'élément <a> pour les "vrais" liens ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-11-2002 à 16:20:44    

bin en fait paske en appliquant tout mon style etc... je pourrais vraiment faire comme si c'était des boutons, et par paresse aussi, paske j'aime pas mettre de :hover :link etc... ça me parait relou et je devrai rajouter plusieurs lignes, et paske, aussi, je construis toute la structure de divs depuis une feuille XSL et que je veux que le bazar soit vraiment le plus squelettaire possible :s


---------------
mangez du mozilla c le futur, c votre DESTIN ! http://www.mozilla.org/releases/
Reply

Marsh Posté le 18-11-2002 à 16:22:33    

sinon, même en l'appliquant après (la classe mout aux childs) ça continue de rester sousligné :'(


---------------
mangez du mozilla c le futur, c votre DESTIN ! http://www.mozilla.org/releases/
Reply

Marsh Posté le 18-11-2002 à 17:10:24    

k666 a écrit a écrit :

bin en fait paske en appliquant tout mon style etc... je pourrais vraiment faire comme si c'était des boutons, et par paresse aussi, `paske j'aime pas mettre de :hover :link etc... ça me parait relou et je devrai rajouter plusieurs lignes, et paske, aussi, je construis toute la structure de divs depuis une feuille XSL et que je veux que le bazar soit vraiment le plus squelettaire possible :s



C'est vrai que tes fonctions JavaScript sont beaucoup plus simples. :hover ça a justement été inventé pour ça !
 
Enfin je vois toujours pas l'intérêt de mettre le onmouseover sur les noeuds de tes arbres... car c'est bien eux qui posent problème... Enfin j'ai pas eu le courage de me plonger dans ton truc...
 
Sinon au pire tu peux faire quelque chose comme ça :  
<div><span onmouseover="...">Noeud</span>
  <div>Lien</div>
  <div>Lien</div>
  <div>Lien</div>
</div>


Message édité par gm_superstar le 18-11-2002 à 17:10:53

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-11-2002 à 17:40:32    

en fait j'ai le control total sur la navigation si je veux, grace au JS. peut etre par exemple que je veux cacher ou interdire de cliquer sur un noeud en particulier, grace a js je pourrais le faire et d'ailleurs montrer à l'utilisateur, de faàçon graphique , qu'il ny'a pas droit (le fameuse classe pasclick de ma css je crois) ... je suis vraiment obligé de faire comme ça, car en fait ce menu de navigation n'est qu'un satellite d'une api de navigation que je code actuellement, il peut lui envoyer des messages et en recevoir, et dans tous les cas il doit être capable de lire les évènements du menu de navigation et de modifier les classes de celui ci !
 
mais le problème est que je n'arrive pas à maintenir une classe d'un élément quand la classe de l'élément le contenant change ... ici par exemple, j'ai réussi à mieux cibler le problème, l'exemple est complètement simple et fastoche: regardez si vous avez la pèche:
 

http://pouet.cocomatic.net/meca/pb_css.html

 
 
 
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title> New Document </title>
  5. <style>
  6. .over { text-decoration:underline; }
  7. .out { text-decoration:none; }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="over">pouet pouet sousligné
  12. <div class="out">pouet pas sousligné en principe</div>
  13. </div>
  14. </body>
  15. </html>


Message édité par k666 le 18-11-2002 à 17:48:15

---------------
mangez du mozilla c le futur, c votre DESTIN ! http://www.mozilla.org/releases/
Reply

Marsh Posté le 18-11-2002 à 17:40:32   

Reply

Marsh Posté le 18-11-2002 à 18:20:16    

up voir le premier post du topic, que je viens d e modifier pour embrouiller moins votre esprit :p

Reply

Marsh Posté le 18-11-2002 à 18:29:38    

k666 a écrit a écrit :

mais le problème est que je n'arrive pas à maintenir une classe d'un élément quand la classe de l'élément le contenant change ... ici par exemple, j'ai réussi à mieux cibler le problème, l'exemple est complètement simple et fastoche: regardez si vous avez la pèche:
 

http://pouet.cocomatic.net/meca/pb_css.html




Bon en fait c'est logique parce que text-decoration: none; ça veut dire qu'on applique aucune décoration supplémentaire à ton texte. Le problème est que ton texte dans out a déjà une décoration : il est souligné car son conteneur est lui-même souligné. C'est plus ou mois dit dans la spec :
 

Citation :

Quand la propriété est appliquée à un élément de type bloc, elle agit sur tous les descendants de type en-ligne de celui-ci. Quand elle est appliquée à un élément de type en-ligne, ou agit sur celui-ci, cette propriété influence toutes les boîtes générées par cet élément.


 
En fait, je pense que ceux qui ont rédigé les specs des CSS n'ont pas envisagé ce cas (tordu). Donc à toi de trouver une alternative.
 
Tu ne peux pas organiser tes <div> comme je l'ai mis plus haut ?  
<div><span onmouseover="...">Noeud</span>
 <div>Lien</div>
 <div>Lien</div>
 <div>Lien</div>
</div>


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 18-11-2002 à 18:34:12    

gm_superstar a écrit a écrit :

 
En fait, je pense que ceux qui ont rédigé les specs des CSS n'ont pas envisagé ce cas (tordu). Donc à toi de trouver une alternative.




bin je pense sincèrement que c eux les tordus (appliquer une décoration supplémentaire ? comme si il y 'en avait tant que ça :sarcastic: :/) mais bon, je devrai alors faire ça, si compliqué que ça avec des div TITRE et des div CONTENU ? :'(

Reply

Marsh Posté le 18-11-2002 à 18:42:52    

mais c vrai qu'àforce d'être assis sur une chaise pourrax devant un ordi on devient rapidement tordu :D
 
 
 
(ceci est un up déguisé)

Reply

Marsh Posté le 19-11-2002 à 00:02:09    

eupe

Reply

Marsh Posté le 19-11-2002 à 00:04:34    

Mais tu veux quoi de plus ? T'as essayé la méthode que je te propose ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-11-2002 à 06:37:48    

Salut g testé ton prog, ma conclusion.
 
la première balise div (qui souligne)
s'applique jusqu'à la fermeture par la balise </div>
 
qd tu imbriques une seconde balise g l'impression qu'elle effectue une action EN PLUS!!!!!!!
 
hors l'action c "none" donc il reste bien souligne+none=souligne
 
c un peu confus mais on hérite dans la sous balise div, de tous les text deco des balises div supérieures!
 

k666 a écrit a écrit :

salut,
j'ai un problème avec les css, en effet j'ai un div qui en contien d'autres,
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title> New Document </title>
  5. <style>
  6. .over { text-decoration:underline; }
  7. .out { text-decoration:none; }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="over">pouet pouet sousligné
  12. <div class="out">pouet pas sousligné en principe</div>
  13. </div>
  14. </body>
  15. </html>


 
mais la classe out ne s'applique pas :( je sais pas pourquoi, à l'aide siouplé!!!!
 
 
pour mettre un peu plus de piment dans le post, voilà un deuxième exemple:
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <style>
  6. .over { text-decoration:underline; font-style:italic;}
  7. .out { text-decoration:none; font-style:normal;}
  8. </style>
  9. </HEAD>
  10. <BODY>
  11. <div class="over">pouet pouet sousligné
  12. <div class="out">pouet pas sousligné en principe</div>
  13. </div>
  14. </BODY>
  15. </HTML>


 
ici la première est soulignée et en italique, la seconde ligne est soulignée mais pas d'italique !!!
 
moi ske je veux est que la deuxième soit pas soulignée et pas en italique, mais il la souligne quand même cet abruti de moz et IE !!!! :fou: pourquoi!!!!! à l'aide!!!!!!
 
 
(ancien post incompréhensible ci dessous, ne pas lire)
 
 
j'ai mis que ce div soit de la classe (disons) mover quand je passe ma souris dessus, et les sous div sont de la classe mout à moins que je passe ma souris dessus...
le problème que je rencontre est que la classe du surdiv "piétine" celle des sous div, car les sous div sont aussi soulignés alors qu'ils ne le devraient pas car leur classe contient text-underline:none;
 
si vous pouviez m'aider, à l'url suivante vous trouverez l'exemple:
 
http://pouet.cocomatic.net/meca/meca_nav.html
 
cliquez deux fois sur test avec urls bidon pour voir apparaitre les div,
merci bcp et silvousplait aidez moi :( paske je perds plein de temps et ne vois pas d'ou ça peut bien venir :/
 
 
edit: la popup qui apparait est une fenetre de debogage indiquant les classes de tous les DIV de la page, la calsse qui m'intéresse en particulier est mout et mover, correspondant à non-souligné et souligné



Reply

Marsh Posté le 19-11-2002 à 10:25:08    

oui c bien ce qu'il me semblait et c'est très gênant :( je sais pas si je vais m'en sortir :(
ya pas un autre attribut qui ne soit pas text-decoration et qui fasse du soulignage ?????
merci

Reply

Marsh Posté le 19-11-2002 à 10:49:11    

MAIS TU PEUX PAS METTRE TON NOEUD ET LE ONMOUSEOVER DANS UN SPAN ?! (3 fois que je demande)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-11-2002 à 11:05:24    

sisisi!!! c ça que je dis, c ske je vais faire!!! je vais faire:
 
<div id="/123456/12345/">
 
  <div id="/123456/12345/titre/">titre du dossier</div>
 
  <div id="/123456/12345/contenu/">
    <div id="/123456/12345/123">contenu 1</div>
    <div id="/123456/12345/124">contenu 2</div>
  </div>
 
</div>
 
 
 
etc!!! mais bon c pas une belle solution, ça complique encore plus mon gros caca :/

Reply

Marsh Posté le 22-11-2002 à 12:00:05    

bon j'ai finalement fait comme vous m'avez conseillé, mais le code est bcp plus cradeau qu'avant!!! mais ça déchirax!!! :) au cas où si ça intéresse les curieux ! super menu de navigation JS plein de styles chanmax etc!
 
 
http://pouet.cocomatic.net/mecav2/meca_nav.html
 
 
 
commentaires si yen a ? :)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed