Ecriture d'un titre sur la bordure d'une image, possible ?

**userparis** · 08/02/2013, 12h59

Bonjour,

je voudrais savoir comment faire pour avoir un encadré à l'aide d'une image (background ou img src?) et pouvoir venir positionner un texte sur la bordure haute de l'encadré qui en fait le titre pour un ensemble de donnée a afficher dans tout l'encadré.

Merci

**Aleadia** · 08/02/2013, 13h33

Bonjour,

Si j'ai bien compris, tu veux que l'image fasse office de bordure ? Si c'est bien ça, tu peux faire une div avec ton image en background, et mettre une autre div à l'intérieur dans laquelle tu mets tes données.

Pour le titre, tu peux toujours le positionner au dessus de tes div et réduire la marge.

Dis-moi si tu veux des précisions.

**NoSmoking** · 08/02/2013, 18h26

Bonjour,

Envoyé par Aleadia

Pour le titre, tu peux toujours le positionner au dessus de tes div et réduire la marge.

pas besoin d'en rajouter il suffit de mettre le titre dans la DIV conteneur possédant le background

Code html :

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

1
2
3
4
<div>
  <h1></h1>
  <div></div>
</div>

**userparis** · 11/02/2013, 10h21

Bonjour en mettant le texte-titre dans le div container (qui contient l'image de background) le texte est positionné en dessous de la bordures haute de l'image.

Comme dis plus haut je voudrais que le texte soit positionné à hauteur de la bordure haute et non en dessous. Mais peu être que je peux remonter le texte avec la propriété padding en la mettant en négatif pour que le texte vienne mordre la bordure? Pas sur que ce soit très bien. J'attends vos conseils, merci.

**Aleadia** · 11/02/2013, 10h47

C'est bien pour cela que j'avais proposé de mettre le titre au-dessus du reste, puis de réduire margin-bottom (avec un chiffre négatif). ^^

Sinon, tu peux aussi avoir un très bel effet en utilisant fieldset. C'est un encadré dont le titre se met automatiquement au même niveau que la bordure haute. Je ne sais pas si le rendu te convient vraiment, mais je te le met au cas où :

Code html :

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

1
2
3
4
<fieldset>
  <legend>TON TITRE</legend>
  <div>TES DONNEES</div>
</fieldset>

Après tu peux y ajouter du CSS comme sur une div normale.

**userparis** · 11/02/2013, 14h29

Merci pour vos réponse.

Le fieldset ne me convient pas trop car en fait l'image de background (en fait 3 images, haut avec bord arrondi, centre qui s'étire pour le contenu des données et bas avec bord arrondi) est en couleur dégradé donc je perdrais cette présentation.

Par contre si j'ai bien compris vos remarques ça donnerai un code du genre

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="container">
 <div id="ImageHaut">
   <h1>Titre mordant sur la bordure</h1>
 </div>
 <div id="ImageCentre">
   <p>contenu1</p>
   <p>contenu2</p>
 </div>
 <div id="ImageBas"></div>
</div>

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
#ImageHaut{
background-image: url(imagehaut.jpg);
}
 
h1 {
margin-top: -10px;
}
 
#ImageCentre{
background-image: url(imagecentre.jpg);
}
 
#ImageBas{
background-image: url(imagebas.jpg);
}

On travaille avec le margin-top de H1 contenu dans le Div ImageHaut ?

Merci

**userparis** · 11/02/2013, 14h33

a moins que je puisse faire avec fieldset qui contiendrais l'image haut, le div contenu, l'image centre et un div bas pour l'image bas ?

Je sais pas si c'est possible mais le div bas contenant l'image bas a l'interieur du fieldset j'aime pas trop...

**NoSmoking** · 13/02/2013, 18h26

Je n'opterais effectivement pas un FIELDSET mais pour quelque chose dans ce genre

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
#div_haute{
  position:relative;
  overflow:hidden;
  background-color:#FEE;
  width:250px;
  height:250px;
}
#div_centre{
  background-color:#EFE;
  height:100%;
}
#div_basse{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2em;
  background-color:#EEF;
}
</style>
</head>
<body>
<div id="div_haute">
 <h1>Titre</h1>
 <div id="div_centre">
   <p>contenu1</p>
   <p>contenu2</p>
 </div>
 <div id="div_basse"></div>
</div>
</body>
</html>

à ajuster et à affiner bien sûr.

Ecriture d'un titre sur la bordure d'une image, possible ?

CSS

Discussions similaires

Partager

Partager