[Résolu] Superposer du texte à une image

Question

mitteljc

29 Dec 2015 à 10:48

Bonjour et bonnes fêtes à tous,

Je cherche à superposer du texte à une image, le centre et le lier à cette image, c'est à dire pouvoir mettre cette image où je veux dans ma page. J'ai trouvé une solution avec du positionnement relatif, mais cela occupe de la place dans le flux. J'ai eu beau chercher (peut-être mal), mais je n'ai rien trouvé dans le forum.

Merci pour votre aide.

debalsjeremy

29 Dec 2015 à 12:03

Bonjour vous pouvez faire ceci :


<div id="blocImage">
    <img src="" alt"" />
 <p>Texte.....</p>
    
</div>



Avec image dans le code : 

#blocImage p {
    width: 100%;
    margin : auto;
    z-index: 200;
    
    ou 
    
    text-align: center;
    z-index: 200;
}

Sinon sans image dans le code : enlever le z-index il sers a rien

//sans image dans le code html :
#blocImage {
    background-image:url(images/image_de_fond.png);
    background-size: cover;
}

//avec image dans le code :

#blocImage {
    width : 100%;
}

J'espère avoir compris votre soucis je n'est pas vérifier mon code il y la possibilité qu'il y est des erreur. Personnellement je préfère la solution ou l'image est dans le code html

blocImage : vous permettre de faire déplacé l'ensemble dans tous les cas

SolidSnake

29 Dec 2015 à 14:05

Bonjour,

J'aurais plutôt utiliser les balises figure et figcaption en remplacement de la div et du p (histoire d'ajouter un peu de sémantique), et le code de debalsjeremy ne semble pas fonctionner.
Je verrais plutôt un position:relative sur le parent, et absolute sur le texte.

mitteljc

30 Dec 2015 à 15:05

Merci énormément pour votre aide. Je me suis finalement inspiré des 2 réponses en maintenant l'image dans le code et en utilisant un positionnement relatif sur le parent et un positionnement absolu sur les enfants. Mon code avec 2 lignes de texte et un tableau pour les choix :

CSS :

#bandeauImg
{
 position: relative;
 width: 100%;
 text-align: center;
 vertical-align: top;
 font-size:13px;
 color:#FFFFFF;
}
#bandeauTxt1
{
 width: 100%;
 position: absolute;
 top: 25px;
 left: 0px;
 text-shadow: 1px 1px cyan;
 text-align: center;
 font-family: "Segoe Script", Arial, Sans-serif;
 font-size: 2.5em;
 color: yellow;
}
#bandeauTxt2
{
 width: 100%;
 position: absolute;
 top: 70px;
 left: 0px;
 text-align: center;
 font-family: Verdana, Arial, Sans-serif;
 font-size: 1.5em;
 color: white;
}
#bandeauTab
{
 width: 100%;
 border-spacing : 0;
 border-collapse : collapse;
 position: absolute;
 top: 101px;
 left: 0px;
}
#bandeauTab tr
{
 height:25px;
}
#bandeauTab td
{
 padding: 0;
 border: 1px solid #fff0cc;
 background-color: transparent;
 cursor: auto;
}
#bandeauTab td a
{
 width: 100%; 
 height: 100%;
 color: white;
 text-align: center;
 text-decoration: none;
}
#bandeauTab td:hover
{
 background-color:#2B5F66;
 cursor: pointer;
}
#bandeauTab ul
{
  width: 155px;
  display:none;
  position:absolute;
  -webkit-box-shadow: 2px 2px white;
  box-shadow: 2px 2px white;
  margin:-1px;
  padding:0;
  list-style-type:none;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  padding:5px 0;
  background: linear-gradient(#66B0B3,#2B5F66);
}
#bandeauTab ul a {
 text-align: left;
}
#bandeauTab ul:before
{
  content:"";
  position:absolute;
  top:-6px;
  left:10px;
  width:0px;
  height:0px;
  border-bottom:7px solid #66B0B3;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
}
#bandeauTab td:hover ul {
 display:block;
}
#bandeauTab td:hover ul li {
 float:none;
}
#bandeauTab li a {
  display: block;
  width: 145px;
  padding: 1px 5px;
}
#bandeauTab li a:hover {
 background-color:#80C2C4;
}

HTML :

<div id="bandeauImg">
  <img src="../_local/images/banniere.gif" alt="" border="0">
  <div id="bandeauTxt1">Titre 1</div>
  <div id="bandeauTxt2">Titre2</div>
  <table id="bandeauTab">
    <tbody><tr>
      <td width="156"><a href="../choix1/index.php">Choix 1</a></td>
      <td width="156"><a href="../choix21/index.php">Choix 2.1</a>
        <ul>
          <li><a href="../choix21/index.php">Choix 2.1</a></li>
          <li><a href="../choix22/index.php">Choix 2.2</a></li>
          <li><a href="../choix23/index.php">Choix 2.3</a></li>
          <li><a href="../choix24/index.php">Choix 2.4</a></li>
          <li><a href="../choix25/index.php">Choix 2.5</a></li>
        </ul>
      </td>
      <td width="156"><a href="../choix3/index.php">Choix 3</a></td>
      <td width="156"><a href="../choix4/index.php">Choix 4</a></td>
      <td width="156"><a href="../choix5/index.php">Choix 5</a></td>
      <td width="156"><a href="../choix6/index.php">Choix 6</a></td>
      <td width="156"><a href="../choix71/index.php">Choix 7.1</a>
        <ul>
          <li><a href="../choix71/index.php">Choix 7.1</a></li>
          <li><a href="../choix72/index.php">Choix 7.3</a></li>
          <li><a href="../choix73/index.php">Choix 7.3</a></li>
        </ul>
      </td>
    </tr>
  </tbody></table>
</div>

Le résultat :

Encore merci.

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Superposer du texte à une image