Insertion d'image et bordures de l'image

[Nenex]

Slt

Je voudrais inserer une images dans ma page et lui mettre une bordure. J'ai utiliser background-image et pour la bordure (couleur et epaisseur) boder. Seulement ca me met la bordure sur toute la ligne (l'image etant en fond) .

Voila mon CSS pour l'image :

.titre-accueil {
	background-image: url(../elements-des-pages/titres-pages/titre-accueil.png);
	background-repeat: no-repeat;
	background-position: 50%;
	height:45px;
	border-color:#000000;
	border-style:dashed;
	}

Je n'arrive pas a trouver comment faire pour cette bordure

Merci d'avance pour vos lumieres.

[Nenex]

J'ai trouver. En fait je doit rajouter width et lui mettre la largeur de l'image (comme pour height avec la hauteur... logique ).

Sauf que ca me met l'image completement a gauche, alors que background-position est a 50%.

Modifié 26 Février 2009 par Nenex

[Dudu]

Salut

Tu ne peux pas mettre une bordure autour d'une image d'arrère-plan. Il faudra que tu trouves un autre moyen.

Au choix:

- retoucher l'image dans un logiciel adéquat pour lui mettre naturellement une bordure

- insérer l'image dans le code HTML et lui mettre la bordure par la CSS

- utiliser un éventuel élément enfant de <xyz class="titre-accueil"> (d'ailleurs, quelle balise utilises-tu ?) pour le styler en CSS

- modifier entièrement ton code HTML dans le cas où la balise <xyz class="titre-accueil" ne contient que cette image

Le meilleur choix parmi ceux-là ? Ça dépend complètement de ta page.

Tu aurais une petite URL à nous communiquer pour qu'on jette un oeil ?

[Nenex]

Alors pourquoi le fait de mettre height et width ca me met une bordure ?

[Dudu]

Parce que par défaut c'est à 100% donc ça prend tout la page.

Alors qu'en définissant largeur et hauteur, ben.. forcément ça ne prend plus toute la page.

Mais rassures-moi. Tu ne mets quand même un div avec une image d'arrière-plan juste pour écrire un titre de page ??

L'intitulé de la class et celui de l'image me font douter.

[Nenex]

heuuuu oui :

<div class="titre-accueil"></div>

j'avais vu ca dans un tuto du Site Du Zero. C'etait pour une image d'en-tete.

[Dudu]

Au secours.

Mets ça à la place.

<h1><img src=" ../elements-des-pages/titres-pages/titre-accueil.png" alt="le titre de ton site" title="" width="45px" height="45px" /></h1>

Bien sûr, remplace ce qui doit être remplacé: la largeur, le titre de ton site dans l'attribut alt, remplis éventuellement l'attribut title.

Ce n'est pas encore le nec plus ultra, car ce code est perfectible. Mais c'est déjà une bonne base pour commencer.

Dans l'absolu, évite les divs inutiles et les balises vides.

nota bene à moi-même: le site du zéro, c'est plus ce que c'était.

[Nenex]

En fait j'insere l'image comme je fesais avant, depuis Dreamweaver. Je voulais faire avec du CSS pour alleger les pages.

Pourquoi c'est plus se que c'etait le site du zero ?

[Dudu]

Pourquoi c'est plus se que c'etait le site du zero ?

Parce que ça

<div class="titre-accueil"></div>

c'est juste inadmissible de présenter une horreur pareille dans un tutoriel sur un site à grande audience.

Pour alléger tes pages de l'appel systématique de l'image d'en-tête à chaque chargement, tu peux modifier le code de mon message précédent en le remplaçant par celui-ci.

HTML

<h1>Le titre de ton site</h1>

(change le contenu avec le texte qui va bien)

CSS

h1 {text-indent: -9999px; background: transparent url(../elements-des-pages/titres-pages/titre-accueil.png) no-repeat 50%; height:45px; width: [...]px; border: 1px dashed #000;}

(remplis le width avec la largeur qui convient)

[captain_torche]

Je serai d'ailleurs intéressé de voir sur quelle page du SdZ du as trouvé ça.

[Nenex]

c'est sur cette page, tu descend jusqu'a la partie L'en-tete.

Modifié 27 Février 2009 par Nenex

[captain_torche]

Effectivement, il serait grand temps que m@teo21 revoie ce tuto !

Par rapport au conseil de Dudu, je verrais plutôt le code comme ça :

<h1>Le titre de ton site</h1>

avec comme CSS :

h1 {
	 background: transparent url(' ../elements-des-pages/titres-pages/titre-accueil.png') no-repeat left top;
	 width: 45px;
	 height: 45px;
	 text-indent: -1000px;
}

Dans ce cas précis, l'image n'est pas informative, elle peut être mise en background. Toutefois, il existe un texte. Par contre, dans le cas où quelqu'un naviguerait avec les images désactivées (mais pas le CSS), il ne verrait absolument rien.

Edit : je n'avais pas lu le dernier message de Dudu, qui donne exactement le même conseil

[Nenex]

oui mais

<h1>Le titre de ton site</h1>

me met un texte par dessus l'image.

[Dudu]

Même avec le code CSS que je t'ai donné ???

Très étonnant :!:

[Nenex]

oui. Et j'ai fait un copier-coller, donc c'est pas une erreur de frappe ou un oublie de certain mot ou code. Bon c'est pas grave. Je les inseres avec la methode classique. Je verrais plus tard car je voudrais l'avancer. Toute facon je l'ameliorerais au fur et a mesure. Mais deja avec se que j'ai fait il sera mieux qu'avant.

Donc je garde ce post en suspend.

[Dudu]

Qu'est-ce que tu appelles "méthode classique"?

L'horreur prise sur le site du zéro ?

Garde-la si tu veux, c'est ton choix. Mais n'appelle pas ça une "méthode classique" !

[Nenex]

non pas celle-la ! mais dans dreamweaver insertion d'image. J'appelle ca methode classique lol . Pour le Site du Zero, je n'y vais plus, si les tuto ne sont pas a jour. J'ai d'autre site d'aide.