18041 sujets

Questions générales et questions de débutants

Probleme bakground style css

Bonjour à tous, je viens vers vous car débutante dans la création de site internet, je ne trouve pas mon problème, après une semaine de recherches.... Mon problème est que mon image de fond apparaît bien quand je suis en local, mais dès que je j’envoie mon site, avec filezilla, plus de fond...Pourriez-vous me dire si il y a un problème dans mon code...merci.

code html :

<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        <title></title>
        
    	<style type="text/css">
    	</style>
    
    	<link href="style.css" rel="stylesheet" type="text/css">
        
        <link rel="stylesheet" href="wbarrefixe.css" type="text/css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" href="wbarrefixe-ie6.css" type="text/css" media="screen" />
<![endif]-->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="wbarrefixe.packed.js" type="text/javascript"></script>
<link href="design/favicon.ico" rel="shortcut icon" />
        
</head>
	
    	
	
    <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
  <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]-->
    <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]-->
    <!--[if IE 8 ]><body class="ie8"><![endif]-->
    <!--[if IE 9 ]><body class="ie9"><![endif]-->
    <!--[if !IE]><!--><body><!--<![endif]-->
        
    	<div id="bloc_page">
        
				<header>
                         <div id="banniere_image">
            <div id="banniere_description">
            
              
                
	</div>
</div>
                
                
                <nav>
                
                    <ul>
                        <li><a href="index.html">Accueil</a></li>
                      	<li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="contact.php">contact</a></li>
		</ul>
	</nav>
</header>
            
   
<section>
 				<h1>Quelques mots pour me présenter</h1>
	<article>
                
                   
                    
            <p> Infographiste depuis 2008, je me lance, depuis peu, dans la grande aventure du Free-lance. D'une formation d'infographiste et auto-formée à la création de sites internet , je vous propose tous les outils indispensables à une bonne communication : print et sites-web. Mes logiciels de création sont Illustrator, Photoshop, Dreamweaver et In-design. J'espère que mes créations vous plairont. Bonne visite à tous!</p> 
            
</article>


</section>

<footer>
		
        <div> 
		<p><marquee align="center" height="100" width="500"scrolldelay="5" scrollamount="3" onMouseOut="this.start()" onMouseOver="this.stop()">
<p><img border="0" src="design/perroquetfooter.jpg" alt="perroquetfooter" hspace="0"><img border="0"src="design/affichefunkyfooter.jpg" alt="affichefunkyfooter" hspace="0"><img border="0" src="design/bloodfooter.jpg" alt="bloodfooter" hspace="0"><img border="0" src="design/affichevintagfooter.jpg" alt="affichevintagefooter" hspace="0"><img border="0" src="design/afrofooter.jpg" alt="afrofooter" hspace="0"><img border="0" src="design/coccinellefooter.jpg" alt="coccinellefooter" hspace="0"><img border="0" src="design/affichefuturistefooter.jpg" alt="affichefuturistefooter" hspace="0"><img border="0" src="design/retrofooter.jpg" alt="retrofooter" hspace="0"><img border="0" src="design/typocoeurfooter.jpg" alt="typocoeurfooter" hspace="0"></p>

		</marquee>
	</p>
</div>

    
<nav>
<ul class="menu">
    	<li><a href="index.html">Accueil</a></li>
        <li><a href="mentionslegales.html">Mentions légales</a></li>
        <li><a href="coordonnees.html">Coordonnées</a></li>
        <li><a href="index.html">Site Internet</a></li>
        <li><a href="http://www.facebook.com/sharer.php?u=www.monsite.fr"> <img src="design/facebook.png" alt="Partager sur Facebook" /></a>
		  <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>
        <li>				<a href="https://twitter.com/share" data-text="allez voir ce site" data-via="" data-lang="fr"> <img src="design/apache_pb.png" alt="Partager sur Twitter" /></a>
		  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</nav>
	
         
            
		</footer>
	</body>
</html>


code css :

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Eléments principaux de la page */

body
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #ffee0e;
	background-image:url(design/fond.png); 

}

#bloc_page
{
    width: 900px;
    margin: auto;
}

section h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
	color:#CCC;
}

/* Header */

header
{
    background:url(design/separateur.png) repeat-x bottom;
}

#titre_principal
{
    display: inline-block;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 3em;
    font-weight: normal;
	margin-left: 100px;
	vertical-align:middle;

}

header nav 
{
	float:right;
    width:400px; // On force la largeur de chaque bouton
}
h1
{
	display: inline-block;
	margin-top:0px;
	margin-left:10px;
	margin-bottom:50px;
	
}
	    

/* Navigation */

nav
{
    display: inline-block;
    width: 740px;
    text-align: right;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
	text-align:right;
	
}

nav a
{
    font-size: 1.3em;
    color: #ffee0e;
    padding-bottom: 3px;
    text-decoration: none;
	text-align:center;
	text-transform:capitalize;
	
}



/* Bannière */

#banniere_image
{
    margin-top:15px;
    height: 250px;
	background:url(design/bannierelogo.png) no-repeat;
	background-position:center;
	position: relative;
    margin-bottom: 25px;
}

#banniere_description
{
	position: absolute;
	bottom: 5px;
	background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
	background-color: rgba(24,24,24,0.8);
   
    
}



/* Corps */
h1
{
	text-align:center;
	font-size:1em;
	margin-top:100px;
	width: 625px;
	
}

article
{
    display: inline-block;
    vertical-align:top;
    text-align:left;
	margin-top:50px;
	width: 625px;
	border-right:1px solid #ffee0e;
	border-left:1px solid #ffee0e;
	margin-left:100px;
	
}

	
article p
{
    display:block;
    padding:3px 18px;
    font-size: 0.8em;
    margin-top:20px;
    text-transform:capitalize;
}

/* Footer */


.menu
{	
	width:950px;
	text-align:center;
}

.menu li 
{
	display:inline-block;
    list-style-type:none;
}

.menu a 
{
  display:block;
  padding:3px 18px;
  border-right:1px solid #ffee0e;
  font-size: 0.8em;
  margin-top:300px;
  text-transform:capitalize;
}
	
	


	

/* Correctifs pour les vieilles versions d'Internet Explorer */

/* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */

.old_ie #titre_principal, .old_ie #logo, .old_ie header h1, .old_ie nav, .old_ie nav li, .old_ie .bouton_rouge, .old_ie article, .old_ie aside, .old_ie #tweet, .old_ie #mes_photos, .old_ie #mes_amis, .old_ie #mes_amis ul
{
    display: inline;
    zoom: 1;
}

/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie section h1, .ie8 section h1
{
    font-size: 1.1em;
}

.old_ie footer div, .ie8 footer div
{
    margin-top: 30px;
	background-color: #706b64 repeat-x top;
}
bonjour,

essaies de regarder au niveau de la casse du répertoire et du fichier : 

background-image:url(design/fond.png);


assures-toi que l'ensemble est en minuscules sur ton FTP.
Merci pour ta réponse, mais j'ai vérifié tout ça, et quand je suis en local, avec wamp, il marche très bien c'est dès que je l'envoie avec filezilla que ça ne marche plus. Dois-je faire quelque chose par rapport à mon hébergeur??? Et si j'ouvre un des fichiers dans filezilla, ça bug...je ne comprend pas, puisqu'il n'y a pas de changement entre filezilla et wamp, je ne modifie rien...c'est à se taper la tête contre les murs...
Sujet clos
Aller à