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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Partage CSS/HTML] Petite barre de notation 'quivabien'

mphilamp

ForwWweever!

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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<style type="text/css">
<!--
#test {
width: 500px;
background-color: #663399;
height: 100px;
}
#mk5, #mk4, #mk3, #mk2, #mk1 {
position:absolute;
height: 18px;
font-size: 1px;
top: 0px;
left: 0px;
}
#mk {
position:relative;
width: 90px;
height: 18px;
font-size: 1px;
margin: 50px;
}
#mk5 {
width: 90px;
}
#mk4 {
width: 72px;
}
#mk3 {
width: 54px;
}
#mk2 {
width: 36px;
}
#mk1 {
width: 18px;
}
a{
display:block;
font-size: 1px;
height: 18px;
border: 0px;
margin: 0px;
padding: 0px;
}
.mkp a:hover{
background: url(graph_linké.png);
}
#mk {
background: url(graph_vide.png);
}
-->
</style>
</head>
<body>
<p>Test graph note roneos </p>
<p>  </p>
<div id="test">
<div id="mk">
<div class="mkp" id="mk5"><a href="#5"></a>
<div class="mkp" id="mk4"><a href="#4"></a>
<div class="mkp" id="mk3"><a href="#3"></a>
<div class="mkp" id="mk2"><a href="#2"></a>
<div class="mkp" id="mk1"><a href="#1"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

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

Publicité

masklinn

í dag viðrar vel til loftárása

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

mphilamp

ForwWweever!

masklinn 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 ...

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

mphilamp

ForwWweever!

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="" )

masklinn

í dag viðrar vel til loftárása

mphilamp 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

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

mphilamp

ForwWweever!

masklinn a écrit :

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

:heink:

masklinn

í dag viðrar vel til loftárása

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

mphilamp

ForwWweever!

...

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

mphilamp

ForwWweever!

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

masklinn

í dag viðrar vel til loftárása

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

Publicité

pmusa

▓▓▓▓▓▓▓

eh les gars vous avez voté combien?

==>

masklinn

í dag viðrar vel til loftárása

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

mphilamp

ForwWweever!

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]

masklinn

í dag viðrar vel til loftárása

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

mphilamp

ForwWweever!

mais je vais prendre la chose d'une autre maniere... (rien que pour avoir un tout pti peu raison )

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

esox_ch

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 ... 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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[CSS/HTML ?] Barre de défilement horizontale gênante	CSS et Javascript dans un include
Code html pour créer un scroll	[RESOLU]Fonction mail () problème d'envoi en HTML mais nickel en texte
[CSS] balises a dans balise il	Editeur HTML en mode texte free ça existe?
[Html/Php/Mysql] comment recuperer des données selon condition	html et jtextpane
Plus de sujets relatifs à : [Partage CSS/HTML] Petite barre de notation 'quivabien'

Page générée en 0.097 secondes