Image à travers bordure cadre [Résolu]

Bonjour,

Petite question : j'ai un cadre avec un contour noir et en haut à gauche de mon cadre, je voudrais ajouter une image-texte ("Edito" par exemple) qui serait le titre de mon cadre. L'image "traverserait" le contour haut de mon cadre. Vous voyez ce que je veux dire ? non ?
Voici un exemple :
http://www.auromprod.com/temp.gif

Est-ce que c'est possible de positionner mon image grâce aux CSS ?

Merci
Modifié par kli_online (25 Mar 2005 - 12:34)

Avec une image en HTML (éviter les images en arrière-plan CSS pour un titre svp), c'est simple : ton image étant en début de contenu de ton <div>, la position:relative te permet de la décaler horizontalement (left / right: 10px;) ou verticalement (top / bottom: 10px;).
Il reste à caler la chose pour que l'image soit décalée constamment au bon endroit, quelque-soit la taille de caractère utilisateur, etc.

Sinon, dans un conteneur global lui-même en position relative, tu peux utiliser une position absolue pour ton image, qui la fixera relativement aux limites de ce conteneur.

Humm....excuse moi Laurent mais je suis débutant en CSS...ça ne fait qu'un jour que je me mets à faire des tableaux avec CSS alors j'ai pas tout compris à ta réponse... .

a écrit :
Il reste à caler la chose pour que l'image soit décalée constamment au bon endroit, quelque-soit la taille de caractère utilisateur, etc.

Sinon, dans un conteneur global lui-même en position relative, tu peux utiliser une position absolue pour ton image, qui la fixera relativement aux limites de ce conteneur.

Est-ce que c'est possible d'avoir une balise img qui me placerait à la bonne place mon image à travers mon cadre, quel que soit le nombre de cadres que j'aurais ? L'image sera toujours en haut à gauche, de même dimension, et à la même position.

Merci.
Modifié par kli_online (25 Mar 2005 - 12:22)

Ah !! ca y est. Je crois avoir compris.

#edito {
background: url(edito.gif);
[b]position: relative;
top: -20px;[/b]
height: 16px;
width: 108px;
background-repeat: no-repeat;
font-size:1px /* correction d'un bug IE */
}

par exemple ?

Désolé, c'était un peu elliptique, en effet.

a écrit :

Ah !! ca y est. Je crois avoir compris.

Oui et non

Oui, tout à fait, pour l'utilisation de la position relative afin de faire glisser l'image vers le haut à partir de sa position "naturelle" afin qu'elle vienne recouvrir la bordure.

Non pour l'utilisation d'une image en background CSS : apparemment, cette image est un titre, n'est-ce pas ? C'est donc un contenu important, qui doit être accessible quelque-soit le navigateur et ses paramètres. Or, ton image en background CSS ne sera accessible qu'aux utilisateurs voyants ayant un navigateur graphique avec CSS activé. Il sera en revanche invisisible dans un navigateur vocal, un navigateur texte, pour un robot d'indexation de moteur de recherche, pour un traducteur automatique, etc.

C'est pourquoi il faut que ce soit une "vraie" image <img class="titre" alt="le texte du titre"...>, décalée de la même manière avec quelque-chose comme:

img.titre {
position: relative;
top: -20px;
}

Modifié par Laurent Denis (25 Mar 2005 - 12:37)

Ok, j'ai bien vu la différence. Mais ce n'est pas un problème car je suis entrain de réaliser mon modèle graphique de newsletter...mais je vais quand même l'appliquer...ça me servira pour plus tard.

Merci. Je vois mieux la différence entre une image background CSS et une "vraie" image.


Bye

juste un dernier truc pour le nom de la balise

img.titre dans ma feuille CSS va automatiquement rechercher la balise <img> qui portera l'id =titre ? ou il faut que je mette dans ma balise <img class="img.titre"> ?

MERCI

kli_online a écrit :
img.titre dans ma feuille CSS va automatiquement rechercher la balise <img> qui portera l'id =titre ? ou il faut que je mette dans ma balise <img class="img.titre"> ?

Ah... Ces fichus sélecteurs CSS

img.titre vise <img class="titre" ... /> (classe)

img#titre vise <img id="titre .../> (identifiant unique)

Il est prévu que la prochaine livraison d'OpenWeb contienne quelque-chose là-dessus, histoire de faire le point simplement sur les sélecteurs.
Modifié par Laurent Denis (25 Mar 2005 - 13:48)