Sujet Précédent Sujet Suivant

Le code css ne s'affiche pas sous chrome

Fermé
Nikodu51 Messages postés 2 Date d'inscription vendredi 27 janvier 2012 Statut Membre Dernière intervention 27 janvier 2012 - 27 janv. 2012 à 16:34
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 27 janv. 2012 à 16:44
Bonjour,

Tous d'abord, rendez-vous sur ce site avec le navigateur de google (Chrome) : http://nikodu51.kegtux.org/ (Ce site m'appartient)

Vous voyez bien qu'il n'y que du html, et surtous pas du css. Maintenance faisez la même démarche, mais sous internet explorer et Mozilla. Bizzarre, maintenant le css s'affiche correctement...

Donc je perds un certains nombres de visiteurs. Voici les codes sources de mon site :

Code source du css : 
body, html {
     background:#0d0d0d;
	 margin:0;
	 padding:0;
	 font-family:Verdana, Arial, Helvetica, sans-serif;
	 text-align:center;
	 color:#FFF;
	 background-attachment: fixed;
	 font-size:12px;
}     
#conteneur {
     margin: 0 auto;
	 width: 942px;
	 position:relative;
	 text-align:center;
}	
#header {
     text-align:left;
	 height:181px; 
	 background:url(/images/header.psd);
	 margin:0 auto;
	 width:942px;
} 	
#contenu {
     width: 942px;
	 padding: 0;
	 margin:0 auto;
	 background:url(images/contenu.png);
}
#left {
     float: left;
	 width: 168px;
	 margin:0 0 0 10px;
	 padding:0;
}   
#right {
     width: 740px;
	 margin:0 0 0 187px;
	 padding:0;
	 text-align:left;
}   
#pied {
     background:#0d0d0d url(images/pied.png);
	 height:45px;
	 width:942px;
	 margin: 0 auto;
	 padding: 0;
	 clear:both;
}			
/*Class générique*/
a  {
     color: #1db6f6;
	 text-decoration: none;
	 margin:0;
	 font-weight:bold;
	 outline:none;
}	
a:hover {
     color: #fff;
}	
img, p, h1, h2, h3, h4, h5,h6, span {
     border:0;
	 margin:0;
	 padding:0;
}
span.titre {
     color: #1db6f6;
	 font-weight:bold;
}	
span.bleu  {
     color: #1db6f6;
	 font-weight:bold;
}	
.spacer {
     margin:3px 0 0 0;
} 
.grandspacer  {
     margin:15px 0 0 0;
}
.clear {
     clear: both;
	 visibility: hidden; 
}	
/*Menu	vertical*/
.hautmenu  {
     height:32px;
	 width:168px;
	 margin:0; 
	 background:url(images/hautmenu.png) no-repeat bottom;
	 padding:10px 0 0 0;
	 margin:0;
	 color:#1db6f6;
	 text-align:center;
	 font-weight:bold;
	 font-size:14px;
}
.fondmenu {
     width:168px;
	 margin:0; 
	 background:url(images/fondmenu.png);
	 padding:0;
}
.basmenu {
     height:20px;
	 width:168px;
	 margin:0; 
	 background:url(images/basmenu.png);
	 padding:0;
}
ul.menuh {
	 list-style:none;
	 width:168px;
	 padding:0;
	 margin:0;
	 text-align:center;
}
ul.menuh li a {
	 display: block;
	 height: 14px;
	 color: #fff;
	 text-decoration: none;
}
ul.menuh li a:hover {
color: #1db6f6;
}	
/*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 {
     padding :20px 0 0 0;
	 width:393px;
	 height:30px;
	 text-align:center;
	 font-weight:bold;
	 cursor:pointer;
	 margin:0 auto;
}  	
.news_haut {
     background:url(images/news_haut.jpg) no-repeat;
	 width:740px;
	 height:38px;
	 margin:0 auto 0 auto;
}
.news_fond {
     background:url(images/news_fond.jpg) ;
	 width:690px;
	 padding:0 25px 0 25px;
}
.news_bas  {
     background:url(images/news_bas.jpg) no-repeat;
	 width:740px;
	 height:28px;
}


Puis ma page index ci besoin : 

<!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>Astuw | Tous les meilleurs trucs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<style>body, html {
     background:#0d0d0d;
	 margin:0;
	 padding:0;
	 font-family:Verdana, Arial, Helvetica, sans-serif;
	 text-align:center;
	 color:#FFF;
	 background-attachment: fixed;
	 font-size:12px;
}     
#conteneur {
     margin: 0 auto;
	 width: 942px;
	 position:relative;
	 text-align:center;
}	
#header {
     text-align:left;
	 height:181px; 
	 background:url(/images/header.psd);
	 margin:0 auto;
	 width:942px;
} 	
#contenu {
     width: 942px;
	 padding: 0;
	 margin:0 auto;
	 background:url(images/contenu.png);
}
#left {
     float: left;
	 width: 168px;
	 margin:0 0 0 10px;
	 padding:0;
}   
#right {
     width: 740px;
	 margin:0 0 0 187px;
	 padding:0;
	 text-align:left;
}   
#pied {
     background:#0d0d0d url(images/pied.png);
	 height:45px;
	 width:942px;
	 margin: 0 auto;
	 padding: 0;
	 clear:both;
}			
/*Class générique*/
a  {
     color: #1db6f6;
	 text-decoration: none;
	 margin:0;
	 font-weight:bold;
	 outline:none;
}	
a:hover {
     color: #fff;
}	
img, p, h1, h2, h3, h4, h5,h6, span {
     border:0;
	 margin:0;
	 padding:0;
}
span.titre {
     color: #1db6f6;
	 font-weight:bold;
}	
span.bleu  {
     color: #1db6f6;
	 font-weight:bold;
}	
.spacer {
     margin:3px 0 0 0;
} 
.grandspacer  {
     margin:15px 0 0 0;
}
.clear {
     clear: both;
	 visibility: hidden; 
}	
/*Menu	vertical*/
.hautmenu  {
     height:32px;
	 width:168px;
	 margin:0; 
	 background:url(images/hautmenu.png) no-repeat bottom;
	 padding:10px 0 0 0;
	 margin:0;
	 color:#1db6f6;
	 text-align:center;
	 font-weight:bold;
	 font-size:14px;
}
.fondmenu {
     width:168px;
	 margin:0; 
	 background:url(images/fondmenu.png);
	 padding:0;
}
.basmenu {
     height:20px;
	 width:168px;
	 margin:0; 
	 background:url(images/basmenu.png);
	 padding:0;
}
ul.menuh {
	 list-style:none;
	 width:168px;
	 padding:0;
	 margin:0;
	 text-align:center;
}
ul.menuh li a {
	 display: block;
	 height: 14px;
	 color: #fff;
	 text-decoration: none;
}
ul.menuh li a:hover {
color: #1db6f6;
}	
/*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 {
     padding :20px 0 0 0;
	 width:393px;
	 height:30px;
	 text-align:center;
	 font-weight:bold;
	 cursor:pointer;
	 margin:0 auto;
}  	
.news_haut {
     background:url(images/news_haut.jpg) no-repeat;
	 width:740px;
	 height:38px;
	 margin:0 auto 0 auto;
}
.news_fond {
     background:url(images/news_fond.jpg) ;
	 width:690px;
	 padding:0 25px 0 25px;
}
.news_bas  {
     background:url(images/news_bas.jpg) no-repeat;
	 width:740px;
	 height:28px;
}
</style>
</head>
<body> 

<div id="conteneur"><!-- Conteneur Global --> 
         <div id="header">
		 <!--***** MENU *****-->
              <ul id="menu">
                  <li id="ici"><a href="#" title="">Accueil</a></li>
                  <li><a href="#" title="">Rubrique</a></li> 
                  <li><a href="#" title="">Rubrique</a></li> 
                  <li><a href="#" title="">Rubrique</a></li> 
                  <li><a href="#" title="">Rubrique</a></li> 
                  <li><a href="#" title="">Rubrique</a></li> 
                  <li><a href="#" title="">Rubrique</a></li> 
              </ul> 	
         </div>
   
         <div id="contenu">
		      <!--***** COLONNE DE GAUCHE *****-->		 
              <div id="left">
		      <!--***** MENU *****-->
                   <div class="hautmenu">Catégories</div><div class="fondmenu">
                        <ul class="menuh">
                            <li><a href="#" title="">Rubrique</a></li> 
                            <li><a href="#" title="">Rubrique</a></li> 
                            <li><a href="#" title="">Rubrique</a></li> 
                            <li><a href="#" title="">Rubrique</a></li>  
                            <li><a href="#" title="">Rubrique</a></li> 
                        </ul> 	
                   </div><div class="basmenu"></div>

		      <!--***** MENU *****-->
                   <div class="hautmenu">Catégories</div><div class="fondmenu">
                        <ul class="menuh">
                            <li><a href="#" title="">Rubrique</a></li> 
                            <li><a href="#" title="">Rubrique</a></li> 
                            <li><a href="#" title="">Rubrique</a></li> 
                            <li><a href="#" title="">Rubrique</a></li>  
                            <li><a href="#" title="">Rubrique</a></li> 
                        </ul> 	
                   </div><div class="basmenu"></div>

                   <div class="hautmenu">Catégories</div><div class="fondmenu">
                        <a href="" title=""><img src="images/facebook.png" alt="" style="margin:0 3px" /></a>
                        <a href="" title=""><img src="images/twitter.png" alt="" style="margin:0 3px" /></a>
                        <a href="" title=""><img src="images/rss.png" alt="" style="margin:0 3px" /></a>		
                   </div><div class="basmenu"></div><!-- Fin Menu vertical -->
              </div>
			  
		      <!--***** COLONNE DE DROITE *****-->		
		      <div id="right">
			  
 		      <!--***** CADRE NEWS *****-->                
				 <div class="news_haut"></div><div class="news_fond">
				      <span class="titre">Arcu nec sagittis :</span><br />
				         Ut interdum, tempor, sapien velit commodo orci, non venenatis massa elit non arcu. 
						 Aenean sit amet velit ante, vitae mattis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
						 per inceptos himenaeos. Fusce varius eros non nulla vestibulum sodales. Aenean eget augue at elit vestibulum bibendum. 
						 Etiam eu ante vitae ipsum gravida mollis. Nulla elementum, nibh at condimentum faucibus, ipsum enim luctus lectus, 
						 bibendum ultricies nulla risus fringilla eros. 
						 <br /><br />
						 Nullam euismod, enim gravida pretium tincidunt, nibh neque feugiat turpis, sit amet vestibulum diam elit quis ante. 
						 Curabitur cursus massa quis lectus molestie vel vehicula nisl pretium. In diam justo, posuere non commodo non, dapibus sed metus. 
						 Suspendisse potenti. In hac habitasse platea dictumst. Pellentesque eget volutpat nunc. 
						 <br /><br />						 
						 In ultricies sapien vitae orci tempor lacinia blandit velit interdum. Donec dapibus, dui at fermentum lacinia, 
						 eros nunc vehicula tellus, ut dapibus purus libero aliquet nibh. Integer eu est nisl. 
				 </div><div class="news_bas"></div>

 		      <!--***** CADRE NEWS *****-->   
				 <div class="news_haut"></div><div class="news_fond">
				      <span class="titre">Nullam non enim nunc :</span><br />
				            Ut luctus justo. Nam ut venenatis risus. Sed eu mauris accumsan urna tincidunt porta. 
							In elementum dictum porttitor. Aliquam eget elit enim, sit amet lobortis turpis. 
							Praesent vulputate nisl eu leo porta pretium. Mauris risus turpis, tincidunt eu molestie at, scelerisque ac metus. 
							Fusce nec congue odio. Nullam sodales erat a leo dignissim at ultricies dui elementum. 
							Proin enim neque, eleifend ut fermentum vitae, aliquam vel ipsum. 
						 <br /><br />	
							Etiam rutrum mollis sapien, non interdum quam mollis quis. Pellentesque eu lacus in magna feugiat aliquet id vel sem. 
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at odio diam. Phasellus lectus sem, euismod id iaculis eget, 
							pulvinar id magna. Mauris venenatis iaculis tempor. In aliquam porta risus.
							Vivamus sodales tincidunt elit in lobortis. Mauris ut eros tortor. Aliquam nisl lacus, cursus et dapibus non, 
							porttitor vitae mauris. Pellentesque a odio sed metus viverra volutpat et vel nibh. Nullam lorem dui, sagittis sed aliquam quis, 
							pharetra vel leo. Aliquam cursus nunc vel felis dictum dictum. Quisque nec lacus arcu. Nam eros felis, posuere eget venenatis in, 
							mollis vitae odio. Duis imperdiet lorem sed nulla consequat tristique. Proin euismod blandit velit quis viverra. 
						 <br /><br />	
							Quisque at odio nisi. Quisque non pellentesque nulla. Donec fringilla lacinia libero, nec interdum libero ornare in. 
							Sed ac accumsan nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
							Suspendisse vulputate erat et erat laoreet sed blandit nisl varius. Donec tellus metus, varius in iaculis sed, blandit cursus ante. 
							Suspendisse lacinia nulla id erat ornare dictum. 
							Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
				 </div><div class="news_bas"></div>  
				 
				 <!-- Bouton pour remonter en haut de la page --> 
				 <div style="text-align: right;margin:0 17px 0 0"><a href="#header"><img src="images/hautdepage.png" alt=""/></a></div>
				 
		      </div>
 		      <!--***** PIED *****--> 
              <div id="pied">
                   <!-- mention de copyright Ne pas retirer sans autorisation écrite -->
                   <div class="copyright"><a href=""> Votresite.com</a> | ©Design <a href="http://kitgraphiquegratuit.org/" onclick="window.open(this.href); return false;" title="kits Graphique">Kits Graphiques</a></div>
                   <!-- mention de copyright Ne pas retirer sans autorisation écrite -->	
              </div>

</div><!-- Fin Contenu -->
</div><!-- Fin Conteneur Global -->
</body>
</html>



Voila, je vous remercie pour vos reponse.
A voir également:

1 réponse

Réponse 1 / 1
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
27 janv. 2012 à 16:44
Salut,

Il me semble que ton CSS va bien ? Moi je vois la même chose sous FF que sous Chrome.

Il faut que je souligne cependant... Je ne suis pas du genre à relever les fautes d'orthographe, mais...

Maintenance faisez la même démarche
Vraiment ?
0

Discussions similaires

code ascii
Thomas13_9924 -
Dalfab -

2 réponses