Menu
I'm trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element.
The reason for the constraints is that the HTML code is going into an e-mail, and it turns out that hotmail supports neither.
I remember that when I first began studying CSS, fiddling around with float-ing text around images I often ended up with the text merrily going all over the image. Sadly, I can't reproduce that behavior.
Full story (edited in):
I received a fancy layout from the graphics designer. It's basically a nice background picture, with logos linking to websites and what basically is a "text goes here" area in the middle.
As usual in these cases, I'm using tables to make sure that everything stays in place AND works crossbrowser+crossmailclient.
The problem arises from the fact that the middle "text goes here" area is not a white rectangle, but has a some background graphics.
Having made some test, it appears that Live Hotmail does not seem to like neither position: absolute or background-image; relative margins are also not good because they'd ruin the rest of the layout.
Current version, works in any other mail client/website:
...
<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>
...
Of course, “it's not possible” could be a perfectly acceptable answer, but I hope not ;)
952
We can use CSS absolute positioning to overlap elements, but there's some advantages to using CSS grid instead. Let's explore using CSS grid as an alternative to position absolute.
On the Insert tab, in the Text group, click WordArt, click the style of text you want, and then type your text. Click the outside edge of the WordArt to select it, drag the text over your photo and then, if you want, rotate the text to the angle that works best for your photo.
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”.
Add class=carousel-caption to the HTML tag which contains your text which needs to be positioned over your image !. (And then if you wish add custom css top:xyz% to your . carousel-caption class in css stylesheet to make it align vertically at middle.)
I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarrass any validator you run it trough: overlapping table cells. Works in most browsers though and even without css.
Example:
<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>I know, I deserve a downvote for this.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
