Discussion :

[McFoggy]

Bonjour,

je n'arrive pas à positionner correctement une image devant un titre de section. Le problème vient du fait que la section possède une bordure et que celle-ci est visible par transparence derrière l'image.

Comment faire pour que le titre de section débute réellement après l'image.

Voici le code que j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<img style="float: left; padding-left: 2em;" src="http://tango-project.org/static/cvs/tango-icon-theme/scalable/actions/system-search.png" />
<h1 style="border-bottom: 1px dashed gray;">Mon titre de section</h1>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc malesuada nulla non leo. Integer urna urna, cursus id, auctor id, sagittis et, mi. Maecenas magna. Aliquam scelerisque. Sed sem orci, venenatis et, pulvinar eu, varius et, velit. </span>

J'ai tenté en utilisant la propriété CSS background-image mais sans plus de succès.

Merci pour votre aide.

[marsupix]

(un lien serait le bienvenue pour voir ce que tu veux faire)

Si tu veux placer une image devant ton titre, il existe l apseudo-classe before mais elle n'est pas garée par IE donc tu peux te rabbatre sur:
html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1 class="titre_image">le titre</h1>

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
h1.titre_image{
background:url('chemin/de/limage.png') no-repeat;  //image en fond du titre
text-indent:20px;  //décalage du texte par rapport à l'image
}

[McFoggy]

Merci Marsupix de ton aide.
La problématique ne vient de l'image en elle même, mais plutôt de la bordure en dessous du titre.

Voici une image reflétant le résultat de nos deux solutions.


Comme on peut le constater, dans les deux cas la bordure de titre démarre dès le début de ligne (dans le 2eme l'image est en plus tronquée).

Ce que je voudrait arriver à faire c'est de démarrer la bordure là ou commence le titre.


Voilà le code que j'ai utilisé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.titre {
    background: url("http://tango-project.org/static/cvs/tango-icon-theme/scalable/actions/system-search.png") no-repeat;
    text-indent: 2em;
    border-bottom: 1px dashed gray;
}
 
<div>
    <img style="float: left; " src="http://tango-project.org/static/cvs/tango-icon-theme/scalable/actions/system-search.png" />
    <h1 style="border-bottom: 1px dashed gray; padding-left: 2em;">Solution initiale</h1>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc malesuada nulla non leo. Integer urna urna, cursus id, auctor id, sagittis et, mi. Maecenas magna. Aliquam scelerisque. Sed sem orci, venenatis et, pulvinar eu, varius et, velit. </span>
</div>
<div>
    <h1 class="titre">Solution soumise</h1>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc malesuada nulla non leo. Integer urna urna, cursus id, auctor id, sagittis et, mi. Maecenas magna. Aliquam scelerisque. Sed sem orci, venenatis et, pulvinar eu, varius et, velit. </span>
</div>

Merci

[marsupix]

alors dans ce cas, l'idéal serait de ne pas mettre l'image en fond du h1 mais par dessus en png MAIS bien sûr ça ne marcherait pas avec IE qui ne prend pas les degrés de transparence alpha...

Donc, ce que tu peut faire dans ce cas c'est faire une image avec ta loupe et le bordure, et une image avec seulement la bordure (pour le texte) qui sera répétée horizontalement (il suffit de fair l'image contenant un pointillé et un espace)

ensuite tu met

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="loupe"></div><h1 class="loupe">le titre</h1>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
div.loupe{
width:...px; // largeur de l'image de loupe
height:...px; // hauteur de l'image de loupe
background:url('loupe.gif') no-repeat;
}
 
h1.loupe{
background:url('pointille.gif') bottom repeat-x;
}

[McFoggy]

Je m'en suis sorti en modifiant la solution initiale.
Le résultat est bien celui escompté


Le code est le suivant (en fait seul le margin du titre a changé)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div>
    <img style="float: left; " src="http://tango-project.org/static/cvs/tango-icon-theme/scalable/actions/system-search.png" />
    <h1 style="border-bottom: 1px dashed gray; margin-left: 2em;">Solution initiale</h1>
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc malesuada nulla non leo. Integer urna urna, cursus id, auctor id, sagittis et, mi. Maecenas magna. Aliquam scelerisque. Sed sem orci, venenatis et, pulvinar eu, varius et, velit. </span>
</div>

Par contre, j'aurais préféré une solution entièrement en CSS afin de ne pas modifier le contenu et la sémantique du fichier HTML.

Je me contenterai de ça :-(

Merci.

[marsupix]

pour une solution entièrement en css, au lieu de mettre ton image avec une balise <img/> tu peux faire une <div> vide à laquelle tu fixe la hauteur et largeur (car n'ayant pas de contenu elle serait invisible sinon) en css avec en background ton image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="loupe"></div><h1>texte</h1>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.loupe{
background:url('imageloupe.png') no-repeat;
width: _px;
height: _px;
float:left;
}

les div et span servent justement à ça car là ton image est purement décorative et n'a donc aucune raison d'apparaitre si on enlève les styles contrairement à une image <img/> qui elle a une importance dans le contenu de la page.

[McFoggy]

Merci Marsupix,

mais ta solution, comme la mienne demande à modifier la sémantique du fichier HTML. Dans un cas on rajoute un tag img, dans l'autre une tag div vide.

Merci de ton aide.