JumpTop

[CSS] Comment utiliser la position FIXED pour une image

Voila un petit tutoriel très simple qui va vous apprendre en quelques minutes à utiliser la propriété « fixed » en CSS.
A quoi cela peut-il bien servir ?
Vous en avez un exemple sur ce site, les 3 icônes qui sont totalement à droite, twitter, facebook et rss, elles occupent cette position grâce à la propriété « fixed ».

Le code

Voici le code que vous allez devoir mettre dans votre page header.php ou autre, mais qui contient la balise « body ». On voit dans le code que l’on appel la « div class » nommée « image-fixed », c’est le même nom qu’elle va porter dans notre feuille de style (CSS = Cascading Style Sheet). Ensuite on place nos images avec leurs liens respectifs. Le « target » c’est la cible, « blank » c’est pour l’ouvrir dans une nouvelle page.

    <body>
<div class="image-fixed">
    <a href="http://twitter.com/johnsgraphisme" title="John's graphisme on Twitter" target="_blank">
        <img src="http://www.mondomaine.com/images/twitterfixed.png" alt="twitter" />
    </a>
 
    <a href="http://www.facebook.com/pages/Johns-Graphisme/171608036883" title="Devenir Fan" target="_blank">
        <img src="http://www.mondomaine.com/images/facebookfixed.png" alt="facebook" />
    </a>
 
    <a href="http://feeds.feedburner.com/johnsgraphisme" title="Flux RSS" target="_blank">
        <img src="http://www.mondomaine.com/images/rssfixed.png" alt="rss" />
    </a>
</div>
</body>

Le CSS

Une fois que vous avez collé ou créé le code du dessus, il faut attribuer les différentes propriétés à notre « class ».
width : est la longueur de l’élément
position : c’est la position de notre élément.
top : on demande à notre élément d’être en position fixed à 370 px du haut.
right : et à 15 px de la bordure droite de la page.
z-index: ça permet de préciser la position en profondeur, l’empilement des images.

.image-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}

Maintenant que vous avez mis ces propriétés CSS en place, vous pouvez uploader vos deux fichiers que vous venez de modifier ainsi que les 3 images, sur votre serveur, et faire un refresh de votre page. Si vous avez des questions, n’hésitez pas.






L'auteur de l'article
, Directeur Artistique, Webdesigner. Vous pouvez voir mes travaux sur mon folio, ou me suivre sur mon Twitter.



2 commentaires

  1. 1 clemNo Gravatar dit :
    22 décembre 2010 à 16:02

    super ce petit tuto : c’est exactement ce que je cherchais ! merci

  2. 2 John's GraphismeNo Gravatar dit :
    22 décembre 2010 à 17:20

    @clem : superbe, je suis content que ça te plaise ;-)

Un trackback

  1. Johnsgraphisme sur Blogasty