web-dev-qa-db-fra.com

This is a text in the picture is not to Absolute-plan

J'essaie de voir s'il est possible de mettre du texte sur une image sans utiliser position: absolute ou avec l'image étant l'arrière-plan d'un élément.
La raison de ces contraintes est que le code HTML est envoyé dans un courrier électronique et il s'avère que hotmail ne prend en charge ni l'un ni l'autre.
Je me souviens que lorsque j’ai commencé à étudier les CSS, je me suis mis à jouer du texte flottant autour des images et j’ai souvent fini par le lire allègrement. Malheureusement, je ne peux pas reproduire ce comportement.

Histoire complète (édité en):
J'ai reçu une mise en page élégante du graphiste. Il s’agit d’une image de fond agréable, avec des logos pointant vers des sites Web et ce qui est essentiellement un "texte va ici" au milieu.
Comme d'habitude dans ces cas, j'utilise des tableaux pour m'assurer que tout reste en place ET fonctionne avec crossbrowser + crossmailclient.
Le problème provient du fait que la zone centrale "Le texte va ici" n'est pas un rectangle blanc, mais présente quelques graphiques d'arrière-plan.
Après quelques tests, il semble que Live Hotmail ne semble aimer aucune des deux positions: absolue ou image de fond; Les marges relatives ne sont pas bonnes non plus car elles gâcheraient le reste de la mise en page.

Version actuelle, fonctionne dans tout autre client de messagerie/site web:

...
<td>
<img src='myimage.jpg' width='600' height='400' alt=''>
<p style="position: absolute; top: 120px; width: 500px; padding-left: 30px;">
blablabla<br>
yadda yadda<br>
</p>
</td>
...

Bien sûr, "ce n'est pas possible" pourrait être une réponse parfaitement acceptable, mais j'espère que non;)

htmlcsscss-floatcss-positionhotmail
13
Agos

J'avais l'habitude de faire des cascades comme ça tout le temps dès que les tables venaient. Vraiment moche, et peut sérieusement gêner tout validateur que vous exécutez: des cellules de tableau qui se chevauchent. Fonctionne dans la plupart des navigateurs et même sans CSS.

Exemple:

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

Je sais, je mérite un vote négatif pour cela.

66
Zano

Si vous utilisez le positionnement absolu, vous devez spécifier les attributs left et top. En outre, vous devez définir position:relative; sur un élément parent pour en faire un calque, de sorte que le positionnement absolu utilise cet élément en tant qu'origine. Si vous ne spécifiez pas l'origine, il peut s'agir de la fenêtre ou d'un autre élément, et vous ne savez pas où votre élément en position absolue aboutira.

Il existe d'autres alternatives pour placer les éléments les uns sur les autres, chacun avec ses propres limites.

Vous pouvez utiliser le positionnement relatif pour que le texte soit affiché au-dessus d'une image:

<img src="..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it's original position,
   placing it on top of the image. However, the text will still take up
   room in it's original position, leaving an empty space below the image.
</div>

Vous pouvez utiliser un élément flottant à l'intérieur d'un autre élément pour placer du texte au-dessus d'une image:

<div>
   <div style="float:left;">
      This text will be on top of the image. The parent element
      gets no height, as it only contains floating elements.
      However, IE7 and earlier has a bug that gives the parent
      element a height anyway.
   </div>
</div>
<img src="..." alt="" />
6
Guffa

Le meilleur moyen de contrôler l'apparence serait de faire en sorte que le texte fasse partie de l'image elle-même. Bien sûr, si vous utilisez un format d'image avec perte comme le format jpeg avec une compression élevée, cela peut paraître vraiment mauvais, mais peut-être qu'un fichier PNG fonctionnera pour vous? Ou, en fonction du nombre de couleurs, un gif peut fonctionner.

Cela vous donne également des polices d'aspect cohérent, un filtrage, etc.

3
Andy West

Vous pouvez essayer de définir des marges négatives. Ceci est très difficile à maintenir dans toutes les mises en page les moins complexes. Une marge négative effective "tire" l'élément dans cette direction.

<img src="blah.jpg" height="100"/>
<div style="margin-top:-100px">
  blah blah blah
</div>
1
G-Wiz

par exemple, si vous avez un parent, une image et un paragraphe à l'intérieur, donnez une position "relative" à chacun d'eux et donnez un "indice z" aux enfants, dites "20" image et "21" en texte. le texte apparaîtra sur l'image. et vous pouvez ajuster le texte avec "en haut ou à gauche ou à droite ou en bas"

CSS
#learning{
margin: 0px;
padding:0px;
height: auto;
width: 100%;
position: relative;

}
#learning>img{
width:inherit;
height:inherit;
margin: 0px;
display: block;
position: relative;
z-index: 20;
}
#learning > p{
font-family: 'droid_serifitalic';
color: white;
font-size: 36px;
position: relative;
top:470px;
left:500px;
z-index: 21;
}
0
River CR Phoenix