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

Niurath · 26 Août 2008

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 :

blman · 26 Août 2008

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:

<!--[if lt IE 7]>
<style>
div#liddelabalisedivdublockactu{
	position: absolute;
	top:expression(IEFixedElementTop());
	left:expression(IEFixedElementLeft());
}
</style>
<![endif]-->

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

Code:

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:

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;

Niurath · 26 Août 2008

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:

#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;
 }

blman · 26 Août 2008

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

Niurath · 26 Août 2008

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

blman · 26 Août 2008

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 ?

Niurath · 26 Août 2008

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

blman · 26 Août 2008

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

Niurath · 26 Août 2008

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

El-Cherubin · 27 Août 2008

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

Leonick · 30 Août 2008

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

oli004 · 6 Septembre 2008

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:

<!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>
<!-- ALWAYS ON TOP FLOATING LAYER POP-UP -->
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2003, Sandeep Gangadharan -->
<!-- For more free scripts go to http://sivamdesign.com/scripts/ -->
<!--
var y1 = 20;   // change the # on the left to adjuct the Y co-ordinate
(document.getElementById) ? dom = true : dom = false;

function hideIt() {
  if (dom) {document.getElementById("layer1").style.visibility='hidden';}
}

function showIt() {
  if (dom) {document.getElementById("layer1").style.visibility='visible';}
}

function placeIt() {
  if (dom && !document.all) {document.getElementById("layer1").style.top = window.pageYOffset + (window.innerHeight - (window.innerHeight-y1)) + "px";}
  if (document.all) {document.all["layer1"].style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - (document.documentElement.clientHeight-y1)) + "px";}
  window.setTimeout("placeIt()", 10); }
// -->
</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()">&nbsp;X&nbsp;</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>