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.
Dernières vidéos 
Vidéo postée dans Photoshop
Derniers BlogArticles
A ne pas manquer !
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres
Anniversaire du jour