débutant, problème cadre css

2 pièce(s) jointe(s)

bonjour, à tous, j'ai un problème d'affichage dans un de mes projets que je n'arrive pas à résoudre.
voila deux heures que je suis dessus et je ne comprend pas.
tout d'abord une précision, j'utilise la propriété background-size en css3 pour afficher ds background-images a la taille souhaitée, donc mon site ne s'affiche correctement que sur firefox. si quelqu'un connais une alternative pour que cela soit compatible sous ie et opéra je suis preneur.

sinon mon problème est dans l'affichage de mon cadre principal pour l'affichage des informations, une ligne blanche vient casser mon affichage et je n'arrive pas a m'en défaire.

voici mon code (html) :

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
<!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>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
<script src="./AJAX/" type="text/javascript"></script>
</head>
<body> 
 
       <div id="conteneur"><!-- Début #Conteneur --> 
            <div class="header" id="header"><!-- Début #Header -->
                 <ul id="menu"><!-- #menu Début du menu horizontal --> 
				 <li class="active"><a id="ici" href="index.html">Accueil&nbsp;</a></li>
				  <li><a href="ajax.html">Jouer&nbsp;au&nbsp;jeu&nbsp;de&nbsp;pendu</a></li>
				  <li><a href="ajax.html">Triche&nbsp;</a></li>
				  <li><a href="infos.html">Ajout&nbsp;de&nbsp;nouveaux&nbsp;mots&nbsp;</a></li>
				  <li><a href="renseignements.html">Règles&nbsp;</a></li>
				  <li><a href="./AJAX/ajax.html">Crédits&nbsp;</a></li>
                 </ul><!-- #menu Fin du menu horizontal --> 	
				 <img id="imgheader" class="header" src="images/header.png" border="0" alt="imgheader"/>
            </div><!-- Fin #header -->
 
   <div id="contenu"><!-- Début #contenu --> 	
                <div class="news_haut"><img id="imghaut"  src="images/news_haut.jpg" border="0" alt="imghaut"/></div>
				<div class="news_fond" ><!-- Cadre de News -->	
					<span class="titre"><p>Bienvenu&nbsp;sur&nbsp;site&nbsp;de&nbsp;jeux&nbsp;de&nbsp;de&nbsp;pendu&nbsp;</p></span>
					<span class="titre"><p>Bienvenu&nbsp;sur&nbsp;site&nbsp;de&nbsp;jeux&nbsp;de&nbsp;de&nbsp;pendu&nbsp;</p></span>
					<span class="titre"><p>Bienvenu&nbsp;sur&nbsp;site&nbsp;de&nbsp;jeux&nbsp;de&nbsp;de&nbsp;pendu&nbsp;</p></span>
				</div>
				<div class="news_bas"><img id="imgbas"  src="images/news_bas.jpg" border="0" alt="imgbas"/></div><!-- Fin Cadre de News -->
 
   </div><!-- Fin #Contenu -->
   <div id="pied" class="pied" ><!-- Pied -->
                      <div class="copyright">
					  <span id="copyright"><p>©&nbsp;copyright&nbsp;<a href="index.html">Team&nbsp;Messi&nbsp;</a></p>
					  </span></div>
                   </div><!-- Fin Pied -->	
       </div><!-- Fin #Conteneur -->

et le css maintenant :

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
 
 
/*Structure*/	 
body, html       
{
background:#0d0d0d;
margin:0 auto 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;color:#FFF;
background-attachment: fixed;
font-size:12px
}     
 
 
#conteneur       
{
width: 80%;
position:relative;
margin: 0 auto 0;
text-align:center;
}	
 
.header     
 {
 width:100%;
 text-align:left;
 height:181px; 
 margin:0 auto 0 auto;
 padding: 0;
 } 	
 
#contenu        
 {
width: 100%;
padding: 0;
margin:0 auto 0;
background: url(images/contenu.png);
}
 
#pied 
{
background:#0d0d0d url(images/pied.png) no-repeat;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
height:45px;
width:100%;
margin: 0 auto 0 auto;
padding: 0;
clear:both;}		
 
 
/*Cadre de news*/
.news_haut
{
width:100%;
height:20%;
margin:0 auto 0 auto;
0
}
 
.news_fond 
{
background:#0d0d0d url(images/news_fond.jpg) repeat-y;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
 
.news_bas  {
width:100%;
height:20%;
margin:0 auto 0 auto;
}
 
#imghaut , #imgbas
{
width:100%;
height:20%;
margin:0 auto 0 auto;
}
 
/*Class générique*/
a  
{
color: #1db6f6;
text-decoration: none;
margin:0;
font-weight:bold;
outline:none
}	
 
a:hover        {color: #fff;}	
h1, h2, h3, h4, h5,h6,span,p, img {border:0;margin:0 auto 0 auto;padding:0;}
span.titre     {color: #1db6f6;font-weight:bold;}	
span.bleu      {color: #1db6f6;font-weight:bold;}
 
 
/*Menu horizontal*/
ul#menu     
{
position: absolute;
margin:17px 0 0 3% ;
padding:0;
}
ul#menu li   
{
height: 30px;
float: left;
margin: 0 2px 0 2px;
padding:0 0 0 22px;
background: url(images/menuleft.png) top left no-repeat;
list-style-type: none;
 }
ul#menu li a       {
display: block;
background: url(images/menuright.png) right top no-repeat;
padding:1em 18px 0.9em 0;
color: #303030;
text-decoration: none;
margin: 0;
font-weight:bold;
outline:none;
}
ul#menu li a:hover 
{
padding:1em 18px 0.9em 0;
color: #1db6f6;
text-decoration: none;
margin: 0;
}  
ul#menu li#ici a 
  {
  color: #1db6f6;
  margin: 0;
  padding:1em 18px 0.9em 0;} 
 
/*copyright*/
.copyright   
{
padding :20px 0 0 0;
width:393px;
height:30px;
text-align:center;
font-weight:bold;
cursor:pointer;
margin:0 auto 0 auto;
}

merci à toute personne qui lira mon message et tentera de me dépanné :ccool:

tu devrais laisser une capture d'écran en pièce attachée.

Citation:

Envoyé par Marc22

tu devrais laisser une capture d'écran en pièce attachée.

+1 et aussi aérer le code css car là c'est imbuvable (une propriété sur une ligne)

voila suite à vos conseils, j'ai aérer mon css, et poster 2 screenshots.

Pour résumé mon problème provient d'une image passé en backgroud qui me sert par des repeat-y a former un fond a mon document.
utilisant des % de partout pour la taillle des image, j'ai eut du mal a refénir la taille d'une image passé en background , j'ai donc utilisé les propriétées css3 suivante
Code:

1 2 3 4 background:#0d0d0d url(images/news_fond.jpg) repeat-y; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%;
cela marche très bien (uniquement sous firefox hélas), pour mon pied de page, mais pour mon contenu je me retrouve avec un bug graphique comme on peut le voir sur la première image.
je ne trouve pas mon erreur, si vous posséder une solution alternative au background-size, je suis preneur car j'ai chercher mais en vain.

merci d'avance, et merci pour vos réponses :ccool:

Il y a une faute ici en gras souligné
Code:

1 2 3 4 5 6 7 8 9 10 /*Cadre de news*/ .news_haut { width:100%; height:20%; margin:0 auto 0 auto; 0 }
Mais bon, je doute que cela vienne de ça.

Autrement, pour la taille de l'image, il ne serait pas plus judicieux de faire une image avec une largeur ou une hauteur précise. Cela éviterai de l'agrandir de tous les côtés....