5568 sujets

Sémantique web et HTML

Inserer un bloc sur ma maquette xhtml

Bonjour à tous,

J'aimerai insérer deux bloc sur mon site. Je voudrais savoir quelle est la meilleur façon de faire et savoir si il y a une astuce ou pas ....

Voici la structure que je possède sur ma page html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body
{
	background-color: #efefef;
	margin:0;
}
#global
{
	margin-top:0px;
	margin-left: auto;
    margin-right: auto;
	width:900px;
}
#header
{
	width:900px;
	height:150px;
	background-color:#FFFFFF;
}
#center
{
	width:900px;
	height:550px;
}
#c1
{
	float:left;
	width:125px;
	height:550px;
	background-color:#999999;
}
#content
{
	float:left;
	width:650px;
	height:550px;
}
#c2
{
	float:left;
	width:125px;
	height:550px;
	background-color:#999999;
}
#footer
{
	width:900px;
	height:30px;
	background-color:#FFFFFF;
}

-->
</style></head>

<body>
<div id="global">
<div id="header"></div>
<div id="center">
	<div id="c1"></div>
    <div id="content"></div>
    <div id="c2"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>


Ou je veux en venir, c'est ajouter deux bloc de pub a l'extérieur du site, donc en dehors du bloc global ..., et lorsque je scrool vers le bas c'est pub devront suivre, si c'est faisable ou pas bien sur, je laisse une capture d'image de la théorie de ce que j'aimerai arrivé en final ...

http://data.imagup.com/6/1108027591.jpg

Merci d'avance pour votre aide
bon dimanche

IVIedia
Modifié par IVIedia (26 Dec 2010 - 10:26)
Bonjour,

Rajoute tes deux blocs de pub dans body (pour pouvoir bénéficier de position:fixed;)

<body> 
[...]
<div id="pub-left" class="pub">
</div>
<div id="pub-right" class="pub">
</div> 
</body>

Ton site étant centré, place tes pubs en left:50% ou right:50%.
Ensuite retire (ou ajoute c'est selon) à la marge équivalente (left ou right) la moitié de la largeur du site et la largeur de la pub.
Utilise "top:XXpx" pour placer en hauteur tes pubs.
Ce qui donne :

.pub {
	position:fixed;
	background-color:#FF0000;
}
#pub-left {
	width:120px;
	height:240px;
	top:300px;
	left:50%;
	margin-left:-570px; // -((lageurPage/2)+largeurPub)px;
}
#pub-right {
	width:120px;
	height:600px;
	top:150px;
	right:50%;
	margin-right:-570px; // -((lageurPage/2)+largeurPub)px;
}

Le tout basé sur ton code initiale donne :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Document sans nom</title> 
<style type="text/css"> 
<!-- 
body 
{ 
    background-color: #efefef; 
    margin:0; 
} 
#global 
{
    margin-top:0px; 
    margin-left: auto; 
    margin-right: auto; 
    width:900px; 
} 
#header 
{ 
    width:900px; 
    height:150px; 
    background-color:#FFFFFF; 
} 
#center 
{ 
    width:900px; 
    height:1050px; 
} 
#c1 
{ 
    float:left; 
    width:125px; 
    height:1050px; 
    background-color:#999999; 
} 
#content 
{ 
    float:left; 
    width:650px; 
    height:1050px; 
} 
#c2 
{ 
    float:left; 
    width:125px; 
    height:1050px; 
    background-color:#999999; 
} 
#footer 
{ 
    width:900px; 
    height:30px; 
    background-color:#FFFFFF; 
} 
.pub {
	position:fixed;
	background-color:#FF0000;
}
#pub-left {
	width:120px;
	height:240px;
	top:300px;
	left:50%;
	margin-left:-570px; // -((lageur-page/2)+largeur-pub)px;
}
#pub-right {
	width:120px;
	height:600px;
	top:150px;
	right:50%;
	margin-right:-570px; // -((lageur-page/2)+largeur-pub)px;
}
--> 
</style></head> 
 
<body> 
<div id="global"> 
<div id="header"></div> 
<div id="center"> 
    <div id="c1"></div> 
    <div id="content"></div> 
    <div id="c2"></div> 
</div> 
<div id="footer"></div>
</div> 
<div id="pub-left" class="pub">
</div>
<div id="pub-right" class="pub">
</div> 
</body> 
</html>


Note qu'avec cette solution quelqu'un possédant un écran trop petit ne verra pas les pubs.

En espérant avoir répondu à ta question Smiley cligne

ps : position:fixed ne fonctionne pas sous IE6, tu peux éventuellement le remplacer par position:absolute juste pour ce "navigateur". Dans ce cas tes pubs ne suivront pas lors de scroll...
Modifié par Ciseur (27 Dec 2010 - 16:52)
Merci Ciseur, c'est super sympa j'arrive a avoir le résultat voulu.

Vous voyais il y a les blocs de pub, je vais leurs appliquée un margin-top:5px;
mais quand je vais scroller ma page vers le bas, j'aimerai bien que les pubs suis et qu'il reste pas fixé ?

c'est possible ....
Merci
Il faudra utiliser javascript pour faire scroller tes pubs... j'ai pas de code sous la main à te proposer mais une petite recherche sur l'ami google fera aisément l'affaire Smiley smile
position:fixed ne fait pas ce que tu souhaites ?
Avec ça par exemple :

.pub {
position:fixed;
top:5px;
}
/*pense à enlever les "top:" dans #pub-left et #pub-right*/


Si ce n'est pas ce que tu veux pourrais tu reformuler ?
Merci Ciseur,

la comme on est, nous sommes bien parti ... Smiley smile
Ici les divs sont fixé " fixed " ...

Si je scrool ma page vers le bas, le centre bouge mais mes divs pubs sont bloqué,
ce que j'aimerai c'est au moment ou je scrool vers le bas, j'aimerai que les divs pubs suis et descend vers le bas , en quelque sorte elles doivent floter et se repositionné a top:5px;

merci
Pour positionner un élément par rapport à la fenêtre (ici 5px par rapport au haut de la fenêtre), la propriété position:fixed est la meilleur solution.

Par contre, elle ne fonctionne pas sous IE6.

Le code que j'ai fourni plus haut fonctionne donc comme tu le souhaites sur tous les navigateurs récents (il me semble).

Si tu souhaites le faire fonctionner également sous IE6, il existe des hacks.

Celui ci par exemple :


.pub {
/* Pour IE6 */
position: absolute;
top: expression(documentElement.scrollTop+body.scrollTop + 5 + "px");
}
/* Pour les autres */ 
html>body .pub { position: fixed; top: 5px;}


Ce hack permet d'émuler position:fixed sur IE6 grâce à documentElement.scrollTop et body.scrollTop.

Tu peux lire cet article pour en savoir plus ou voir plus d'alternative : http://www.amaryllidaceae.org/web-jardin/CSS/IE-fixed.htm

ps : enfin toute cette réponse est vrai si tu testais ton site sous IE6 ^^ Sinon dis moi sur quel navigateur ma solution ne fonctionnait pas.
Modifié par Ciseur (28 Dec 2010 - 15:59)
Bonsoir,

ici vous trouverai notre page que nous avons réaliser
le lien => Page index

Vous verrez qu'a droite il y a notre bloc fixé
et a gauche notre bloc qui bouge si je scrool ...
j'aimerai arriver a ce résultat sans javascript si c'est possible
ou si y a une méthode avec javascript la plus propre possible

j'ai repris et vous montre la source d'origine

Fichier original

Merci et bonne soirée
IVIedia
Je comprends mieux maintenant. Vous voulez un effet d'animation lors du scroll.

Dans ce cas, vous êtes obligé d'utiliser Javascript.

La solution que vous avez trouvez semble correct.
Ok Smiley smile , je vais combiné votre solution et le javascript, et voir si y a moyen d'avoir un résultat satisfaisant ...

Merci, bonne journée

IVIedia
Re bonjour, je continue a travailler sur ce lien : Div Pub
et petit à petit on commence a voir des résultats assez bon ...

Ou je coince c'est au niveau du javascript, dans les sources il y a une zone, ou j'indique quelle div il doit prendre en compte, par exemple ici j'ai mis pub-right , mais j'aimerai que ce javascript prends effet sur les divs suivant pub-right et pub-left

voici le code 

function DIV_InitScroll(){
  //-- Recup position Objet
  O_DivScroll  = new DIV_Scroll('pub-right');
  //-- Lance inspection si existe
  if( O_DivScroll.Obj)
    IdTimer_2 = setInterval('DIV_CheckScroll()',100);
}


Lien du JS

Merci
Pourquoi ne pas exécuter 2 fois ce code ? Une fois avec 'pub-right' et l'autre avec 'pub-left' ?
ainsi 

//-----------------------
function DIV_InitScroll(){
  //-- Recup position Objet
  O_DivScroll  = new DIV_Scroll('pub-left','pub-right');
  //-- Lance inspection si existe
  if( O_DivScroll.Obj)
    IdTimer_2 = setInterval('DIV_CheckScroll()',100);
}


ou 

//-----------------------
function DIV_InitScroll(){
  //-- Recup position Objet
  O_DivScroll  = new DIV_Scroll('pub-left');
  //-- Lance inspection si existe
  if( O_DivScroll.Obj)
    IdTimer_2 = setInterval('DIV_CheckScroll()',100);
}
function DIV_InitScroll(){
  //-- Recup position Objet
  O_DivScroll  = new DIV_Scroll('pub-right');
  //-- Lance inspection si existe
  if( O_DivScroll.Obj)
    IdTimer_2 = setInterval('DIV_CheckScroll()',100);
}


deja essayé mais ca va pas Smiley decu

Merci
//----------------------- 
function DIV_InitScroll(){ 
  //-- Recup position Objet gauche
  O_DivScrollLeft  = new DIV_Scroll('pub-left'); 
  //-- Recup position Objet droit
  O_DivScrollRight  = new DIV_Scroll('pub-right'); 
  //-- Lance inspection si existe 
  if( O_DivScrollLeft.Obj && O_DivScrollRight.Obj) 
    IdTimer_2 = setInterval('DIV_CheckScroll()',100); 
}

Ceci ?
Ciseur a écrit :
//----------------------- 
function DIV_InitScroll(){ 
  //-- Recup position Objet gauche
  O_DivScrollLeft  = new DIV_Scroll('pub-left'); 
  //-- Recup position Objet droit
  O_DivScrollRight  = new DIV_Scroll('pub-right'); 
  //-- Lance inspection si existe 
  if( O_DivScrollLeft.Obj &amp;&amp; O_DivScrollRight.Obj) 
    IdTimer_2 = setInterval('DIV_CheckScroll()',100); 
}

Ceci ?



J'ai essayai mais ça ne fonctionne pas, voici le code javascript au complet ...
bonne soirée

//---------------------------------------------------------
//  Nom Document : gf_scroll_div.js
//  Auteur       : G.Ferraz
//  Objet        : menu flottant
//  Creation     : 01.01.2007
//---------------------------------------------------------
//  Mise à Jour  : 01.11.2007
//---------------------------------------------------------
// OUTILS /////////////////////////////
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
//----------------------
function GetScrollPage(){
  var Left;
  var Top;
  var DocRef;

  if( window.innerWidth){
    with( window){
      Left   = pageXOffset;
      Top    = pageYOffset;
    }
  }
  else{ // Cas Explorer a part
    if( document.documentElement && document.documentElement.clientWidth)
      DocRef = document.documentElement;
    else
      DocRef = document.body;

    with( DocRef){
      Left   = scrollLeft;
      Top    = scrollTop;
    }
  }
  return({top:Top, left:Left});
}
//---------------------------
function ObjGetPosition(obj_){
  var PosX = 0;
  var PosY = 0;
  //-- suivant type en parametre
  if( typeof(obj_)=='object')
    var Obj  = obj_;
  else
    var Obj  = document.getElementById( obj_);
  //-- Si l'objet existe
  if( Obj){
    //-- Recup. Position Objet
    PosX = Obj.offsetLeft;
    PosY = Obj.offsetTop;
    //-- Si propriete existe
    if( Obj.offsetParent){
      //-- Tant qu'un parent existe
      while( Obj = Obj.offsetParent){
        if( Obj.offsetParent){ // on ne prend pas le BODY
          //-- Ajout position Parent
          PosX += Obj.offsetLeft;
          PosY += Obj.offsetTop;
        }
      }
    }
  }
  //-- Retour des positions
  return({left [langue]osX, top [langue]osY});
}
//-------------------------------------
// MENU FLOTTANT //////////////////////
//-------------------------------------
var IdTimer_1;
var IdTimer_2;
var O_DivScroll;
var Rapport = 1.0/20.0;  // On divise par 20
var Mini = 2* Rapport;
//-----------------------
function DIV_Scroll( id_){
  var Obj = document.getElementById( id_);
  this.Obj = Obj;
  if( Obj){
    Obj.style.position = "absolute"; // IMPERATIF
    //-- Recup position de depart
    var Pos   = ObjGetPosition( id_);
    this.PosX = Pos.left;
    this.PosY = Pos.top;
    this.DebX = this.PosX;
    this.DebY = this.PosY;
    this.NewX = 0;
    this.NewY = 0;
    this.Move = DIV_Deplace;
  }
}
//---------------------------
function DIV_Deplace( x_, y_){
  if( arguments[0] != null){
    this.PosX = x_;
//    this.Obj.style.left = parseInt(x_) +"px";//
  }
  if( arguments[1] != null){
    this.PosY = y_;
    this.Obj.style.top  = parseInt(y_) +"px";
  }
}
//---------------------------
function DIV_Replace( x_, y_){
  //-- Calcul Delta deplacement
  var Delta_X = (x_ -O_DivScroll.PosX) *Rapport;
  var Delta_Y = (y_ -O_DivScroll.PosY) *Rapport;
  //-- Test si fin deplacement
  if((( Delta_Y < Mini)&&( Delta_Y > -Mini))&&
     (( Delta_X < Mini)&&( Delta_X > -Mini))){
    clearInterval( IdTimer_1);
    O_DivScroll.Move( x_, y_);
  }
  else{
    O_DivScroll.Move( O_DivScroll.PosX +Delta_X, O_DivScroll.PosY +Delta_Y);
  }
}
//------------------------
function DIV_CheckScroll(){
  var Scroll  = GetScrollPage();
  //-- New position  du menu
  O_DivScroll.NewX = Scroll.left +O_DivScroll.DebX;
  O_DivScroll.NewY = Scroll.top  +O_DivScroll.DebY;
  //-- Si pas la bonne Position
  if(( O_DivScroll.PosY != O_DivScroll.NewY)||( O_DivScroll.PosX != O_DivScroll.NewX)){
    //-- Clear l'encours
    clearInterval( IdTimer_1);
    IdTimer_1 = setInterval("DIV_Replace(" + O_DivScroll.NewX +"," + O_DivScroll.NewY +")", 10);
  }
  return( true);
}
//-----------------------
function DIV_InitScroll(){
  //-- Recup position Objet
  O_DivScroll  = new DIV_Scroll('pub-left');
  //-- Lance inspection si existe
  if( O_DivScroll.Obj)
    IdTimer_2 = setInterval('DIV_CheckScroll()',100);
}
//========================================
Add_Event( window, 'load', DIV_InitScroll);
//-- EOF --
Sujet clos
Aller à