Partage

Aidez moi je pige rien!

pour les images de fonds en css

1 2 >>

Clärk

15 juin 2006 à 21:17:56

Bonjour!

Voila je comprend rien j'ai des questions et surtouts des problèmes!

C'est quoi une arborescence?
Ensuite, mon problème: Voila je n'arrive aps a mettre une image de fond en css je ne sais pas trop comment il faut faire il faut mettre l'url du dossier dans laquelle elle se trouve je suppose mais il faut la mettre dans un dossier spécial?Que veut dire ../?Bref je suis un bon zer0 alors vous moquez pas merci on est sur le site du zer0

Anonyme

15 juin 2006 à 21:26:36

Salut

.

L'arborescence dans ton cas te sert à trouver le chemin du fichier. Voici l'adresse en local d'un fichier index.html (c'est-à-dire le fichier qui sert d'accueil à ton site

):
C:\site\index.html

Quand tu mets "../", cela veut dire que tu "remontes" d'un dossier dans l'arborescence par rapport au fichier dans lequel se trouve ce lien

.
Par exemple si tu as un fichier html qui se trouve dans le dossier "pages" de site web (avec l'exemple d'au-dessus), si tu veux faire un lien vers index.html, tu dois remonter d'un niveau et il faudra donc mettre "../index.html" pour le href de ta balise a.

Pour l'image il faut que tu inséres une ligne en CSS.
Exemple :

background: url("images/mon_image.jpg");

Ici ton image se trouve dans le dossier image et ton CSS se trouve au dessus de ce dossier

. Fais bien attention à la casse du nom du fichier ainsi qu'aux extensions

.

Au revoir.

Clärk

16 juin 2006 à 10:49:25

oui mais bon ça m'arrange pas trop! J'ai mon image mais je créer un dossier spécial?Dans notepad++?Dans autre chose?

nicmac

16 juin 2006 à 11:00:00

Si ton image est dans le même dossier que ton fichier .css, tu mets juste

background: url("mon_image.jpg");

Sinon, si tu la mets dans un dossier, tu fais comme Olybrius a expliqué, et comme c'est expliqué dans le tutorial de Matéo.

Notepad++ n'est qu'un éditeur de texte, tout comme Notepad, Wordpad, etc. Tu peux pas y créer de dossiers ou quoi que ce soit.

Clärk

16 juin 2006 à 11:08:16

en gros je creér un dossier image et je met le lien entier?Je peux pas la mettre d' a partir mes images directement?

aidez moi pitié je pige pas expliquez moi tout depuis le début plize!

Anonyme

16 juin 2006 à 12:16:25

Salut

.

Déjà saches que tu n'es pas obligé d'appeler ton dossier "images" bien entendu. C'est le nom que j'ai choisi pour l'exemple (et il me semble bien adapté

).

La propriété pour mettre une image en background est :

background-image:url("images/mon_image.jpg");

Ici, ton arborescence serait de ce type :

un dossier "site" (idem pour le nom

) qui contient le fichier index.html (donc le fichier XHTML), qui correspond à l'accueil de ton site, mais qui contient aussi le fichier CSS.
Dans le dossier "site" se trouve aussi un dossier "images" dans lequel se trouve tes images dont une qui porte le nom "mon_image" (utiliser des noms explicites est bien mieux au passage

) et qui est au format ".jpg", une extension du format JPEG.

Donc, ici, ton CSS se trouve dans l'arborescence "au-dessus" de l'image que tu dois insérer. En effet le dossier image est contenu dans le dossier "site".
Tu dois donc indiquer le chemin exact entre ton CSS et ton image.
Ici, pour le CSS, l'image se trouve un dossier "plus bas" et il faut lui indiquer. Tu indiques donc que l'image se trouve dans le dossier image. Ensuite tu mets évidemment le nom de l'image et son extension. Il faut bien faire attention à respecter la casse et l'extension ("jpeg" et "jpg" sont différents).

Voilà pourquoi tu devrais ici écrire dans ton CSS:

background-image:url("images/mon_image.jpg");

Tu pourrais très bien mettre tous les fchiers de ton site dans le même dossier mais c'est fortement déconseillé

. En effet tu te mélangerais vite.

Tu peux changer les noms des fichiers et des dossiers évidemment, mais il faut que cela soit cohérent avec ce que tu écris dans ton fichier XHTML et ton fichier CSS.

Pour inclure une image par un fichier CSS, il faut se dire que le principe est le même qu'avec un fichier XHTML, sauf que tu le chemin se fait par rapport au fichier CSS.
Je termine en te citant un extrait du cours de M@teo21 sur les images de fond.

Citation : M@teo21, cours de XHTML/CSS

Attention lorsque vous mettez une adresse en relatif dans le fichier CSS ! L'adresse de l'image doit être indiquée par rapport au fichier .css et non pas par rapport au fichier .html.
Ainsi, si votre site comporte 2 dossiers : "css" et "images", il vous faudra taper : "../images/fond.png" pour récupérer l'image de fond. Si vous ne mettez pas le chemin correct, votre image de fond ne s'affichera pas.

EDIT: Et je rajoutes que les "../" indiquent que l'on doit remonter d'un dossier. Dans l'exmeple de M@teo21 il y a un dossier "css" et un dossier "images" donc il faut "remonter" d'un dossier avant de "rentrer" dans le dossier images pour que la ligne dans le CSS fonctionne

.

Au revoir.

Clärk

16 juin 2006 à 12:21:45

bon, alors je vous dit mes noms de dossier et tout et tout parce que je ne vois pas trop a quoi ça correspond chez moi.
Bon, dabord, mon dossier notepad++ est dans programfiles.Ensuite, j'ai dedans un dossier site qui contient un dossier image et dans ce dossier image il y a une image jpeg qui se nomme nightwish donc pou la mettre je dois taper quoi exactement?

Anonyme

16 juin 2006 à 12:25:05

Salut

.

Où se trouvent tes fichiers CSS et XHTML?

Clärk

16 juin 2006 à 12:26:48

Euu les fichiers css et xhtml?? euu benn je sais pas mais jaurais du en creer ou il existent deja?Je sais je suis un gos zér0....

vegnagun

16 juin 2006 à 12:28:39

non regarde tu a un dossier site ou il t'es page de .html et dans se dossier site tu a un autre dossier (appeller sous-dosseir)et se dossier se nomme "images" et la tu tape le code qu'on ta donner plus haut mais en tu met se code la:

background-image:url("images/monimage.jpg");

"images" la ou se trouve ton image a piocher et "monimage"le nom de ton images facile non

et .jpg l'expentions

Clärk

16 juin 2006 à 12:34:07

attend attend...je comprend pas tout ce que tu dis lol donc j'ai juste a mettre ce code la dans le css c'est tout?
pfou ça commence a me gonfler cette histoire mon fichier ou yavé ecrit tout le html c'est barré je sais pas pourquoi, ça marche toujours pas, pfou ça m'enerve! :colere2:

Anonyme

16 juin 2006 à 12:48:03

Salut

.

Crées un dossier "site" sur ton disque dur, à la racine pour avoir une adresse du type "C:\site". Dans ce dossier tu places tes fichiers XHTML et CSS.
Tu crées un dossier "images" dans lequel tu mets ton image.
Ensuite dans ton CSS tu mes la ligne:

background-image:url("images/ton_image.jpg">

Tu mets le nom de ton image et son extension à la place de ce que j'ai mis.

Dis nous si ça fonctionne

Clärk

16 juin 2006 à 12:50:56

euu mais ils sont ou les fichiers xhtml et css c'est des dossiers ou c'est dans notepad qu'on els trouve enfin explique moi sinon le reste je comprend a peu près

Anonyme

16 juin 2006 à 12:59:46

Salut

.

Je te conseille de relire très attentivement les cours de M@teo21 même si tu sembles l'avoir fait bien sûr

tu devrais savoir ce que sont tes fichiers XHTML et CSS

.
Sinon on ne peut pas te dire où ils se trouvent c'est toi qui les as enregistré sur ton disque dur

donc tu peux regarder où ça enregistre quand tu fais "enregistrer sous" dans Notepad++ pour les trouver.

Clärk

16 juin 2006 à 13:16:06

ok merci je vais voir mais c'est vrai que je vais peut etre un peu vite dans le cour...bon je vais voir ou ça enregistre...
Pour l'instant j'ai bien trové le fichier css mais je cherche encore le fichier html il est plus la

Je cherche...
Oui c'est bon j'ai bien tout et maintenant hop tout a dans le dossier site...Je vais essayer le code on verra bien...
Snif non c'est toujours le fond blanc qui s'affiche

J'ai du me tromper quelque part mais je ne sais pas ou... o_O

pfou ça me gave

Anonyme

16 juin 2006 à 13:39:50

Salut

.

Maintenant vérifies que la casse est bien respectée et que l'extension de l'image est correcte aussi.

Clärk

16 juin 2006 à 13:47:57

Une petite question pour mettre une image de fonc c'esr pas comme pour inséré une image on doit juste mettre background-image dans css ou aussi dans xhtml ya un truc a mettre

Anonyme

16 juin 2006 à 13:57:23

Salut

.

Il te suffit de mettre dans ton CSS la ligne background-image:url(""); .
Je me permets de te rappeler que tu dois appliquer cette ligne à une balise, une class, un id ou autre. Ce dont tu veux modifier le fond

.
Exemple :

body
{
background_image:("le chemin de ton image");
}

Au revoir.

Clärk

16 juin 2006 à 14:06:21

Bah c'est bon ça devrait marcher alors :s

Anonyme

16 juin 2006 à 14:13:57

Salut

.

Ca ne fonctionne pas?

Peux-tu nous montrer tes codes

?
Détaille également les noms des fichiers et des dossiers s'il-te-plaît

Clärk

16 juin 2006 à 14:18:31

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>

<body>

<!–– L'en–tête ––>

<div id="en_tete">

</div>

<!–– Les menus ––>

<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Titre menu</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>

<!–– Le corps ––>

<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site!! !<br />
Vous allez adorer ici‚ c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :–D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes‚ on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken‚ ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah‚ c'est moi‚ quelle question :–p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs‚ de les rendre accros à mon site‚ puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait‚ j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>

<!–– Le pied de page ––>

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005‚ tous droits réservés</p>
</div>

</body>
</html>

Et le code css:

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("image/nightwish.jpg");
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("");
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

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

.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

/* Quelques effets sur les menus */

.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

/* Le corps de la page */

#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
background-image: url("images/motif.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */

border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

J'ai fait un copier coller des codes de M@teo21 mais je remplacrais par mes textes et tou quand ça marchera

Anonyme

16 juin 2006 à 14:26:32

Salut

.

Il manque un "s" à "images". Tu as écrit "image" et pas "images".

Voici le bon code :

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/nightwish.jpg");
}

Clärk

16 juin 2006 à 14:31:09

Ben je crois que c'est image sans "s" mais meme avec ce code ça ne marche toujours pas...

Anonyme

16 juin 2006 à 14:48:02

Salut

.

Comment s'appelle le dossier dans lequel se trouvent les images?

Clärk

16 juin 2006 à 15:25:35

Quelles images?J'en ai qu'une tu veux dire nightwish? Ben dans un dossier appelé "image" dans le dossie site...

Anonyme

16 juin 2006 à 15:27:35

Salut

.

Comment se fait-il que dans les autres chemins, pour les puces notamment, semblent être dans un dossier "images"? Les puces fonctionnent?
Sinon si le dossier est "image" alors ma remarque n'est pas utile au-dessus.

Clärk

16 juin 2006 à 15:59:00

Eu ben els puces fonctionnent mais pas les images "flottantes" je pesne que c'est parce que je n'ai aps l'image...

Anonyme

16 juin 2006 à 16:14:59

Salut

.

Oui effectivement il te faut l'image

.

Essaie ceci :

background:url("image/nightwish.jpg");

Clärk

16 juin 2006 à 16:25:14

Pfou non ça n'affiche toujours rien d'autre que le texte et le fond...blanc...Sa commence sérieux a m'enerver cette affaire! Quelqu'un n'aurait pas la solution?? Au secours

Anonyme

16 juin 2006 à 16:29:22

Salut

.

Tu peux donner l'arborescence exacte et les noms exacts de tes fichiers et dossiers?

1 2 >>