Carré de new qui bouge en fonction du scroll How to ?

le Mar Aoû 26, 2008 14:20

Bonjour je cherche a faire un carré de news qui reste à la même position dans la fenêtre même si la page est scrollée,

une illustration :

le Mar Aoû 26, 2008 14:51

En théorie, il faudrait fixer une balise div en position: fixed; en CSS. Facile à dire mais ça ne fonctionne pas sur les versions d'IE inférieures à la 7.

Heureusement il existe un hack toujours en CSS (à placer entre <head> et </head>) :

Code: Tout sélectionner:

J'édite car j'avais oublié de mettre cette partie du code (à ajouter dans un fichier javascript) :

Code: Tout sélectionner: function IEFixedElementTop(){ if(document.documentElement.clientHeight) MyHeight=document.documentElement.clientHeight; else MyHeight=document.body.clientHeight; return(document.documentElement.scrollTop+document.body.scrollTop+(MyHeight * 50/100)); } function IEFixedElementLeft(){ if(document.documentElement.clientWidth) MyWidth=document.documentElement.clientWidth; else MyWidth=document.body.clientWidth; return(document.documentElement.scrollLeft+document.body.scrollLeft+(MyWidth * 50/100)); }

Donc pour résumer, position:fixed dans ton CSS + le hack que je viens de te donner et le tour est joué

PS : attention tout de même à bien renseigner :

Code: Tout sélectionner: left:xx%; top:xx%; margin-left:-xxpx; (la moitié de la taille de la largeur de ton block) margin-top:-xxpx; (la moitié de la taille de la hauteur de ton block) width:xxpx; height:xxpx; z-index:xxx;

le Mar Aoû 26, 2008 15:04

Malheureusement je n'arrive pas a fixer cette div, elle est apparemment incompatible avec mes autre Divs

Voila le css avec la div qui devrait être comme sur le croqui id actu:

Code: Tout sélectionner: #content-Top { background: url(../images/fond/content-Top2.gif) center top no-repeat; width: 100%; padding: 0 0 10px 0; min-height: 610px } #content-Mid { background: url(../images/fond/content-Mid2.gif) 32px bottom repeat-y; width: 100% } #content-Foot { background: url(../images/fond/content-Foot4.gif) center bottom no-repeat; width: 100% } #main { position: relative; width: 955px; text-align: left; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 0; background-image: url(../images/logohaut.jpg); background-repeat: no-repeat; top: 16px; z-index: auto; right: auto; font-family: Georgia, "Times New Roman", Times, serif; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #body { width: 940px } #content { width: 936px; clear: both } #actu { position : fixed; padding-top: 100px; padding-right: 100px; width: 150px; height: 150px; }

le Mar Aoû 26, 2008 15:06

et si tu met un z-index:100 sur #actu ?
Dans quel navigateur bosse tu ?

le Mar Aoû 26, 2008 15:08

J'ai tout les principaux navigateurs,

Sinon les pages html sont faites comme ceci :

<div id="content-Mid">

<div id="content-Foot">
<div id="content-Top">

<div id="main">

et fermeture des divs

ou dois je placer ma div actu ? Avec le z-index pas de différences

le Mar Aoû 26, 2008 15:13

Ton block actu, tu peux la placer en toute fin de code si tu veux... (juste avant </body> )

Aurais-tu une URL à donner que je vois où tu en es ?

le Mar Aoû 26, 2008 15:19

Voila j'ai mis en ligne le fichier Html + le css.

J'ai retiré tout le contenu de la page il n'y a que la structure, donc je vous invite a télécharger ces fichiers pour faire des tests.

Page html : http://mapage.noos.fr/socket7/index.html

Css : http://mapage.noos.fr/socket7/screentt.css

Merci d'avance

cordialement

le Mar Aoû 26, 2008 15:26

hum, peux-tu mettre des bords à tes blocks et un peu de contenu qu'on voit bien ce qui se passe ?

le Mar Aoû 26, 2008 18:04

Après l'aide de BLMAN on a bien avancé tout marche niquel sous FF2 - 3 et IE7 mais pas sur IE6 La div Actu se place mal..

Vous pouvez consultez le résultat ici :

http://mapage.noos.fr/socket7/

Merci d'avance

le Mer Aoû 27, 2008 19:07

Pas mal du tout tout ça, merci pour ces explications en tout cas!

le Sam Aoû 30, 2008 12:41

en fait, il faut penser à fixer la div container, avec un relative ça suffit. Sinon la div enfant ne pourra être fixée

le Sam Sep 06, 2008 12:44

Il y a aussi cette solution en javascript (voir code) mais qui visuellement est bien moins propre (effet de sacades) qu'avec la solution proposée par blman

Code: Tout sélectionner: <!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" xml:lang="en" lang="en"> <head> <title>JQuery: Collapsible Menu</title>  <script language="JavaScript" type="text/javascript">    </script> </head> <body onLoad="placeIt(); showIt()"> <div id="layer1" style="position:absolute; left:20; width:410px; height:10; visibility:hidden"> <font face="verdana, arial, helvetica, sans-serif" size="2"> <div style="float:left; background-color:yellow; padding:3px; border:1px solid black"> <span style="float:right; background-color:gray; color:white; font-weight:bold; width='20px'; text-align:center; cursor:pointer" onclick="javascript:hideIt()"> X </span> You can put in whatever text you want inside this little layer! This layer will always hover at this same spot even if you were to scroll down the page. You can close the layer by clicking the <b>X</b> on the top right of this layer. Also you can adjust where this layer will hover by modifying the script.</div> </font> </font> </div> <center> <form> <input type="button" value="Open pop-up" onClick="showIt()"> </form> aaaaaaaaa <br /> aaaaaaaaa <br /> ..... aaaaaaaaa <br /> </center> </body> </html>

Carré de new qui bouge en fonction du scroll How to ?

Carré de new qui bouge en fonction du scroll How to ?

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne