Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci dégrouper les calques : Ctrl Shift G




Les tutoriaux: Index » Site Web » CSS » position:fixed

Introduction

  • Tutoriel posté par Sky
  • 4256 lectures
  • Mis en ligne le 21-08-2008
  • Dernière mise à jour le
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir dans ce tuto l'utilisation de position:fixed; Tuto pouvant apporter une touche graphique agréable.

ATTENTION: Fonctionne uniquement sur Firefox , IE7 et Safari (autre ?).
Exemple disponible à cette adresse !.

Méthodologie
ATTENTION: Fonctionne uniquement sur Firefox , IE7 et Safari (autre ?).
Exemple disponible à cette adresse !. Voici le code CSS proprement dit :
CODE CSS


#fix {
position:fixed;
left:10px;
top: 10px;
margin:0px;
}

Nous définissons ici un positionnement FIXED, à 10px à gauche et 10px de la marge haute. Si nous voulons mettre notre élément en bas nous aurions mis ceci à la place : bottom: 10px; Maintenant que la partie CSS est prête regardons ensemble la partie HTML.
CODE HTML


<div id="fix"><img src="lien..." alt="" /></div>

Et voila vous aurez ensuite un élément fixe comme vous pouvez voir sur ce site en haut à gauche. Lorsque vous descendez la fenêtre l'image ne bouge pas. On peux maintenant imaginer un style graphique comme sur Hebus.com ou vous aurez une barre noire en png avec une transparence alpha de 50% par exemple. Voici un exemple concret :
CODE CSS


body{
height: 3000px;
margin: 0;
padding: 0;
background-image: url("images/bgsite.png");
background-color: #7e7e7e;
color: #555;
font-size: 13px;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

#fix {
position:fixed;
width: 100%;
height: 64px;
left: 0px;
top: 0px;
margin:0px;
text-align: left;
vertical-align: middle;
z-index: 1500;
}

.bandeau {
margin: 0;
padding: 0;
height: 64px;
background-image: url("images/bg.png");
background-repeat: repeat-x;
}

CODE HTML


<html>
<head>
<link rel="stylesheet" type="text/css" href="general.css" />
</head>
<body>
<div id="fix"><div class="bandeau"><img style="padding-top: 2px;" src="images/com.png" alt="" /></div></div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div align="center"><img src="images/com.png" alt="" /></div>
</body>
</html>

Cet exemple est disponible à cette adresse !. Scroller la page et vous comprendrez :) ATTENTION: Fonctionne uniquement sur Firefox et IE7.
Notes

  Evaluez le tutorial (9 Votes)

7
1
1

ATTENTION: Fonctionne uniquement sur Firefox , IE7 et Safari (autre ?).

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Site Web] position:fixed

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com