[CSS 2.1] Positionnement incorrect d'un slideshow

[beegees]

Bonjour,

Sur ce site :

http://164.15.112.38/beegees_v3/realisations.php

J'aimerais positionner mon slideshow afin qu'il apparaisse en-dessous du header et au dessus du footer.

Voici le code CSS :

Code :

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
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/
 
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
body {
	line-height:1;
	color:black;
	background:white;
}
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
}
blockquote, q {
	quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}
 
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
	font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	color:#2d3536;
	background:#e8e0c0 url(images/background.png) repeat;
    text-shadow:0 1px 0 #fff;
}
 
a, a:visited {
	color:#2d3536;
	text-decoration:none;
	border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
	color:#9e805c;
	text-decoration:none;
}
 
#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}
 
 
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
    /*background:url(images/slider.png) no-repeat;*/
    width:950px;
    height:3222px;
    margin:0 auto;
    padding-top:74px;
    margin-top:50px;
}
 
#slider { 
	position:relative;
    width:950px;
    height:322px;
    margin-left:190px;
	background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}
 
.nivo-controlNav {
	position:absolute;
	left:260px;
	bottom:-42px;
}
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}
 
.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}
 
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
 
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

Le souci est qu'il ne se positionne pas correctement.

Auriez-vous une idée de comment je pourrais faire svp ?

Je vous remercie d'avance pour votre aide.

beegees

[NoSmoking]

Code css :

1
2
3
4
5
6
7
#slider { 
    position:relative;
    width:950px;
    height:322px;
    margin-left:190px;  /* DECALAGE POURQUOI */
    background:url(images/loading.gif) no-repeat 50% 50%;
}

pourquoi décales tu ton slider ?

nota : il existe le sélecteur *, pour remplacer les presque toutes les balises que tu as mises en tête de ton CSS

Code css :

1
2
3
4
* {
  margin : 0;
  padding :0;
}

[beegees]

Envoyé par NoSmoking

Code css :

pourquoi décales tu ton slider ?

nota : il existe le sélecteur *, pour remplacer les presque toutes les balises que tu as mises en tête de ton CSS

Code css :

Bonjour,

Merci pour ta réponse.

J'ai utilisé le code par défaut proposé par le concepteur du slideshow.

J'ai commenté la ligne que tu m'indiques mais ça ne change pas grand chose :

http://164.15.112.38/beegees_v3/realisations.php

J'ai aussi supprimé ce code :

Code :

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
/*===================*/
/*=== Main Styles ===*/
/*===================*/
/*body {
	font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	color:#2d3536;
	background:#e8e0c0 url(images/background.png) repeat;
    text-shadow:0 1px 0 #fff;
}
 
a, a:visited {
	color:#2d3536;
	text-decoration:none;
	border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
	color:#9e805c;
	text-decoration:none;
}
 
#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}
*/

Ce qu'il faudrait faire je pense, c'est uniquement quand l'id est wrapper, le mettre en float:left par rapport au header.

Si c'est un autre élément, ne pas appliquer cette règle.

Qu'en penses-tu ?

Encore merci pour l'aide.

beegees

[NoSmoking]

je penses que le problème vient plutôt de tes images qui ne font pas la taille de la DIV contenante.

La DIV slider est déclarée avec une width de 850px ce qui est plus grand que son conteneur la DIV slider-wrapper qui elle est déclarée avec une width de 650px.

mets dans ta feuille de style

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
#slider { 
  position : relative;
  width : 650px;  /* CORRECTION */
  height : 622px;
  background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
  position : absolute;
  top : 0px;
  left : 0px;
  width : 650px;  /* CORRECTION */
  display : none;
}

cela devrait déjà mieux cadrer.

Si les images sont les images définitives, je pense qu'il vaut mieux les redimensionner à la bonne taille.

Autres points vus dans ton code

Code html :

1
2
3
4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>

devrait être

Code html :

1
2
3
4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

dans cette ordre

De plus si tu utilises un DOCTYPE HTML, il est inutile de fermer les balises comme img, br
exemple

Code html :

<img src="images/ULB_GALENIQUE2.png" alt="" height="227" width="204" />

devient

Code html :

<img src="images/ULB_GALENIQUE2.png" alt="" height="227" width="204">

Quoiqu'il arrive il me semble bon de mettre des images de même largeur et correspondant à la valeur du conteneur.

[beegees]

Re,

Merci pour ton aide et pour ta patience.

Voici le résultat actuel :

http://164.15.112.38/beegees_v3/realisations.php

J'ai découvert quelque chose dans mon code css qui était commenté, je l'ai décommenté, et c'est mieux.

J'ai aussi changé le head en ISO et c'est maintenant beaucoup mieux.

Faudrait tester le slideshow avec différentes résolutions.

Merci encore pour ton aide.

[NoSmoking]

Envoyé par beegees

Voici le résultat actuel :

http://164.15.112.38/beegees_v3/realisations.php

tu as visiblement réglé ton dernier soucis, pas vu de problème sur le lien mis.