18041 sujets

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

Background-image ne s'affiche pas (pareil pour color)

Bonjour,

Je débute et me retrouve confronté à un problème insoluble..
Je m'explique : Je veux me créer un site internet portfolio. La charte graphique a été réalisée sur photoshop, avec un calque de fond et des boutons pour le menu.

Quand je l'intègre en html, les boutons menu s'affichent sans soucis, et à la bonne place. J'arrive à faire apparaitre mon image de fond sur mon site mais les boutons se placent en dessous, et pas sur l'image de fond, comme sur ma charte graphique.
Mon image de fond pèse 400Ko, j'ai aussi testé avec des images de 20Ko et ça ne fonctionne pas non plus. Pareil pour background-color, ça ne s'affiche pas sur ma page.
C'est sûrement un problème de code très simple mais je débute Smiley confused
J'ai consulté pleins de forums mais je n'ai pas trouvé la solution à mon problème.

Merci de m'aider!

Voici le bout de code (html et css) de mon site:


<body>
 
    
    <div class="main">
    
    	<div class="logo">
        	<img src="images/logo.png"/>
    	<div/>
        
        <div class="menu">
	  <div class="lienaccueil"> <a href="index.html"><img src="images/accueilo.png" /></a> </div>
		<div class="lienvideo"> <a href="video.html"> <img src="images/videoso.png"/> </a> </div>
		<div class="lienphoto"> <a href="photo.html"> <img src="images/photoso.png" /> </a> </div>
		<div class="lienapropos"> <a href="cv.html"> <img src="images/aproposr.png" /> </a> </div>
		</div> 

        <div/>
	</body>




.body{
width:1000px;
height:600px;
background-image:url(fondaccueil.png);
}


.main{
widht:1000px;
height:600px;
margin-left:auto;
margin-right:auto;
}

.logo{
widht:332px;
height:80px;
margin-left:50px;
margin-top:20px;
}

.menu{
height:330px;
widht:128px;
}

.lienaccueil{
margin-top:90px;
}

.lienvideo{
margin-top:43px;
}

.lienphoto{
margin-top:43px;
}

.lienapropos{
margin-top:44px;
}






Je voudrais aussi pouvoir modifier l'image de background sur deux pages de mon site, pour une autre de même taille, même poids. Si vous avez des solutions...

Merci encore! Smiley smile
Modifié par azerty1 (26 Feb 2011 - 16:01)
Bonjour,

Toutes tes images semblent être dans le dossier "images", peut-être que ton image background aussi ?


.body{ 
width:1000px; 
height:600px; 
background-image: url(images/fondaccueil.png); 
}
Bonjour,

Tu as le sélecteur suivant:
.body {}

Ce qui signifie que tes déclarations CSS (dont le background-image: ...) seront appliquées à tous les éléments de la page qui portent la classe "body". C'est à dire à aucun élément. Je suppose donc que ce sélecteur est faux.

Pour rappel, les sélecteurs en CSS:
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php

Par ailleurs:
- Pour les principaux éléments de l'interface d'un site, on utilisera plutôt les identifiants que les classes. (Cf. Quelle est la différence entre une classe et un id?)
- Les menus de navigation sont, par convention, codés avec une liste non ordonnée de liens (éléments UL, LI et A), plutôt qu'avec une série de divisions (DIV, DIV et A).
- Pour des questions d'accessibilité et de référencement, il faut indiquer l'équivalent textuel de tes images en utilisant l'attribut alt. On écrira par exemple <img src="images/videoso.png" alt="Vidéo" />.
fvsch a écrit :
Tu as le sélecteur suivant:
.body {}

Ah ben oui, ça ne m'a même pas sauté au visage Smiley rolleyes
Et en passant, tu as des <div> mal fermés. Je vois des <div/> alors que ça aurait dû s'écrire </div> !

Tu as aussi des coquilles dans ton CSS, certains width sont mal écrits et d'ailleurs, la coloration te l'indique !
Modifié par IshimaruChiaki (02 Mar 2011 - 06:29)
Sujet clos
Aller à