Encadrage bleue autour d'une publicité et soucis de placement

**nO_life** · 21/12/2008, 19h56

Bonjour a tous,
Deux soucis avec ce design le premier je n'arrive pas a enlever l'encadrer bleu autour de la pub offre du moment .
Le deuxième ce trouve au niveau des vignettes jeux gratuit notamment la première.

Explication:

Je ne peux pas placer la première vignette (vignette 1) sans que celle_ci fasse bouger la barre entière alors que pour les trois suivante je peut les manipuler dans tous les sens sans aucun problème.

lien du design concerné : http://promos-mails.com/demoettest/momie/index.html

PS: si un screen est plus confortable je le ferais.

Je remercie d'avance tous ceux qui ce pencheront sur ces deux soucis.

Voici le CSS

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
#interface {
position: absolute; 
width: 1024px;
top: 0px;
}
 
body ,html{
  width:1024px;
  background:#dcccb5;
  margin:center;
  max-width:1024px
  }
 
  /*Fond bleue extenssible*/
 
  #conteneur{margin:330px;margin-top:-200px;}
 
  .fondbleuhaut {
width:586px;
background: url(images/fondbleuhaut.png) no-repeat;
padding-top: 139px; /*la hauteur de l'image*/
}
 
.fondbleucontenu{
width:586px;
background: url(images/fondbleucontenu.png) repeat-y;
margin:16px;
margin-top:auto;
}
 
.fondbleubas{
width:586px;
background: url(images/fondbleubas.png) no-repeat;
height: 93px; /*la hauteur de l'image*/
margin:6px;
margin-top:-20px;
}
 
/* fin fond bleu extenssible */
 
#header{
height:457px;
width:1000px;
background:url(images/header.png) no-repeat top center;
padding:0;
margin:125px;
margin-top:auto;
}
 
 #barredefilement{
height:100px;
width:567px;
background:url(images/barredefilement.png) no-repeat top center;
padding:0;
margin:-10px;
margin-top:-20px;
}
 
.scriptdefilement{
display: block;
height:14px;
width:450px;
font-size: 14px;
text-decoration: none;
text-align:right;
line-height: 10px; 
margin:-75px 80px;
}
 
#offrehaut{
width:547px;
background: url(images/offrehaut.png) no-repeat;
padding-top: 119px; /*la hauteur de l'image*/
margin:70px 10px;
}
 
#offrecorp{
width:534px;
background: url(images/offrecorp.png) repeat-y;
margin:10px;
margin-top:0px;
}
 
#offrebas{
width:537px;
background: url(images/offrebas.png) no-repeat;
height: 46px; /*la hauteur de l'image*/
margin:3px;
margin-top:-10px;
}
 
#offrepub {
  display : block;
  width:508px;
  height:146px;
  margin:5px;
  margin-top:auto;
  }
 
#pub46860{
height:96px;
width:523px;
background:url(images/pub46860.png) no-repeat top center;
padding:0;
margin:10px;
margin-top:-85px;
}
 
#pubcasino {
  height:60px;
  margin:45px;
  margin-top:-91px;
  }
 
  #jeuxgratuithaut{
width:508px;
background: url(images/jeuxgratuithaut.png) no-repeat;
padding-top: 107px; /*la hauteur de l'image*/
margin:20px;
margin-top:-45px;
}
 
#jeuxgratuitcorp{
width:509px;
background: url(images/jeuxgratuitcorp.png) repeat-y;
margin:5px;
margin-top:-20px;
}
 
#jeuxgratuitbas{
width:511px;
background: url(images/jeuxgratuitbas.png) no-repeat;
height: 46px; /*la hauteur de l'image*/
margin:2px;
margin-top:-40px;
}
 
#rangvignette{
height:109px;
width:425px;
background:url(images/rangvignette.png) no-repeat top center;
padding:0;
margin:35px;
margin-top:-5px;
}
 
.vignette1{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:20px 20px;
  }
 
  .vignette2{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:125px;
  margin-top:-50px;
  }
 
  .vignette3{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:227px;
  margin-top:-170px;
  }
 
  .vignette4{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:330px;
  margin-top:-270px;
  }

Voici le HTML

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>momie</title>
<link href="stylemomiecado.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
			rd=10;
			la=screen.availWidth;
			function c1()
			{
			rd+=10;
			if (rd>la-175) // selon longueur texte
			rd=20;
			el=document.getElementById("scriptdefilement");
			el.style.left=rd;
			setTimeout("c1()", 100); // vitesse de défilement
			}
		</script>
</head>
<body onLoad="c1();">
<div>
<div id="interface">
<div id="header"></div>
<div id="conteneur">
  <div class="fondbleuhaut">
 
  <div class="fondbleucontenu">
  <div id="barredefilement"></div>
  <div class="scriptdefilement">
		<marquee scrollAmount="7">votre texte</marquee>
 
</div>
  <div id="offrehaut">
  <div id="offrecorp"><div id="offrepub"><a id="offrepub" href="http://liens.com"><img src="images/offrepub.png" alt="bannieres coin offre du moment" /></a></div>
  </div>
 
  <div id="offrebas"></div>
  </div>
  <div id="pub46860"></div><div id="pubcasino"><a href="http://liens.com"><img src="images/pubcasino.png" alt="bannieres 468*60" /></a></div>
  <div id="jeuxgratuithaut">
  <div id="jeuxgratuitcorp">
  <div id="rangvignette"><a class="vignette1" href="http://lien.com"></a><a class="vignette2" href="http://lien.com"></a><a class="vignette3" href="http://lien.com"></a><a class="vignette4" href="http://lien.com"></a></div></div>
  <div id="jeuxgratuitbas"></div>
    </div>
  </div>
 
  <div class="fondbleubas"></div>
</div>
</div>
</div>
</body>
</html>

**12monkeys** · 21/12/2008, 20h17

Bonsoir

Une première remarque : tu as deux id offrepub :

Code :

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

  <div id="offrecorp"><div id="offrepub"><a id="aoffrepub" href="http://liens.com"><img src="images/offrepub.png" alt="bannieres coin offre du moment" /></a></div>

or un id doit être unique dans ta page.

Mais ceci n'est pas ton problème : pour enlever la bordure autour de l'image mets ceci dans ton fichier css :

Code :

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

1
2
3
a img {
  border:0px none;
  }

cette bordure se trouve sur les images qui font office de lien...

Pour le second problème je n'ai pas compris de quelles "vignettes" tu parlais, tu peut indiquer l'id ou la class concernée ?

**nO_life** · 21/12/2008, 21h04

Merci tout d'abord pour la première solution .

Voici la vignette concernée

Code :

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

<a class="vignette1" href="http://lien.com"></a>

Et voici le code complet dans le quel elle est imbriquée.

Code :

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

1
2
3
4
5
<div id="jeuxgratuithaut">
  <div id="jeuxgratuitcorp">
  <div id="rangvignette"><a class="vignette1" href="http://lien.com"></a><a class="vignette2" href="http://lien.com"></a><a class="vignette3" href="http://lien.com"></a><a class="vignette4" href="http://lien.com"></a></div></div>
  <div id="jeuxgratuitbas"></div>
    </div>

**nO_life** · 25/12/2008, 03h06

Je vous post la partie css que j'avais oublié concernant la vignette ci-dessus car après trois jour je n'arrive toujours pas a me débloquer.

CSS

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#rangvignette{
height:109px;
width:425px;
background:url(images/rangvignette.png) no-repeat top center;
padding:0;
margin:35px;
margin-top:30px;
}
 
.vignette1{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:18px 20px;
  }
 
  .vignette2{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:125px;
  margin-top:-63px;
  }
 
  .vignette3{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:227px;
  margin-top:-170px;
  }
 
  .vignette4{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:330px;
  margin-top:-270px;
  }

**Kerod** · 25/12/2008, 12h45

Rajoute juste ceci dans ton code CSS

Code :

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

img { border : 0; }

**nO_life** · 25/12/2008, 14h06

Le soucis concernant l'encadrage en bleu a été résolu.4
Le deuxième soucis rencontré est:
Je ne peux pas placer la première vignette (vignette 1) de la partie jeux gratuit sans que celle-ci fasse bouger la barre entière alors que pour les trois suivante je peut les manipuler dans tous les sens sans aucun problème.
Dernière opération faite :
Voulue descendre la première vignette de la partie jeux gratuit de 10 px
Résultat:
Elle n'a pas bougé d'un px mais c'est le contenue autour qui ce déplace.

Sous firefox c'est la partie corpjeuxgratuit qui a descendu de 10 px.

Lien vers le design : http://promos-mails.com/demoettest/momie/index.html

Voici la vignette concernée

Code :

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

<a class="vignette1" href="http://lien.com"></a>

Et voici le code complet dans le quel elle est imbriquée.

Code :

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

1
2
3
4
5
<div id="jeuxgratuithaut">
  <div id="jeuxgratuitcorp">
  <div id="rangvignette"><a class="vignette1" href="http://lien.com"></a><a class="vignette2" href="http://lien.com"></a><a class="vignette3" href="http://lien.com"></a><a class="vignette4" href="http://lien.com"></a></div></div>
  <div id="jeuxgratuitbas"></div>
    </div>

La Partie CSS qui concerne ce bout de codes ( le CSS complet est sur le premier post).

Code :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#rangvignette{
height:109px;
width:425px;
background:url(images/rangvignette.png) no-repeat top center;
padding:0;
margin:35px;
margin-top:30px;
}
 
.vignette1{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:18px 20px;
  }
 
  .vignette2{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:125px;
  margin-top:-63px;
  }
 
  .vignette3{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:227px;
  margin-top:-170px;
  }
 
  .vignette4{
  display :block;
  height:44px;
  width:73px;
  background:url(images/vignette.png) no-repeat center;
  padding:0;
  margin:330px;
  margin-top:-270px;
  }

**Kerod** · 25/12/2008, 15h00

J'ai testé ceci :

Code html :

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

1
2
3
4
<ul id="rangvignette"><li style="margin: 16px 0pt 0pt 20px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li>
<li style="margin: 16px 0pt 0pt 31px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li>
<li style="margin: 16px 0pt 0pt 29px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li>
<li style="margin: 16px 0pt 0pt 31px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li></ul>

Tout avec le CSS :

Code :

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

1
2
3
4
5
6
7
#rangvignette a
{
    background:transparent url(images/vignette.png) no-repeat scroll center center;
   display:block;
   height:100%;
   width:100%;
}

Bon peut-être qu'il y a mieux mais à froid c'est ce que j'ai pu faire

Concernant ta bordure, tu dis que c'est résolu mais elle est toujours présente sur la page que tu présentes.

**nO_life** · 25/12/2008, 15h53

Je te remercie pour cette avancement

Sous Firefox rendu presque parfait a part le point du au <li>
Sous Ie une seule image s'affiche et le rang des vignette est pas super.

Le lien a été mis a jour cette fois-ci

URL:http://promos-mails.com/demoettest/momie/index.html

Donc j'ai modifié en sa:

HTML:

Code :

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

1
2
3
4
5
6
<div id="jeuxgratuitcorp">
  <div id="rangvignette"><ul id="vignette1">
<li style="margin: 16px 0pt 0pt -20px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li>
<li style="margin: 16px 0pt 0pt 30px; height: 44px; width: 73px; float: left; "><a href="http://lien.com"/></li>
<li style="margin: 16px 0pt 0pt 29px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li>
<li style="margin: 16px 0pt 0pt 31px; height: 44px; width: 73px; float: left;"><a href="http://lien.com"/></li></ul></div></div>

CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#rangvignette{
height:109px;
width:425px;
background:url(images/rangvignette.png) no-repeat top center;
padding:0;
margin:35px;
margin-top:-17px;
}
 
#vignette1 a {
background:transparent url(images/vignette.png) no-repeat scroll center center;
   display:block;
   height:100%;
   width:100%;
}

**Kerod** · 25/12/2008, 16h04

Je vois pas pourquoi rajouter le ul dans rangvignette alors que tu pourrais remplacer le div par le ul justement (d'où mon code)

Effectivement le ul il faut mettre l'instruction :

Code :

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

list-style :none;

Après pour les a c'est une question de CSS non appliqué

cad que tu n'as pas mis

**Kerod** · 25/12/2008, 16h07

Tu as testé sous IE6 ? Parce que là c'est vraiment pas la même chose avec les PNG et cie. Il faudrait tout revoir

**nO_life** · 25/12/2008, 17h25

Non je ne dispose pas de Ie6

cça doit etre la catastrophe

**nO_life** · 25/12/2008, 18h26

Donc sous Firefox c'est impecable a part une image en trop.
Sous Ie7 c'est pas térrible manque les 3 vignettes et comme sous firefox une vignette en trop.
Désolé d'etre aussi casse bonbon

Kerod je n'ais pas compris cette phrase

Après pour les a c'est une question de CSS non appliqué cad que tu n'as pas mis

Dur dur le CSS

Encadrage bleue autour d'une publicité et soucis de placement

Positionnement en CSS

Discussions similaires

Partager

Partager