Discussion :

[Vinalys]

Bonjour à tous,

Je cherche actuellement à promouvoir l'offre d'un partenaire sur mon site à l'aide d'un habillage. J'ai ajouté en background via ma css une image et j'aimerai en rendre une partie cliquable.

J'ai donc ajouté une div dans ma div principale avec comme code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="position:absolute;top:-100px;left:120px;height:1800px;width:320px;cursor:pointer" onclick="window.open('http://www.site.fr')"></div>

Ca marche très bien mais le problème c'est que si je change la résolution de l'écran, bien évidemment ça décale la zone cliquable. Comment puis je faire ?

Voici le site qui me sert de plateforme de test : www.incendies.fr

En vous remerciant d'avance

[Invité]

Bonjour,
actuellement, la div est positionnée par rapport au bord haut/gauche du body.
Mets-la dans le div "main", avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#main{ 
position:relative; 
/* ... */
}

[Vinalys]

Désolé je suis vraiment une bille en css. Quand tu dis mets le dans le div "main" c'est l'équivalent de la div "wrapper" sur mon site ?

[Invité]

Si j'avais voulu dire "wrapper", j'aurais écrit "wrapper".
Le principe : "accrocher" le div à un div "positionné".

Mais bon. Voici une meilleure (et plus simple) solution :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="wrapper">
<div id="wrapper2">
 
	<div id="sidepubleft" onclick="window.open('http://www.sfr.fr')"></div>
 
	<div id="slideshow" class="clearfix">
	<!-- ............. -->
	</div>
 
	<div id="sidepubright" onclick="window.open('http://www.sfr.fr')"></div>
 
</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#wrapper2 {
	position:relative;
	width:1240px; /* largeur du div, englobant la pub = largeur page (1000px ?) + 2x120px => A ADAPTER */
	margin:0 auto; /* centrage */
}
#sidepubleft {
	position:absolute;
	width:120px; /* largeur pub */
	top:0;
	left:0; /* à gauche */
	height:1000px;
	cursor:pointer;
}
#sidepubright {
	position:absolute;
	width:120px; /* largeur pub */
	top:0;
	right:0; /* à droite */
	height:1000px;
	cursor:pointer;
}

[Vinalys]

Alors là je te dis un ENORME merci ! Ça marche niquel. Merci beaucoup pour ton aide

[Vinalys]

Puis je abuser de ta gentillesse deux minutes ?

Sur certains navigateurs j'ai un problème de décalage de mon slider, je ne sais pas vraiment pourquoi.

Sais tu comment je peux le centrer comme le corps du site juste en dessous ?

Merci d'avance

[Invité]

Bonjour,
je problème survient quand la largeur de la fenêtre est inférieure à 1440px :
Le slider "ne suit plus" le reste du site (qui lui, reste centré sur la fenêtre).
Solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#wrapper2 {
    position: relative;
    width: 1440px;
    left: 50%;
    margin-left:-720px; /* (1440/2)=720 */
}

[Vinalys]

Bon je dois dire que tu gères un max et je te remercie infiniment pour la qualité, la rapidité et la pertinence des tes réponses.

Un grand merci pour ton aide