[Partage CSS/HTML] Petite barre de notation 'quivabien'

Petite barre de notation 'quivabien' [Partage CSS/HTML] - HTML/CSS - Programmation

Marsh Posté le 22-05-2005 à 15:22:10    

voilà je met a disposition un petit systeme de notation fait en CSS avec des div absolute...
c tout con et ca marche bien
 
DEMO : http://thenopeople.free.fr/testnote.htm
note : passer la souris sur les graph et voilà ;)
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Document sans nom</title>
  7. <style type="text/css">
  8. <!--
  9. #test {
  10. width: 500px;
  11. background-color: #663399;
  12. height: 100px;
  13. }
  14. #mk5, #mk4, #mk3, #mk2, #mk1 {
  15. position:absolute;
  16. height: 18px;
  17. font-size: 1px;
  18. top: 0px;
  19. left: 0px;
  20. }
  21. #mk {
  22. position:relative;
  23. width: 90px;
  24. height: 18px;
  25. font-size: 1px;
  26. margin: 50px;
  27. }
  28. #mk5 {
  29. width: 90px;
  30. }
  31. #mk4 {
  32. width: 72px;
  33. }
  34. #mk3 {
  35. width: 54px;
  36. }
  37. #mk2 {
  38. width: 36px;
  39. }
  40. #mk1 {
  41. width: 18px;
  42. }
  44. a{
  45. display:block;
  46. font-size: 1px;
  47. height: 18px;
  48. border: 0px;
  49. margin: 0px;
  50. padding: 0px;
  51. }
  53. .mkp a:hover{
  54. background: url(graph_linké.png);
  55. }
  57. #mk {
  58. background: url(graph_vide.png);
  59. }
  60. -->
  61. </style>
  62. </head>
  63. <body>
  64. <p>Test graph note roneos </p>
  65. <p>&nbsp; </p>
  66. <div id="test">
  67. <div id="mk">
  68.   <div class="mkp" id="mk5"><a href="#5"></a>
  69.    <div class="mkp" id="mk4"><a href="#4"></a>
  70.     <div class="mkp" id="mk3"><a href="#3"></a>
  71.      <div class="mkp" id="mk2"><a href="#2"></a>
  72.   <div class="mkp" id="mk1"><a href="#1"></a>
  73.   </div>
  74.  </div>
  75.     </div>
  76.    </div>
  77.   </div>
  78. </div>
  79. </div>
  80. </body>
  81. </html>


Message édité par mphilamp le 22-05-2005 à 15:31:44
Reply

Marsh Posté le 22-05-2005 à 15:22:10   

Reply

Marsh Posté le 22-05-2005 à 15:32:22    

Si tu essaies d'envoyer ça au validateur il va te cracher à la yeule.
Et si les CSS sont désactivés/non disponibles, le truc est inutilisable
 
Edit: en fait, ce truc serait parfaitement adapté à l'utilisation de Javascript en améliorations progressives, je fais un petit test case et je te montre ça


Message édité par masklinn le 22-05-2005 à 15:41:18

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-05-2005 à 15:48:27    

masklinn a écrit :

Si tu essaies d'envoyer ça au validateur il va te cracher à la yeule.
Et si les CSS sont désactivés/non disponibles, le truc est inutilisable
 
Edit: en fait, ce truc serait parfaitement adapté à l'utilisation de Javascript en améliorations progressives, je fais un petit test case et je te montre ça


 
c'est possible effectivmeent que le validateur me crache a la gueule
 
maintenat que les CSS soit desactivés ... c'est comme aves les navigateur sans flash , l'internaute ne peut pas profiter de la "special function" et bein tant pis...je peux rajouter des petits liens standard en dessous au pire ...


Message édité par mphilamp le 22-05-2005 à 15:50:35
Reply

Marsh Posté le 22-05-2005 à 15:52:46    

1/donc evidemment j'avoue que semantiquement c scandaleux
2/par contre le validator ne me crache que des bugs de reutilisation des ID(un id ne doit apparaitre que sur une seule balise par page) (on peut eviter çà en mettant que des class="" )

Reply

Marsh Posté le 22-05-2005 à 15:53:24    

mphilamp a écrit :

c'est possible effectivmeent que le validateur me crache a la gueule
 
maintenat que les CSS soit desactivés ... c'est comme aves les navigateur sans flash , l'internaute ne peut pas profiter de la "special function" et bein tant pis...je peux rajouter des petits liens standard en dessous au pire ...


C'est pas une question de "special functions", avec ta solution quand les CSS sont désactivés ou que le navigateur ne comprend pas/comprend mal/ne peut pas utiliser les CSS (navigateurs textuels, audio, braille par exemple) le visiteur n'a rien


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-05-2005 à 16:03:02    

masklinn a écrit :

C'est pas une question de "special functions", avec ta solution quand les CSS sont désactivés ou que le navigateur ne comprend pas/comprend mal/ne peut pas utiliser les CSS (navigateurs textuels, audio, braille par exemple) le visiteur n'a rien


 
MAIS G BIEN COMPRIS NO PB LA DESSUS NOUS SOMMES D'ACCORD !!!
 
 :heink:  
 
 
 
 

Reply

Marsh Posté le 22-05-2005 à 16:07:28    

mphilamp a écrit :

MAIS G BIEN COMPRIS NO PB LA DESSUS NOUS SOMMES D'ACCORD !!!
 
 :heink:


On dirait pas, vu la manière dont tu considères la chose [:spamafote]
(fonctions spéciales comme flash, on peut fournir des vrais liens "au pire", ...)
 
test réalisé
Les couleurs sont moches (c'est juste pour que ça soit visible), il y a quelques trucs à fixer dans le CSS (l'affichage merde sous Opera), mais bon globalement ça explique bien le principe


Message édité par masklinn le 22-05-2005 à 16:11:04

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-05-2005 à 16:14:35    


...
 

mphilamp a écrit :

...je peux rajouter des petits liens standard en dessous au pire ...


 
 
 :)


Message édité par mphilamp le 22-05-2005 à 16:50:04
Reply

Marsh Posté le 22-05-2005 à 16:15:51    

mais effectivment ta solution est subtile et elegante pour qu'au final tout s'accorde :)

Reply

Marsh Posté le 22-05-2005 à 16:16:17    

mphilamp a écrit :

:)


C'est bien ce que je dis, ce "au pire" est choquant, le site est censé fonctionner de lui même et les CSS ou le JS ne sont censés qu'améliorer le site, pas créer son contenu [:itm]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-05-2005 à 16:16:17   

Reply

Marsh Posté le 22-05-2005 à 16:35:28    

eh les gars vous avez voté combien?
 
==>

Reply

Marsh Posté le 22-05-2005 à 16:43:19    

pmusa a écrit :

eh les gars vous avez voté combien?
 
==>


[:the real moins moins]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-05-2005 à 16:49:29    

masklinn a écrit :

C'est bien ce que je dis, ce "au pire" est choquant, le site est censé fonctionner de lui même et les CSS ou le JS ne sont censés qu'améliorer le site, pas créer son contenu [:itm]


 
ok meaculpa sur ce point je suis d'accord [:globalfield]  

Reply

Marsh Posté le 22-05-2005 à 16:52:37    

mphilamp a écrit :

ok meaculpa sur ce point je suis d'accord [:globalfield]


 :jap:  
Plus rien à ajouter de mon côté alors (sauf que j'ai oublié de te féliciter pour l'idée d'utiliser une méthode de notation relativement claire en utilisant les standards)
(BTW voir les avantages et inconvénients de la méthode "liens" par rapport à une méthode utilisant des formulaires+radiobuttons, sémantiquement les forms seraient peut être plus logique, mais ils sont plus difficiles à styler)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-05-2005 à 16:59:59    

mais je vais prendre la chose d'une autre maniere... (rien que pour avoir un tout pti peu raison :D )  
 
pour un internaute utilisant des moyens d'accessibilité pour handicapés , les divs sont vides et ne correspondent a rien (je suis d'accord), il peut en outre voter avec d'autres liens (si tant est que le document sur lequel porte le vote puisse etre lisible par lui)  
 
pour un internaute non-handicapé, les proporiétés CSS de ces DIV sont finalement une information (du contenu) alors que ca ne devrait pas etre le cas(sur ce point je suis d'accord).  
 
ces divs sont neammoins similaires a un menu avec des a.hover en display block (pour me deculpabiliser lol) -sans texte descritptif à l'interieur- (->notez qu'il est possible d'en mettre un tout de meme)
je pense que le probleme alors ce situe plus au niveau de l'utilisation de ces balises : l'imbrication de ces balises DIV est absurde et ne comporte pas de sens logique pour un navigateur quelconque. honte à moi  :sweat:


Message édité par mphilamp le 22-05-2005 à 17:02:46
Reply

Marsh Posté le 22-05-2005 à 17:17:51    

Sur le site d'un client je dois faire une carte sur laquelle sont présentes plusieurs villes, et il doit etre possible de cliquer sur le nom de la ville pour acceder directement a une page la decrivant.
 
Je me demandais si le faire en map + area shape pouvait etre une bonne idée, finalement j'ai decidé de faire ca de la maniere suivante :  
 
A coté de la carte il y a la liste des villes classée par ordre alphabetique. Si un visiteur a le CSS activé, les liens seront automatiquement positionnés sur la carte, dans le cas contraire il verra une carte avec la liste des villes..
 
Comme ça si un aveugle passe, il aura toutes les info, et sinon ... pareil :D ... Perso j'ai l'impression que tu pourrais bidouiller qqch du genre non?


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Sujets relatifs:

Leave a Replay

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