Problème de postionnement de l'en tête...

Salut!

tu met : background-image: url ("banpiano.png");

alors que c'est background-image: url(banpiano.png);

sans l'espace après le "url" ni les guillements : "".

Ooh.. .. Nan, ça marche pas non plus.
J'ai enlevé le html, refait un joli block qui est sensé afficher l'image de fond (sans espace ^^)
Mais toujours rien --'

ah! éssayes plutot :

background: url(banpiano.png) 0 0 #000;

Oooh (x2) ... ça affiche un bloc noir cette fois et toujours pas l'image --" (<mais ça avance)
ça signifie quoi ?
(merci hein ^^')

background: url(banpiano.png) 0 0;

Pourquoi 0 0 ?

Enfin, j'ai changé, ça n'affiche toujours rien --'

body
{
width: 760px;
margin: auto;
margin-top: 20 px;
margin-bottom: 20 px;
margin-left: 20 px;
background: grey;
text-indent: 10 px;
border-style: none;
}

#tete
{
width: 353px;
height: 100px;
background-repeat: no-repeat;
Background: url("ban.png") 0 0;
margin-top: 30 px;
}

#tete
{
width: 353px;
height: 100px;
background: url(ban.png) no-repeat;
margin-top: 30 px;
}

en minuscule, le "B" de background.

Ah oui ^^
Merci ça marche, maintenant j'ai un autre question ... Comment on peut mettre un lien sur une image qui apparait grâce au CSS.... Pour être plus explicite, j'ai fait des icone sur photoshop pour les mettre sur un menu qui flottera à gauche mais l'image n'apparait pas non plus... Alors de là à la mettre en tant que lien... --"

#menu
{
float: left;
width: 120px;
margin-top: 5px;
margin-left: 30px;
position: absolute;
left: 35px;
bottom: 1px;
top: 100px
}

.element1
{
position: absolute;
left: 35px;
top: 100px;
background-image: url("acceuilban.png");
background-repeat: no-repeat;
}

Element 1, c'est à dire là où doit être l'icone, n'apparait pas...

Merci encore

.element1
{
position: absolute;
left: 35px;
top: 100px;
background: url(acceuilban.png) no-repeat;
} 

Pas de "" dans l'url.

Merci mais l'histoire de l'image dans le CSS j'aime pas trop...

[URL=https://imageshack.com/][IMG]http://img197.imageshack.us/img197/3307/pianojl.png[/IMG][/URL]

Euh voilà ce que donne : en HTML

<div id="tete">

</div>

<div id="menu">

<div class="element1">
<a href="..." ><img src="accueilban.png" alt="accueil" /> </a>
</div>

<div class="element2">
<img src="pianopi.png" alt="pianotine">
</div>

<div class="element3">
<h3>Yaoi, Yuri, ...</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div>

ET en CSS

body
{
width: 760px;
margin: auto;
margin-top: 10 px;
margin-bottom: 20 px;
margin-left: 20 px;
background: grey;
text-indent: 10 px;
border-style: none;
}

#tete
{
width: 600px;
height: 300px;
background-repeat: no-repeat;
background: url(ban.png);

}

#menu
{
width: 120px;
margin-top: 50px;
margin-left: 30px;
position: absolute;
left: 35px;
bottom: 1px;
top: 100px
}

.element1
{
float: left;

}

.element2
{
clear: left;
position: absolute;
top: 1px;
left: 10 px;
}

J'ai pourtant annulé le float: left pour mettre une autre image mais celle-ci part vers la droite et j'arrive pas à la récupérer --"
Une réponse à ça s'il vous plait ^^ ?

Le problème c'est tu utilise le positionnement absolute.

C'est très "recommandé". Pas que ça marches pas, mais fait savoir comment fonctionne le CSS pour pouvoir l'utiliser correctement. aussi là :

#menu
{
width: 120px;
margin-top: 50px;
margin-left: 30px;
position: absolute;
left: 35px;
bottom: 1px;
top: 100px
}

tu peux virer les "margin" je crois (en absolute, pas besoin).

ensuite, supprimes le "bottom: 1px"

Ok merci, mais le deuxième icone , pourquoi reste-t-il à droite, et lorsqu'on le selectionne c'est avec un gros bloc qui englobe une partie du texte ...

euh… @_@

tu aurais une capture d'écran ? (postes là ici par exemple)

http://www.cijoint.fr/cjlink.php?file=cj200909/cijcPfFJcF.png

Voilà .. Ne prête pas attention à la couleur ou au contenu...

Je veux "seulement" pour remonter la bannière, et aligner à gauche les deux images, qui seront des liens.
Mais j'arrive pas à remonter la bannière --" , et je ne parle pas du menu ...

Voilà les feuilles

CSS

body
{
width: 760px;
margin: auto;
margin-top: 10 px;
margin-bottom: 20 px;
margin-left: 10 px;
background: grey;
text-indent: 10 px;
border-style: none;
}

#tete
{
width: 600px;
height: 300px;
background-repeat: no-repeat;
background: url(ban.png);

}

#menu
{
width : 148 px;
position: absolute;
left: 35 px;
top: 100 px;
}

#corps
{
margin-left: 110px;
margin-bottom: 20px;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

background: green;
background-repeat: repeat-x;
border: 2px solid black;
}

Et XHTML

<!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" >
<head>
<title>Pianotine
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="dessin" href="designpi.css" />

</head>
<body>

<div id="tete">

</div>

<div id="menu">

<div class="element1">
<a href="..." ><img src="accueilban.png" alt="accueil" /> </a>
</div>

<div class="element2">
<img src="pianopi.png" alt="pianotine">
</div>

<div class="element3">
<h3>Yaoi, Yuri, ...</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div>

Oui ça peut rebuter de voir tout ça --" ... Mais MERCI ^^

Je peut repositionner tout ça… Mais faut que je sache comment : c'est ça : http://www.cijoint.fr/cj200909/cijYEUnhH5.png

Oui sauf que le menu est plus vers la gauche, pour pas qu'il soit trop collé .

sinon comme ça c'est parfait, . Depuis ce matin j'ai fait quelques modifs, mais le menu est toujours hors de contrôle --" a l'instar de la bannière ><".

Voilà ce que j'ai réussi à donner ^^

http://www.cijoint.fr/cj200909/cijLMFcTZ1.png

Merci encore beaucoup ça me sauve de beaucoup d'heure perdues à galérer sur l'ordinateur ^^

Éssayes ça :

body
{
width: 760px;
margin: 10 auto 20 10;
background: grey;
text-indent: 10 px;
border: none;
}

#tete
{
width: 600px;
height: 300px;
margin: auto; /* pour le centrer sur la page */
background: url(ban.png) no-repeat;
}

#menu
{
width : 148 px;
float:left;
}

#corps
{
margin: 0 0 20 200px;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
background: green;
border: 2px solid black;
}

Et XHTML

<!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" >
<head>
<title>Pianotine</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="dessin" href="designpi.css" />
</head>

<body>
<div id="tete"></div>

<div id="menu">

<div class="element1">
<a href="..." ><img src="accueilban.png" alt="accueil" /></a>
</div>

<div class="element2">
<img src="pianopi.png" alt="pianotine">
</div>

<div class="element3">
<h3>Yaoi, Yuri, ...</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div> 

Hrrmm.. ça donne la même chose mais le corps est collé à gauche ><"

Tu pourrais me faire un fichier ZIP, avec le HTML, le fichier CSS, et les images afin que je regardes ça de plus prêt (avant j'avais rien testé).

tu peux poster le .zip sur le même site que les images (cijoint)

Voici : http://www.cijoint.fr/cjlink.php?file=cj200909/cijG9L4dFP.zip

Merci encore , encore... ^^'