Aide CSS

exact^^, c'est bon merci.

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.

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

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;}

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

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?

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 */

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

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^^

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

C'est un bordel organisé disons…

plus je veux le ranger, moins c'est lisible…
Mais bon, moi je m'y retrouve^^

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

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.

ah d'accord, encore merci^^

oui.

par exemple si tu as dans le HTML :

<div class="un">
<div class="deux">
<div class="trois">
bla bla
</div>
<table class="deux">
…
…
</table>
</div>
</div>

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.

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

Ok,merci beaucoup!

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!

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?

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.