Aller au contenu

Feuille de styles


DCO

Sujets conseillés

Bonjour,

Quand je veux mettre une image en fond de page, avec Dreamweaver 4, cette image est répétée horizontalement et verticalement.

Je voudrai que cette image soit centrer sur la page verticalement et horizontalement, quelle soit fixe et non dupliquée.

Je voudrai faire une feuille de style css afin de pouvoir inclure cette feuille dans une ou plusieurs page HTM.

J'ai essayé en faisant un style.css mais rien n'y fait.

Comment faire?

Merci pour votre aide.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour DCO, et bienvenue à bord !

C'est simple si tu utilises les CSS !

Exemple

<style type="text/css" media="all">
.imagefond {
   background-image:url('fichierimage.gif');
   background-position: center center;
   background-repeat: no-repeat;
}
</style>

Et tu appelles ton élément avec class="imagefond"

Dan ;)

Lien vers le commentaire
Partager sur d’autres sites

ou mieux encore, dans une feuille de style externe en utilisant la balise link :

<link rel="stylesheet" media="screen" type="text/css" href="style.css" />

Tu peux également utiliser la syntaxe suivante, qui est un peu plus économe (même si celle de Dan est correcte également, quoi que plus longue) :

.imagefond {background:url('fichierimage.gif') center center no-repeat;}

Par contre, dans un tel cas (CSS externe), tu n'utilises pas non plus les balises <style>.

Lien vers le commentaire
Partager sur d’autres sites

Ne pas utiliser les quote ou guillemet est encore mieux car souvent origine de bugs sur certains navigateurs. Il n'ont d'ailleurs aucune utilité pour les images de background, donc autant ne pas les mettre, on s'evite des surprises ;)

Lien vers le commentaire
Partager sur d’autres sites

Merci pour vos réponses,

J'ai essayé le code de Dan mais cela ne marche pas.

Si ça ne marche pas c'est que je me suis trompé (vraiment pas doué le mec).

Donc je reprend depuis le début:

Pour faire une feuille de style et l'insérer dans une page comment faut-il faire?

Lien vers le commentaire
Partager sur d’autres sites

J'ai essayé le code de Dan mais cela ne marche pas.

Pourtant, si tu as remplacé le nom de 'fichierimage.gif' par le nom de ton fichier image, ça doit marcher !

Eventuellement, tu peux enlever les simples quotes... comme suggéré plus haut.

Dan

Lien vers le commentaire
Partager sur d’autres sites

Si tu veux créer un fichier séparé pour contenir tes styles CSS, enlèves les balises <style...> et </style> et mets le reste dans le fichier nommé "style.css".

Envoies ce fichier en mode "texte" par ftp.

Dans ta page HTML, appelles ce fichier avec un

<link rel="stylesheet" media="screen" type="text/css" href="style.css" />

pour autant que ton fichier s'appelle style.css bien sûr et qu'il se trouve dans le même répertoire que ta page ;)

Dan

Lien vers le commentaire
Partager sur d’autres sites

Suivant vos conseils voici le code utilisé:

<html>

<head>

<title>Fond</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" media="screen" type="text/css" href="style.css" />

</head>

</body>

</html>

J'ai crée le style avec la fonction de dreamweaver créer nouveau style css

Lien vers le commentaire
Partager sur d’autres sites

Et ça fonctionne ?

Accessoirement, tu pourrais inverser tes balises <title> et <meta>... question de définir ton charset AVANT d'envoyer du texte au navigateur. clindoeil.gif

Lien vers le commentaire
Partager sur d’autres sites

Et ça fonctionne ?

Accessoirement, tu pourrais inverser tes balises <title> et <meta>... question de définir  ton charset AVANT d'envoyer du texte au navigateur. clindoeil.gif

Cela me semble sensé... je vais corriger sur le Hub aussi :)

Lien vers le commentaire
Partager sur d’autres sites

Cela me semble sensé... je vais corriger sur le Hub aussi :)

Curieux quand même que la pratique ne soit pas plus répandue... c'est très rare de trouver des tutoriels qui pensent à la mentionner.

He non ce la ne fonctionne pas. POURQUOI???????

Que de détresse dans ce cri du coeur. Pas de panique, on va trouver ! :D

1. Ton fichier css s'appelle bien style.css ?

2. Est-il bien au même niveau que ton fichier html ?

3. Y a t-il du contenu dans le body de ta page, question que tu puisse voir ton background ?

Commençons avec ça... ^_^

Lien vers le commentaire
Partager sur d’autres sites

Ce matin je viens de m'appercevoir que ce style s'applique uniquement sur les pages ou il n'y a que du texte, sur les pages ou il y a des tableau l'image de fond et coupée et dupliquée en autant de ligne que comporte le tableau. Suis-je clair?

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...