Titre: " background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 25-04-2008 a 17:27:00
slt
J'ai cherche sur le net pour savoir comment ne pas multiplier une image de fond de page, dans Dreamweaver MX. J'ai vu qu'il faut mettre background-repeat: no-repeat dans la balise body. Donc j'ai rajoute dans le code :
Code:
| <body background="elements-du-site/accueil/fond-et-dessin.png" background-repeat: no-repeat> |
|
Mais ca ne marche pas :-\
Merci pour votre aide. |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Netah le le 25-04-2008 a 18:13:54
Code:
| <body STYLE="background-image: url(elements-du-site/accueil/fond-et-dessin.png); background-repeat: no-repeat"> |
|
C'est quand meme mieux de mettre tout ca dans un fichier css séparé |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 25-04-2008 a 19:21:43
| pourquoi dans un fichier CSS ??? |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 29-04-2008 a 13:38:00
tu peux essayer déjà de corriger l'erreur suivante :
remplacer :
<body background="elements-du-site/accueil/fond-et-dessin.png" background-repeat: no-repeat>
par :
<body style="background-repeat: no-repeat; background-image: url(elements-du-site/accueil/fond-et-dessin.png);">
Il vaut mieux en effet mettre tes styles sur une feuilles de style séparée, que tu appelles depuis ta page html avec :
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
Dans ta feuille de style tu indiques :
body {
background-repeat: no-repeat;
background-image: url(elements-du-site/accueil/fond-et-dessin.png);
}
Et dans ta page html tu laisses le tag body vide comme ceci:
<body>
|
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 03-05-2008 a 23:04:14
me suis penche sur la creation de feuille de style dans dream. Depuis le temps... ;D
Le probleme c'est que ca met l'image en fond de ligne et pas de la page :
[url=http://www.servimg.com/image_preview.php?i=37&u=11052768]
Le dessin qu'on devrais voir c'est le meme qui se trouve dans le logo en haut sous le titre TXIN TXIN.
Voila le code de ma feuille de style fond-de-page.css
Code:
.fond-de-page {
font-family: "Comic Sans MS";
font-size: 10pt;
color: #FFFF00;
background-image: url(elements-du-site/accueil/logo-arriere-plan.png);
background-repeat: no-repeat;
background-position: center center;
}
|
|
Et celui de ma page HTML :
Code:
//-->
</script>
<style type="text/css">
<!--
@import url("fond-de-page.css");
-->
</style>
</head>
|
|
Je comprend pas pourquoi ca fait ca. |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 04-05-2008 a 10:05:45
Tu crées une feuille de style distincte pour chaque élément de ton site ?
essaie de placer ta classe "fond-de-page" dans le premier conteneur, celui qui englobe tous les éléments, peut-être dans la balise <body> si tu veux que cela se mette en fond de page. Mais inutile de mettre une classe à body.
Dans ton exemple on dirait que ta classe "fond-de-page" se trouve dans les paragraphes (<p>)
Essaie de remplacer :
.fond-de-page {
font-family: "Comic Sans MS";
...
par :
body {
font-family: "Comic Sans MS";
...
}
et de retirer la classe "fond-de-page" dans tes balises <p> |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 10:38:37
Tu crées une feuille de style distincte pour chaque élément de ton site ?
|
|
Non mais la c'est pour me faire la main que j'ai fait les reglage juste pour le logo en fond. Apres je ferais une feuille de style pour la police et pour les autre pages.
essaie de placer ta classe "fond-de-page" dans le premier conteneur, celui qui englobe tous les éléments, peut-être dans la balise <body> si tu veux que cela se mette en fond de page. Mais inutile de mettre une classe à body.
Dans ton exemple on dirait que ta classe "fond-de-page" se trouve dans les paragraphes (<p>)
Essaie de remplacer :
.fond-de-page {
font-family: "Comic Sans MS";
...
par :
body {
font-family: "Comic Sans MS";
...
}
et de retirer la classe "fond-de-page" dans tes balises <p>
|
|
J'ai pas tout compris mais je me penche dessus pour comprendre. Ca me permettra d'apprendre :) |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 04-05-2008 a 10:43:38
par conteneur je veux dire un bloc, par exemple body, div etc...
<body>
<div>
<p></p>
<p></p>
</div>
</body>
Ici le premier conteneur est body. Si tu mets ton background dans les balises <p> il n'apparaitra pas dans les div ni dans le body. Ton but est de le placer en fond de page donc il te faut le mettre dans le body. |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 11:18:52
Ca marche !!!! Essaie de remplacer :
.fond-de-page {
font-family: "Comic Sans MS";
...
par :
body {
font-family: "Comic Sans MS";
...
}
et de retirer la classe "fond-de-page" dans tes balises <p>
|
|
J'ai retire la classe fond-de-page dans mes balises <p> et l'image de fond de chaque ligne a disparu. J'avais modifie fond-de-page par body mais en fait que se soit l'un ou l'autre ca marche quand meme.
essaie de placer ta classe "fond-de-page" dans le premier conteneur, celui qui englobe tous les éléments, peut-être dans la balise <body> si tu veux que cela se mette en fond de page. Mais inutile de mettre une classe à body.
|
|
J'ai donc mis la classe fond-de-page dans la balise <body> comme ca :
Code:
<body bgcolor="#990000" class="fond-de-page" onLoad="MM_preloadImages('elements-du-site/accueil/bouton-contact-02.png','elements-du-site/accueil/bouton-liens-02.png','elements-du-site/accueil/bouton-catalogue-02.png')">
|
|
et mon image de fond est apparu dans ma page. Je crois que j'ai compris pourquoi la classe fond-de-page c'etait inserer dans les balises <p>. Quand j'ai cree mon style, dans la 1ere fenetre, a Type de selecteur j'avais coche Classe. J'aurais du cocher Balise et dans la liste deroulante choisir Body. J'ai pas essayer mais ca doit etre ca. La je doit bouger, donc j'essairais plus tard. Sauf si tu me confirme que c'est bien ca. |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 04-05-2008 a 11:35:09
Je pense que ça doit être ça. Mais moi je n'utilise pas de logiciels style dreamweaver, je trouve plus agréable de tout faire soi même ^^ On comprends mieux comment ça se passe et puis le code est plus léger et propre aussi.
C'est pareil avec ou sans classe dans body mais comme il n'y a qu'un seul body la classe est un peu inutile. Une classe permet de différencier une balise d'une autres. Il y a aussi l'identificateur id mais lui doit rester unique sur ta page.
Dans ton body retire bgcolor="#990000" et met le dans ta feuille de style :
background-color : #900; |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 17:55:09
| ha ben oui c'est vrais que la couleur de fond de page je dois la mettre dans la fueille de style. Maintenant que c'est beucoup plus claire pour moi les feuille de style je vais les utiliser pour ce site, mais aussi pur d'autre que j'ai deja fait (dont le mien). |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 19:21:16
l'image ne se centre pas horisontalement et verticalement j'ai mis une position personnalise (100pixel) mais ca ne bouge pas :-\
Voila le code :
Code:
.fond-de-page {
font-family: "Comic Sans MS";
font-size: 10pt;
color: #FFFF00;
background-image: url(elements-du-site/accueil/logo-arriere-plan.png);
background-repeat: no-repeat;
background-position: center 200px;
background-color: 990000;
}
|
|
|
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 04-05-2008 a 19:32:48
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 19:36:10
pour la position horisontale c'est ok, mais verticalezment ca na pas bouge. C'est mieux de mettre en pourcentage plutot qu'en centimetre ou pixel ? |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 04-05-2008 a 19:38:37
| en pixels c'est absolu, tandis qu'en % c'est relatif. Si tu modifies la dimension de ta fenetre en pixels le fond ne sera plus centré. |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 19:47:28
| Ha oui c'est vrais ! pour les tableaux je met les dimension en pourcentage. Pour la position horisontale j'ai mis en % et pour l'horisontale en pixel. J'ai pas compris pourquoi, mais pour la position verticale, l'image c'est bien place quand j'ai rajoute des lignes. Je pense que je suis paré pour faire d'autre feuille de style ;D. Une derniere question : il faut obligatoirement mettre la fueille de style dans le meme dossier que le dossier avec lequel elle est attache ? j'ai vu ca sur un site. Je trouve quand meme zarbi car le CSS c'est fait pour alleger et etre utiliser avec plusieurs page et que les modifs se fasse plus facilement. C'est pas logique. |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: Izanagi le le 04-05-2008 a 21:33:23
non pas du tout il est même conseillé de mettre tes feuilles css dans un dossier à part nommé par exemple /css
Cela fonctionne comme n'importe quelle page tant que tu indiques le bon chemin en relatif dans ton code.
par exemple href="css/styles.css" ou href="../css/styles.css" ou href="../../../../css/styles.css" lol, suivant le dossier ou est situé ta page.
n'hésite pas si tu as d'autres questions. par email aussi akuphil@gmail.com |
Titre: Re:" background-repeat: no-repeat " ne marche pas
Posté par: nenex-eh le le 04-05-2008 a 21:43:32
| C'est cool. Je note ton mail car ya des chance que j'ai d'autres questions ;D Je comence a decouvrir le CSS et a voir comment ca fonctionne. Ca devient un peu plus clair. Depuis le temps que je voulais me pencher dessus ::) ;D . J'avais vu sur certain site mais je trouvais tres complique. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|