Aide CSS Résolu

Question

Bonjour,je veux créer un site WEB,bien sur je suis des cours de XHTML et CSS, c'est là le problème,
pour mettre une image en fond d'écran du site je crois que c'est
body
{
   background-image: url("../project/skull.JPEG");
}

sauf qu'on ouvrant mon browser(Google chrome) elle n'est pas affichée.
Merci d'avance!

resalut · Answer

1) est tu sur du lien 
2)vire les "" dans url("")

-rochdi- · Answer

Salut, merci pour la réponse,mais ça marche pas,voilà ce que j'ai mis exactement
body
{
   background: url(C:\Documents and Settings\khalikine\Bureau\Nouveau dossier\skull.jpeg);
}

et l'image c'est celle de mon profil
Merci

resalut · Answer

normal sur ton serveur ya pas de disque C

-rochdi- · Answer

là je ne fais qu'appliquer des cours je n'ai toujours pas de site

resalut · Answer

et evite les espaces dans les noms de fichiers ou de dossier (nouveau dossier/)

-rochdi- · Answer

et voilà le texte html peut-être l'erreur provient de là Page d'exemple pour tester le CSS

Découverte du CSS

Bonjour !
Je suis une page XHTMLapparemmentbanale, mais je sers en fait de test de fichiersCSSpour les tutoriels duSite du zéro

Ce n'est que du blabla

Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : C'est un petit pas pour l'Homme, un grand pas pour l'Humanité
J'aime la choucroute en conserve.
Vive les frites !

Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)

gulliverne · Answer

Bonjour,
J'aimerais mettre une bannière fixe en haut de mon site et qu'elle reste fixe même si le texte en dessous est plus long que l'écran et qu'on le fait défiler. En CS3 j'ai mis mon div en positionnement fixe, mais quand je regarde ce que cela donne sur internet, le texte qui devrait se trouver en dessous de ma bannière se trouve par dessus! 
Qu'est-ce que je dois changer?
Merci de votre aide
Gulliver

-rochdi- · Answer

tu devrais créer un topic ><

-rochdi- · Answer

Merci le hollandais volant pour ton aide, mais ça ne marche toujours pas, dans les propriétés de l'image elle est JPEG, j'ai essayé ton truc ça marche pas. 
j'ai mis exactement ça

body
{ background: url(C:\Documents and Settings\khalikine\Bureau\image\skull.JPEG) no-repeat; }

Ne dois-je pas mettre des ""?

Dalida · Answer

salut,

mets ton images dans le même dossier que ton fichier CSS (ou HTML) et utilise :
background: url(skull.JPEG) no-repeat;
et vire les majuscules des noms de fichiers (dans le code et dans le nom du fichier sur le disque dur).

-rochdi- · Answer

Merci dalida, mais ça ne marche toujours pas, et ne fait je croyais que c'était background-image mais même avec ça marche pas..

le hollandais volant · Answer

salut^^

Ce n'est pas parce que c'est marqué JPEG dans la fenêtres des propriétés de l'image indique "JPEG" que l'extension est JPEG. En général, l'extension est "JPG" (en minuscule)

Il faut mettre comme c'est dans le nom du fichier. Il faut afficher les extensions du fichier : "outils" > "Options des dossiers" et décoches "masquer les extensions dont le type est connu".

Dalida · Answer

+1 pour le hollandais.

si ça ne fonctionne pas, fais nous un copier/coller de l'adresse qui est dans la barre d'adresse de ton navigateur quand tu affiches ta page, stp.

-rochdi- · Answer

Salut, merci pour ta réponse mais ça ne marche toujours pas j'ai mis exactement
body
{
background-image: url(skull.JPG) no-repeat;
}

-rochdi- · Answer

là voilà :file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/essai.html

Dalida · Answer

essaie avec :
file:///C:/Documents%20and%20Settings/khalikine/Bureau/roch­di/project/skull.JPG
et dis nous ce qui s'affiche.

-rochdi- · Answer

Page web introuvable

graffx · Answer

tu as pas un souci de / dans ton chemin?

-rochdi- · Answer

Non puis que je ne fais que fichier/ouvrir et je choisis mon fichier

le hollandais volant · Answer

Faut pas mettre de chemin absolu. Jamais.

retente celà : 

body
{
background-image: url(skull.JPG) no-repeat;
} 


mais avec "background" (sans le "image")

et éssayes en ligne (au moins le "body {" 
je doute que ce dernier point change mais tentes ;-)

Dalida · Answer

Page web introuvable
donc…

&bull; soit ton fichier image n'est placé au même endroit que ta page HTML (ou CSS si fichier CSS à part), comme je te disais plus haut ;

&bull; soit le fichier image n'est pas nommé comme il faut, cf. l'intervention du hollandais volant.

-rochdi- · Answer

En fait dans le même dossier y'a le fichier html le fichier CSS et l'image et je l'ai renommé moi même skull pour m'assurer

le hollandais volant · Answer

peux tu nous poster le contenu du fichier HTML : le moment ou tu importe le fichier CSS?

-rochdi- · Answer

Bien sur,le fichier html c'est: Page d'exemple pour tester le CSS

Découverte du CSS

Bonjour !
Je suis une page XHTMLapparemmentbanale, mais je sers en fait de test de fichiersCSSpour les tutoriels duSite du zéro

Ce n'est que du blabla

Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : C'est un petit pas pour l'Homme, un grand pas pour l'Humanité
J'aime la choucroute en conserve.
Vive les frites !

Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)

et le fichier CSS est body {background-image: url(skull.JPG) no-repeat;} merci

le hollandais volant · Answer

Regardes ce que j'ai dans mon fichier CSS de mon site : #ubuntu { background: #000030 url('index/Ubuntu.png') no-repeat 1px 4px;} La couleur de fond sera légèrement bleu, le fichier sera Ubuntu.png (notes la majuscule qui est aussi là dans le nom du fichier. Sinon çane marches pas. No repeat, c'est pour n'afficher le fichier qu'une fois. les 1px 4px, c'est pour un décallage (toi tu ne dois pas en avoir besoin. Aussi, est-ce que "Body" peut avoir un "background"? Éssayes avec avec un

qui fait toute la feuille^^

-rochdi- · Answer

Tout ce que je sais sur

c'est qu'elle est une balise block je crois, je ne connais toujours pas peux-tu me dire ou la mettre?merci

le hollandais volant · Answer

← ce que je met. Euh, c'est quoi ces atributs : "title" dans les CSS??? J'ai jamais vu ça^^ Et le "media screen" n'est pas indispensable non plus^^

-rochdi- · Answer

ah c'est bon ,je viens de télécharger Nvu et j'ai vu la source je devais mettre des guillemets,enfin ça a donné ça
body {background: url("file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/skull.jpg") ;}
reste un seul souci l'image est affiché en mosaïque,comment faire pour l'afficher correctement?

le hollandais volant · Answer

Je viens de tester même avec body.
Aucun souci.

Je crois que cela vient des noms des fichiers. Il faut respecter majuscules et minuscules et espaces très précisément.

Aussi, l'extension serait mieux en minuscule partout (fichier et dans le CSS).

Je viens de tester avec une image jpg, gif, ou png : ça marche tout.

-rochdi- · Answer

Merci tout le monde encore, et juste une dernière chose le chemin affiché sur la barre c'est 
C:\Documents and Settings\khalikine\Bureau\rochdi\project
alors que dans le fichier CSS je devais mettre 
file:///C:/Documents%20and%20Settings/khalikine/Bureau/rochdi/project/skull.jpg
comment savoir quel chemin mettre?
Encore merci tout le monde,merci le hollandais volant^^

le hollandais volant · Answer

CF poste 33.

Utilises les chemins RELATIFS.

Placers les fichiers les un par rapport aux autres. Pour prendre une image se trouvant dans le même dossier, tu met juste url(image.ext)

pour l'image se trouvant dans un dossier parent : url(../image.ext)
Pour une image dans un dossier 'index' du dossier parent : url(../index/image.ext)

Pour une image dans un dossier 3 niveau au dessus : url(../../../image.ext)

etc.

-rochdi- · Answer

Ok, merci beaucoup, mais là elle ne prend que les 3/4 de l'arrière-plan comment faire pour qu'elle couvre le tout?

le hollandais volant · Answer

Ok. Ça marche sans les guillemets? Et le chemin relatif?


Sinon, ça ça dépend de l'image. Souvent on utilise une image en forme d'une fine bande verticale puis on le répète sur toute la page.

Tu peux mettre : 

body {background: url("skull.jpg") no-repeat center ; } 

cela centrera l'image. Mais je sait pas si on peut mettre "justify" ou "stretch" pour l'étirer (???).

Le mieux serait de prendre une grande image, la centrer. Car ainsi, cela ne gênerais pas les écrans avec une petite résolution (genre les netbook, qui sont très en vogue. ou pire : les iPhones ou dans ce genre.).

De nos jours, tout cela est à prendre en compte. Aussi, l'image ne soit pas faire 2Mio. Au plus 100Kio. Grand maximum.

comme il est au format Jpeg, tu peux choisir la qualité. En générale, entre 100% et 40%, il n'y a aucune différence de qualité visible. Alors que la taille peut être divisée par 10.
Penses-y.

Au final, on se retrouve avec une lourde équation avec des dizaines de paramètres, mais on y arrive!

-rochdi- · Answer

Ok,merci beaucoup!

-rochdi- · Answer

Au fait, pour Class, je ne suis pas obligé de mettre un point dans le fichier CSS?

le hollandais volant · Answer

oui. par exemple si tu as dans le HTML :

bla bla

… …

dans le CSS, tout ce qui est en ".deux" sera appliqué à ce qui aura "class="deux"" que ce soit div, table ou autre. si tu veux faire un objet unique avec "header", on utilise id="deux" (dans le CSS : #deux), mais là, un seul objet peut avoir ce ID.

-rochdi- · Answer

ah d'accord, encore merci^^

le hollandais volant · Answer

voici quelques astuces : 

si tu as un div avec 2 table dedans (un table class "un" et un table class "deux").

tu fera en CSS : 
.un {……}
.deux {……}

mais, si tu veux applique certains attributs (le même) aux deux tableaux, tu peux faire :

soit les répéter dans chacune des lignes du CSS (c'est mal, lourd est pas bien)
soit faire :

.un, .deux {………}(séparation des noms par une virgule puis un espace pour signifier que l'on appliquer les attributs au deux classes.)

cela appliquera aux class "un" et "deux" à la fois. Ceci est d'une praticité extrême. Si tu regardes vers la fin de mon fichier styles de mon site LÀ, tu verra.

Ensuite, imagine que tu ais un div class="six" avec un table et dedans un autre div, puis un autre div.
Si tu veux appliquer un CSS à div à l'intérieur, soit tu lui donnes un "class" particulier, soit :
.six div {……}(séparation par un espace, pour indiquer que l'on prend tous les "div" dans ce div (fils, petit-fils, etc)

Ainsi, tous les div dans les objets de class "six" aurant les couleurs, formes définis par le CSS. (que ce soit le premier "sous div" ou le second "sous div"

Si tu veux appliquer au premier sous div :
.six > table > div {……} (un ">" pour signifier que l'on ne prend que les div "fils" pas "petit-fils" (évidement, ici c'est de manière récursive))
Celà appliquera uniquement au premier sous div.
par contre :
.six > table > div > div {……}ou.six div > div {……} (ici on combine les 2 pour aller où l'on souhaite.)

N'appliquent que au second sous div.
notes que si tu as plusieurs "class="six"", la second appliquera les styles à tous les div de rang deux de tous les div de class "six", alors que le premier n'appliquera les styles que aux div de rang 2 dans les "table" d'un div de class="six"…

Si tu veux apprendre d'autres choses, je t'invite à explorer mon fichier "index.css". Y'a à peu prés de tout.

-rochdi- · Answer

Merci beaucoup pour ces conseils ;), juste un truc ton index est un peu désordonné, non?

le hollandais volant · Answer

C'est un bordel organisé disons…

plus je veux le ranger, moins c'est lisible…
Mais bon, moi je m'y retrouve^^

-rochdi- · Answer

et dans notepad comment savoir si je me suis trompé..si c'est possible?

le hollandais volant · Answer

Euh…

Avec le validateur Css du W3C^^

http://jigsaw.w3.org/css-validator/#validate_by_input

sinon, installes un autre notepad, comme "natepad ++" il mettre des couleurs dans les syntaxes CSS et HTML : tu t'y retrouvera bien mieux^^

-rochdi- · Answer

en effet c'est le ++ que j'ai je crois que rouge c'est faux, vert c'est bon

-rochdi- · Answer

roooh, ça m'énerve c'est quoi le problème là? la couleur du fond n'est pas affichée...

body 
{
   width: 760px;
   margin: auto; /*Pour centrer notre page */
   margin-top:20px; /* pour éviter de coller avec le haut de la fenêtre du naviguateur */
   margin-bottom: 20px /* Idem pour le bas....*/
   background-color: red;
    /* Une petite image pour le fond */

le hollandais volant · Answer

Pas de panique :

J'avais le même problème. Il semblerais qu'il y ait conflict entre le "background-color" et l'image de fond. Peux tu tout poster pour "body", je veux dire aussi ce qui concerne l'image de fond?

-rochdi- · Answer

bah c'est clair qu'on ne peut afficher une couleur en même temps qu'une image,j'ai enlevé l'image c'est tout pour body

le hollandais volant · Answer

bien sur que si on peut^^

regardes sur mon site : tu vois les menu déroulants? La couleur est blue foncé, l'image de fond est aussi par exemple le logo Ubuntu, le dessin windows ou le Pikachu!!

De même pour les titres violet ou vert : la couleur (vert ou violet) est désigné par une couleur alors que l'image est un dégradé de gris transparent! D'où l'éffet de violet dégradé!!

Ne perd pas espoir :

voilà ce que je met pour mettre une couleur et une image : un attribut "background" avec une couleur, un espace puis l'image (et le "no repeat" et autres décalages) :

#tutoriels { background: #000030 url('index/tuto.png') no-repeat 1px 4px;}

-rochdi- · Answer

Ok, alors c'est quoi le problème, en fait quand j'enlve les autres balises CSS : margin,wdith.... ça marche

Dalida · Answer

salut,

si le code c'était :
body
{
width: 760px;
margin: auto; /*Pour centrer notre page */
margin-top:20px; /* pour éviter de coller avec le haut de la fenêtre du naviguateur */
margin-bottom: 20px /* Idem pour le bas....*/
background-color: red;
/* Une petite image pour le fond */ 
il manque le point virgule au bout de la règle margin-bottom, donc ça annule tout ce qui suit pour ce sélecteur.

-rochdi- · Answer

exact^^, c'est bon merci.

Aide CSS

50 réponses

Newsletters