Bordure et image de fond !![Résolu]

[Nogi]

Bonsoir,

 

J’aimerais mettre une bordure (ex.: border: 9px groove #B3FFE0;) autour de mon image de fond ("../ur077.jpg"). J’ai fait qq tests, mais sans résultats. Qu'auriez-vous à me proposer?

 

L’image de fond étant déjà dans la section CSS, comment indiqué au navigateur que la bordure doit être effective pour l’image. Car si j'ajoute « border » à l'intérieur de body{ background: #001C0A .... ;}, évidemment, la bordure fait le tour du site, et non, l’image même. Ou alors, il ne me restera qu'à en créer une avec photoshop, mais j'aimerais mieux utiliser la fonction: « border: ».

 

Voici mon code CSS :

 

body
{
  background: #001C0A url("../ur077.jpg") center center fixed no-repeat;
  [color="#C0C0C0"]border: 9px groove #B3FFE0;[/color]  /* À ajouter pour l'image; "../ur077.jpg", mais où? */ 
  font-family: "Times New Roman", Garamond, Verdana, Georgia, serif;
  color: beige; /* Couleur de tous les textes */   
}

 

PS : Connaissez-vous un site de tutoriels simples pour la fabrication(astuces) d’image(s) .GIF ?

 

Merci!

 

Nogi

Modifié le 5 mai 2008 par Nogi

[Dylav]

Bonsoir Nogi,

 

Bordure d'une image de fond

D'après ta feuille de style, ton image de fond est positionnée au centre de l'écran et non répétée, de sorte que sa bordure ne coïncide pas avec celle de la fenêtre du navigateur.

 

Mauvaise nouvelle, l'attribut border s'applique bien au bord de la fenêtre concernée, et il n'existe pas d'option pour donner une bordure à l'image de fond elle-même. Il ne faut d'ailleurs pas considérer une image de fond comme une image à proprement parler, mais plutôt comme un motif destiné à remplir le fond de la fenêtre concernée (éventuellement par répétition style pochoir).

 

Tu vas donc devoir donner une bordure à l'image elle-même, à l'aide de ton produit de retouche de photos, afin d'en faire l'image de fond souhaitée.

 

Tutoriel GIF

Là, je ne dispose d'aucune information. Pourtant, c'est un sujet qui m'a tenté plusieurs fois, et je n'ai jamais pris le temps de chercher. J'espère que tu obtiendras ici une piste intéressante, sur laquelle je foncerai en même temps que toi !

[Nogi]

Bonjour Dylav,

 

Bordure d'une image de fond

D'après ta feuille de style, ton image de fond est positionnée au centre de l'écran et non répétée, de sorte que sa bordure ne coïncide pas avec celle de la fenêtre du navigateur.

Exact!

 

Et d'après ta réponse, j'aurais à retouché mon image de fond avec mon programme de photo(s). Un de mes amis m'a "obtenu" la version photoshop 8.0, justement cette semaine et cette fois-ci, j'ai la section Aide, que je n'avais pas avec mon ancienne version (6.0). J'ai jeté un oeil pour l'édition de photos en mode .GIF, ce pourquoi je demandais si qq'un connaissait un (ou des) tutoriel(s)! C'est pas grave, c'est Ok, j'aime bien approfondir ce genre de programme!

 

PS: J'ai aussi oublié de demandé dans mon 1er message si vous connaissiez, toi ou les membres du forum, un (ou des) site(s) qui traterait(ent) de modèles de curseurs(cursors) et de barres de défilement(scrollbars) déjà préétablis, ou à modifier soi-même, pour le XHTML / CSS?

 

Merci de ta réponse

 

Nogi

[Dylav]

Bonjour Nogi,

 

Curseur

L'attribut cursor peut être associé à tout objet de ta fenêtre. Par exemple, si tu désires donner au curseur l'aspect d'une main sur tout l'écran, tu décriras simplement body{cursor:pointer;}

 

Les principales valeurs de cursor sont,

- pointer : Curseur en forme de main avec l'index pointé,

- text : Curseur d'édition de texte,

- help : Curseur d'aide,

- wait : Curseur d'attente,

- progress : Curseur de progression,

- move : Curseur de déplacement,

- crosshair : Curseur en forme de croix.

 

Tu trouveras plus de détails par exemple ici.

 

Barres de défilement

C'est Microsoft qui a inventé la personnalisation des barres de défilement pour Internet Explorer. Les 7 attributs correspondants ne fonctionnent donc pas forcément avec tous les navigateurs. Ils ne font pas partie de la norme définie par le W3C, et il est donc plutôt déconseillé de les utiliser.

 

Pour expliquer les 7 attributs scrollbar-face-color, scrollbar-shadow-color, scrollbar-highlight-color, scrollbar-3dlight-color, scrollbar-darkshadow-color, scrollbar-track-color et scrollbar-arrow-color, un petit dessin vaudra mieux qu'un grand discours (merci Jacorre.com). Par exemple, body{scrollbar-face-color:black;}

[Nogi]

Bonsoir Dylav,

 

Merci pour les infos à propos des curseurs!

 

Pour ce qui est de la barre de défilement, je prends note que ce n'est pas conseillé. Mais par curiosité personnel, j'ai tout de même essayé ceci, mais ça ne fonctionne pas! Quel serait mon erreur!

 

body
{   
  scrollbar-track-color: #F75D28;
  scrollbar-face-color: #005424;
  scrollbar-3dlight-color: #00EBC1;
  scrollbar-highlight-color: #00D548;
  scrollbar-darkshadow-color: #000000;
  scrollbar-shadow-color: #004321;
  scrollbar-arrow-color: #001989;
}

 

À+

 

Nogi

[Dylav]

Bonjour Nogi,

 

Tout d'abord, je te promettais une image, que j'ai hébergé chez MaBuL, justement devenu indisponible depuis hier (j'espère que ça ne va pas trop durer). Voici l'adresse où je l'ai empruntée : tu vas voir que c'est très clair.

 

Maintenant, comme ces attributs ne sont pas conformes à la norme édictée par le W3C, ils ne sont pas garantis marcher avec tous les navigateurs. En particulier, il est clairement annoncé que ça ne fonctionne pas avec FireFox. Désolé.

 

Si en revanche tu veux voir comment ça pourrait être si tant beau, essaie avec Internet Explorer, ça marche très bien. Et c'est rageant de devoir conserver ces tristes barres grises...

[Dylav]

Le code (avec les couleurs) que j'ai mentionné dans le message est celui que j'ai trouvé et utilisé sur notre site MySpace cet hiver. C'est aussi celui-là même que j'ai essayé, ces jours-ci, à titre expérimental et qui ne semble pas fonctionner, bizarre ! Serait-ce du fait que j'ai IE6, car il est écrit et disposé exactement comme dans mon message précédent (j'ai même mis mes lunettes pour être certain, aucune couleur sélectionnée) ?

J'étais tellement persuadé que ces attributs de couleur de scrollbar fonctionnaient [uniquement] avec Internet Explorer que je n'ai pas prêté garde à la remarque de ton dernier post, convaincu que tu tentais de les mettre en œuvre sur un autre navigateur.

 

Ton mail de cette nuit m'a donc intrigué et, effectivement, ça ne marche pas non plus avec IE6 quand on les affecte au tag body. Or je sais que ça marche ! Alors j'ai essayé de remonter d'un cran dans la hiérarchie, en l'affectant au tag html.

Miracle... le mot est circonstancié, car nous parlons d'Internet Explorer !

 

html
{   
  scrollbar-track-color: #F75D28;
  scrollbar-face-color: #005424;
  scrollbar-3dlight-color: #00EBC1;
  scrollbar-highlight-color: #00D548;
  scrollbar-darkshadow-color: #000000;
  scrollbar-shadow-color: #004321;
  scrollbar-arrow-color: #001989;
}

Mais ça ne fonctionne toujours pas sous FireFox...

[Invité nogi67]

Eh Oui! Ça fonctionne avec le tag html.

 

Merci de vos réponses et désolé pour ma réponse tardive!

 

À une prochaine!

 

Nogi

[Nogi]

Eh oui! Ca fonctionne. J'étais simplement curieux côté CSS.

 

Merci de vos réponses et désolé de ma réponse tardive!

 

Nogi

 

html
{   
  scrollbar-track-color: #F75D28;
  scrollbar-face-color: #005424;
  scrollbar-3dlight-color: #00EBC1;
  scrollbar-highlight-color: #00D548;
  scrollbar-darkshadow-color: #000000;
  scrollbar-shadow-color: #004321;
  scrollbar-arrow-color: #001989;
}