Bug d'affichage sur mon site.

**Niki59** · 30/10/2008, 17h48

Bonjour, je viens de télécharger un kit graphique gratuit sur le web.
Seulement j'ai tenté d'augmenter sa largeur car je le trouvais un peu petit.

La version original : http://www.kits-gratuits.net/kits/kit-28/
Ma version : http://www.ssb-france.com/shop/site/

Comme vous pouvez le voir, y'a un bug d'affichage au niveau du bas de la page.
Comment le corriger ?

Fichier 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
/* Kit réalisé et codé par timestius.com */
 
body{
	margin: 39px 0px 0px 0px; /* -20px du haut */
	background: rgb(162,183,0) url(../images/index/background.gif) repeat-x;
	font: 13px/1.1em Trebuchet MS, Trebuchet, Arial, Helvetica, Verdana, Georgia, sans-serif;
	color: #666666;
}
 
a:link, a:visited{ color:#FF6600; text-decoration:none; }
a:hover { color:#333333; text-decoration:overline; }
 
 
/* Blocs majeurs */
 
#site { /* Englobe tout le site  */
	margin: 0 auto 0;
	position: relative;
	width: 796px;
 
}
 
#left { /* Bloc Contenu */
	float: left;
	width: 571px;
	background: url(../images/index/back_contenu.jpg) repeat-y;
	}
 
#right { /* Bloc Menu */
	float: right;
	width: 224px;
	background: url(../images/index/back_menu.jpg) repeat-y;
	}
 
#container { /* Contenu */
	position: relative;
	left: 25px;
	width: 527px;
	}
 
#menu { /* Menu */
	position: relative;
	left: 19px;
	}
 
 
#copyright { /* Footer contenu */
	width: 527px;
	height: 143px;
	background: url(../images/index/footer.gif) no-repeat;
	}
 
#menu_footer { /* Footer menu */
	width: 224px;
	height: 115px;
	background: url(../images/index/footer_menu.gif) no-repeat;
	}
 
 
#header {
	height: 209px;
	background: url(../images/index/header.jpg) no-repeat;
	}
 
#logo { 
	height: 209px;
	background: url(../images/index/logo.jpg) no-repeat;
	}
 
 
/* Blocs mineurs */
 
 
#title_article { /* Titre d'un billet */
	width: 520px;
	padding: 3px;
	border-bottom:1px solid #CCC;
	font-size:15px;
	margin-bottom:10px;
	}
 
#navigation { /* Sous le header */
	width: 520px;
	padding: 4px;
	padding-top: 5px;
	color:#99AF1B;
	text-align: right;
	margin-bottom:20px;
}
 
#recherche {
	border-top: 1px dotted #a7ba05;
	padding-top: 2px;
	margin-bottom: 9px;
	padding-bottom: 2px;
	width: 185px;
	border-bottom: 1px dotted #a7ba05;
	}
 
.info+ {
	border:none;
	width: 200px;
	}
 
td.date {
	text-align: right;
	width: 150px;
	}
 
 
/* MENU LISTE */
 
 
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
 
#navcontainer a
{
display: block;
font-family: Arial;
padding: 5px;
width: 175px;
background: url(../images/index/menu_off.gif);
border-bottom: 1px solid #eee;
}
 
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
 
#navcontainer a:hover
{
background-color: #369;
background: url(../images/index/menu_on.gif);
color:#fff;
}
 
 
 
/* SPAN, COULEURES */
 
.orange {
	color:#FF6600;
	}
.copyright_link {
	position:relative;
	bottom: -105px;
	left: 25px;
	font-size:12px;
	}
 
input {
	border: none;
	padding: 2px;
	color:#FF9900;
	}
 
input:hover {
	color:#888888;
	}

Index.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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="fr" lang="fr">
<head>
 
    <script type="text/javascript" src="date.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<title>Green Summer | Kit par Timestius.com</title>
 
</head>
<body>
 
	<div id="site">
		<div id="left">
			<div id="header"></div>
 
			<!-- Contenu !-->
			<div id="container">
			<div id="navigation">index > catégorie > <span class="orange">Firefox</span></div>
 
			<div id="title_article"><span class="orange">#001/</span> Pour un web meilleur : utiliser Firefox !</div>
                  <img src="images/contenu/firefox.gif" alt="firefox" width="304" height="149" />
			<div id="lipsum">						
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla massa.  Nullam vestibulum eleifend neque. Duis est. Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Morbi facilisis magna et est. Suspendisse  at justo vel ligula ornare lacinia. Nunc sed nisl. Duis eu dui. Vivamus  eget metus sed nibh fermentum scelerisque. Fusce congue, sapien  ullamcorper condimentum volutpat, risus risus ultrices dui, at  tincidunt nisi ipsum ac elit.
<p>Nullam felis enim,  scelerisque quis, accumsan ac, rhoncus in, risus. Nulla rhoncus erat  nec odio. Vivamus convallis, neque eget vehicula venenatis, leo pede  consectetuer metus, id tristique sem massa in augue. Vestibulum ipsum  arcu, aliquam sit amet, imperdiet ac, rutrum eu, purus. Pellentesque  elementum. </p>
<p>Cras lacus lectus, rutrum id, accumsan eget, tempus  porttitor, est.</p>
<p>&nbsp;</p>
			</div>
 
			</div>
			<!-- Fin Contenu !-->
 
			<div id="copyright">
				<span class="copyright_link">design par <a href="http://www.timestius.com">www.timestius.com</a> pour <a href="http://www.kits-gratuits.net/">kits-gratuits.net</a> sous license <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/">CC</a> </span>
			</div>
 
		</div>
 
		<div id="right">
			<div id="logo"></div>
			<br />
	 	  <div id="menu">
 
				<div id="recherche"><input type="text" value="recherche" size="21" />&nbsp; ok</div>
 
				<table class="info+" cellspacing="0" cellpadding="0"><tr>
    <td class="link"><img src="images/index/home.gif" alt="home" /> &nbsp;<img src="images/index/contact.gif" alt="contact" /></td>
    <td class="date"><script type="text/javascript">document.write(messageDate);</script></td></tr>
</table>
<br />
 
				<div id="navcontainer">
					<ul id="navlist">
						<li><a href="#">&nbsp;Item one</a></li>
						<li><a href="#">&nbsp;Item two</a></li>
						<li><a href="#">&nbsp;Item three</a></li>
						<li><a href="#">&nbsp;Item four</a></li>
						<li><a href="#">&nbsp;Item five</a></li>
						<li><a href="#">&nbsp;Item six</a></li>
					</ul>
 
				</div>
 
			</div>
			<div id="menu_footer"></div>
 
		</div>
 
	</div>
 
</body>
</html>

**neismarspra** · 30/10/2008, 18h29

tu peut citer le bloc modifier, et la valeur d'origine stp?

**julied2** · 30/10/2008, 18h56

Essaie voir en enlevant le width dans :

Code :

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

1
2
3
4
5
#copyright { /* Footer contenu */
	width: 527px;
	height: 143px;
	background: url(../images/index/footer.gif) no-repeat;
	}

J'ai testé avec firebug dans firefox et ça fonctionne.

**Niki59** · 30/10/2008, 19h23

Envoyé par julied2

Essaie voir en enlevant le width dans :

#copyright { /* Footer contenu */
width: 527px;
height: 143px;
background: url(../images/index/footer.gif) no-repeat;
}

J'ai testé avec firebug dans firefox et ça fonctionne.

C'est parfait! Merci beaucoup.

**Niki59** · 30/10/2008, 23h08

Bon un autre problème, j'ai voulu ajouter un peu de décoration sur la partie gauche du site, mais y'a un petit soucis d'affichage.

J'ai modifié ce fichier :
http://www.kits-gratuits.net/kits/ki...ck_contenu.jpg

Par celui-ci:
http://www.ssb-france.com/shop/site/images/index/A.jpg
(Vous noterez que c'est le même fichier sauf que j'ai ajouté un espace vide à droite et à gauche pour y mettre par la suite des petits dessins)

Voici le rendu :
http://www.ssb-france.com/shop/site/

Comment régler ce problème ?

Bug d'affichage sur mon site.

CSS

Discussions similaires

Partager

Partager