28182 sujets

CSS et mise en forme, CSS3

[Résolu] Superposer du texte à une image

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.
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
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 :
upload/57626-Imageettex.jpg

Encore merci.
Sujet clos
Aller à