I have a page that sends an email on submit via Procedure:
DECLARE
l_body CLOB;
l_body_html CLOB;
l_img_html CLOB;
BEGIN
l_body_html := '<!DOCTYPE HTML>'
|| '<html>'
|| '<head>'
|| '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'
|| '<meta name="viewport" content="width=device-width">'
|| '</head>'
|| '<style>.top_image {height: 300px;width: 70%;display: block;margin-left:
auto;margin-right: auto;}
.top_image_title {font-family: Georgia, serif;font-size: 80px;position:
absolute;top: 352px;left: 722px;}
.top_image_title2 {color: white;font-family: Georgia, serif; font-size:
80px;position: absolute; top: 442px;left: 262px;}
.greeting {position: absolute; left: 700px; color: black; font-family:
Georgia, serif; font-size: 40px; position: absolute; left: 230px;}
.greeting_msg {position: absolute; left: 700px; line-height: 1.6; width:
72%; font-size: 24px;position: absolute; left: 230px;}
.section_title {position: absolute; left: 700px; line-height: 1.6;
width: 72%; font-size: 24px; position: absolute; left: 230px;}
.section_body {position: absolute; left: 700px; line-height: 1.6; width:
72%; font-size: 24px; position: absolute; left: 230px;}'
|| '<body>'
|| '<div style="height: 1530px;">'
|| '<div style="height: 200px;">'
|| '<img class="top_image" src="'
|| apex_mail.get_instance_url
|| :app_images
|| :P100_IMAGE || '" alt="ironman"/>'
|| '<div class="top_image_title2" style="position: absolute; bottom: 78px;
left: 16px;">'|| :P100_TEXT_ON_IMAGE ||''
|| '</div>'
|| '</div>'
|| '<div style="text-align: center;">'
|| '<div style="display: inline-block; text-align: left;">'
|| '<p class="greeting">Hello</p><br><br><br>'
|| '<p class="greeting_msg">This is an Email</p><br><br><br><br><br><br>
|| '</div>'
|| '</div>'
|| '</div>'
|| '</body>'
|| '</html>';
l_body := 'Please use HTML enabled email client to view this message.';
apex_mail.send(
p_to => 'email@email.com'
,p_from => 'noreply@.com'
,p_body => l_body
,p_body_html => l_body_html
,p_subj => 'Referring hosted images'
);
apex_mail.push_queue;
END;
However, positioning of Image Title (P100_TEXT_ON_IMAGE Item) and regular Text (greeting and greeting_msg classes) do not work. It doesn't position anything whatsoever. Anybody knows why? or how to fix it? (for clarification, P100_TEXT_ON_IMAGE Item text should be displayed on top of the image (to the left), it works as a normal HTML doc but here the text gets displayed below the image. For regular text, CSS aims to have it centered but left-aligned, it doesn't work, all is shown align left (not centered).
Thanks
You open the <style> tag but you never close it. Close the </style> tag and the <body> element will be shown (and put the style element into the head.)
If you want to have one element displayed ontop of another than give the containing element the style position: relative and then the position: absolute of the contained element will be based on the origin of that containing element.
For example, stripping out the irrelevant parts from your question and giving the elements a background colour so you can see where they are positioned. The parent element is coloured red, the (fake) image is yellow and the text is green and you can see that the text is on top of the "image" which completely covers the parent:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style>
.top_image {
height: 300px;
width: 70%;
margin-left: auto;
margin-right: auto;
background-color: red;
position: relative;
}
.top_image .your_image {
height: 100%;
width: 100%;
background-color: yellow;
}
.top_image_title2 {
color: white;
font-family: Georgia, serif;
font-size: 80px;
position: absolute;
bottom: 78px;
left: 16px;
background-color: green;
}
</style>
</head>
<body>
<div style="height: 1530px;">
<div class="top_image">
<div class="your_image" />
<div class="top_image_title2">text on image</div>
</div>
</div>
</body>
</html>