Adaptation du CSS Star Rating de Rogie King pour la coupler avec un peu de javascript à un menu déroulant et pour afficher plusieurs lignes de notes sur une même page.
Voir la CSS / Voir le JS / Voir le code HTML
Notes :
- l'image utilisée pour le fond n'est pas "libre" et donc pas réutilisable telle quelle.
- si le javascript est désactivé, seuls les menus déroulants s'affichent.
- il y a probablement moyen de faire plus simple.
Sous Firefox, les <textaeara> n'ont pas défaut aucune scrollbar, elle ne s'ajoute que si le texte descend sous la zone.
Sous Internet Explorer, il faut rajouter overflow:auto en css, pour obtenir le même comportement.
Sous Opera en revanche, cela ne semble pas pris en compte.
<style>
#textarea1 { width:500px; height:35px; }
#textarea2 { width:500px; height:35px; overflow:auto; }
</style>
<textarea name="textarea1" id="textarea1">
<textarea name="textarea2" id="textarea2">
Résultat :
Moyen simple pour se souvenir de l'ordre des déclarations a:link, a:visited, a:hover, a:active en css : LoVe HAte.
a:link
a:visited
a:hover
a:active
Puisque apparemment vertical-align n'est pas fait pour ça, on peut utiliser line-height pour centrer verticalement du texte dans une div qui a une hauteur fixe.
<style>
.textaligne {
width:300px;
height:50px;
font-size:12px;
line-height:50px;
border:1px solid #000; }
</style>
<div class="textaligne">Le texte</div>
Exemple :
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
<a href="javascript:visibilite('divid');">afficher/masquer</a>
<div id="divid" style="display:none;">contenu</div>
