Normalement, quand on met un lien à l’intérieur d’un div, seul le lien est cliquable. Cependant, on peut faire en sorte que tout le div hérite du lien et devienne entièrement cliquable, en ajoutant un style à la balise <a href

En voici le code:

<div style="width:200px;background-color:yellow;text-align:center;height:200px;">
<a href="https://aide-memoire.blog-machine.info/" style="display:block;width:100%;height:100%;">Aide-Mémoire</a>
</div>

Ecrire un texte penché dans une page web, c’est possible! Grâce à au CSS3! Ca ne marche donc pas sur les navigateurs les plus anciens, mais il en reste vraiment très peu! Et au pire, votre texte sera écrit, mais pas penché…

Bref, pour penché un texte, voici le CSS:

transform: rotate(8deg);
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
-khtml-transform: rotate(8deg);
-ms-transform: rotate(8deg);

Cela aura pour effet d’effectuer une rotation de 8 degrés ver sla droite, c’ets à dire dans le sens des aiguilles d’une montre.

Pour avoir une rotation dans l’autre sens, il suffit de mettre des chiffres négatifs:

transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-khtml-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);

Voila un effet que j’aime particulièrement en CSS: les coins arrondis sur un div. Le problème, c’est que chaque navigateur à sa propre syntaxe pour ça!

Voici donc le code css pour avoir des coins arrondis sur un div, et pour tous les navigateurs (Google Chrome, Firefox, Internet Explorer…):

border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;

Le 7px est pour l’exemple. plus le chiffre sera gros, plus les coins seront arrondis.

Ca ne marchera que si votre div a une couleur de fond et des bordures qui ne sont pas blanches (forcement!).

Exemple avec des bordures noires et un fond blanc:

background-color: #FFFFFF;
border: 1px solid #000000;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-o-border-radius: 7px;
-ms-border-radius: 7px;

L’exemple est également pour les 4 coins arrondis de la même façon. Vous pouvez par exemple n’arrondir que les coins du bas:

border-radius: 0 0 7px 7px;
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
-o-border-radius: 0 0 7px 7px;
-ms-border-radius: 0 0 7px 7px;

En CSS, l’ordre des valeur est toujours le suivant: haut – droite – bas – gauche (comme une montre). En l’occurrence, puisqu’il s’agit de coins, l’ordre est: supérieur gauche, supérieur droite, inférieur droite, inférieur gauche.