débutant, problème cadre css

dareman · 21/11/2010, 16h02

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 html :

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
<!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 :

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
 
 
/*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é

Marc22 · 23/11/2010, 05h13

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

yonpo · 23/11/2010, 10h37

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)

dareman · 23/11/2010, 23h01

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 :

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

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

yonpo · 24/11/2010, 11h58

Il y a une faute ici en gras souligné

Code css :

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

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....

23/11/2010, 05h13	#2
Marc22 Membre confirmé Conseil - Consultant en systèmes d'information Inscription : août 2008 Messages : 543 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : France, Corse (Corse) Informations professionnelles : Activité : Conseil - Consultant en systèmes d'information Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2008 Messages : 543 Points : 255 Points : 255	tu devrais laisser une capture d'écran en pièce attachée.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email