Archive January, 2007

Aucune marge ni espacement par défaut

Une pas mauvaise idée, trouvée sur leftjustified.net : déclarer les margin et les padding à zéro pour tous les élements de la page puis les restyler par la suite, afin d'éviter les différentes valeurs "par défaut" des navigateurs et d'obtenir (normalement :) ) le même résultat partout.
A manier avec précaution car s'applique vraiment à tous les élements.

* { padding:0; margin:0; }
body { ... restyler ici les margin/padding ... }
h1, h2, h3, h4, h5, h6 { ... restyler ici les margin/padding ... }
...

Preload d’images en CSS

<style>
#Preload { display:none; }
</style>
<div id="Preload">
<img src="image1.jpg">
<img src="image2.jpg">
...
</div>

[source]

Système de note par image et menu déroulant

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

Mauvais
Excellent
Note 1
Note 2
Note 3

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.

Textarea sans scrollbar par défaut

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 :