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é

débutant, problème cadre css

CSS

Mode arborescent

Discussions similaires

Partager

Partager