Menu
Outils
Référencement
Flash
Services
Compteurs
Scripts et tutoriaux
Kits graphiques/ Designs
Activité
Recherche
|
Background scrollable avec overflow:auto; sous firefox (X)html/CSS |
|---|
Background scrollable avec overflow:auto; sous firefox (X)html/CSSNote : 4.5/5 (1 vote) Derniéres modifications : 29/08/2009 à 23:04:08 Mots-Clés : background fixe scroll sous firefox internet explorer avec overflow auto en css bug firefox background-atachment scroll dans ce tutoriel, je vais vous apprendre comment mettre un arrière plan scrollable dans un div avec las propriété overflow:auto; en CSS. Lorsque vous mettez la propriété css overflow auto, l'arrière plan du div deviens automatiquement fixe, certains me diront qu'il suffit d'ajouter la propriété background-attachment avec la valeur scroll, mais ça ne fonctionne que sous Internet Explorer  .Dans ce tutoriel, je vais vous montrer comment faire la même chose mais fonctionnelle dans tout les navigateurs. L'astuce consiste à séparer le parent du contenu, le parent aura l'overflow:auto; tandis que le contenu aura le contenu et l'arrière plan. Voici une image qui explique le problème et la solution:  Nous allons aussi mettre le même arrière plan au parent au cas ou la hauteur du contenu ne soit pas assez longue. Bon voici le code: Code: (X)html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mettre un arrière plan scrollable dans un overflow:auto;</title> <style type="text/css"> .parent_1 { height:120px; overflow:auto; width:200px; background:url('img.png'); color:#ffffff; } .parent_2 { height:120px; overflow:auto; width:200px; background:url('img.png'); } .ctn_2 { background:url('img.png'); color:#ffffff; } </style> </head> <body> Arrière plan fixe dans un overflow:auto;<br /> <div class="parent_1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /><br />Doe je noca mi riber joem, quebefi lolibadi doe, bem mocimebeb, hifelefi, fy.<br /><br /><br /> By ref lahe lebi duvoe resapa si li tyfeh be vemev linepofu beb, doe. </div><br /> Arrière plan scrollant dans un overflow:auto;<br /> <div class="parent_2"> <div class="ctn_2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br /><br />Doe je noca mi riber joem, quebefi lolibadi doe, bem mocimebeb, hifelefi, fy.<br /><br /><br /> By ref lahe lebi duvoe resapa si li tyfeh be vemev linepofu beb, doe. </div> </div> </body> </html> Pour toutes questions ou commentaires, contacter moi par MP, en utilisant le formulaire de contact ou encore vous pouvez poser votre problème dans le forum. Merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile. Scripts et tutoriaux similaires à celui ci:
CommentairesAjouter un commentaireLes commentairesEnvoyé par ZeNoob le 23/01/2010 à 17:31:06
Super tuto, Merci
|
