Skip to main content

Hi all. I told my manager I could create a certificate for him by EOD. Normally this is not a boast but today I’m losing my mind trying & retrying this. I’m using a landscape design, in a table so the text can be set to the right so that we can have an image on the right (a background image, it’s not part of the html.) It runs almost 50% of the width of the page, so the text should begin just to the right of it.

The issue is that I can either have the text cover it, or be either partially or entirely not visible. If I move the text far enough to the right to not cover the image, then either several phrases are removed or it’s not visible at all. I must have tried this at least 30 times by now, never getting close to what I’m looking for.

here is the code I’m using:
<table style="padding-left: 300px; width: 100%;">
<tbody>
<tr>
<td>
<p style="text-align: left;">&nbsp;</p>
<h1 style="text-align: left;">&nbsp;</h1>
<h1 style="text-align: left;">&nbsp;</h1>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;</p>
<h1 style="text-align: left;"><span style="font-family: Garamond, serif; font-size: 60pt; color: #000; letter-spacing: 2px; word-spacing: 2px;">Certificate<span style="font-family: Georgia, serif; font-size: 75pt; color: #8bbc07; font-weight: lighter; letter-spacing: 2px; word-spacing: 2px;">.</span></span></h1>
<h2 style="font-family: Arial, Helvetica, sans-serif; text-align: left; color: #8bbc07;"><strong><span style="color: #000000; font-size: 12pt;">Awarded to</span></strong></h2>
<p style="font-family: Arial, Helvetica, sans-serif; text-align: left;"><span style="color: #8bbc07; font-size: 24pt; font-weight: lighter;">idisplay_name]</span></p>
<p style="font-family: Arial, Helvetica, sans-serif; text-align: left;"><strong><span style="color: #000000; font-size: 12pt;">We proudly certify completion of</span></strong></p>
<p style="font-family: Arial, Helvetica, sans-serif; text-align: left;"><span style="font-size: 24pt; color: #333333; font-weight: lighter;">ilearning_plan_name]</span></p>
<p style="text-align: left;"><span style="font-size: 12pt; color: #000000;">0learning_plan_complete format:"F d, Y"]</span></p>
</td>
</tr>
</tbody>
</table>

 

If anyone has any idea what’s going wrong here I would greatly appreciate the input.

Thanks,
Nate

I’m going to be honest, I just added your code to my platform to try and troubleshoot and it seems to be working just fine. 

 

Hm, I wonder if the Branding css could be disrupting this...I wouldn’t think it’s possible, but I honestly don’t know what else I can change…

Anyway, thanks for trying Emily.

Hm, I wonder if the Branding css could be disrupting this...I wouldn’t think it’s possible, but I honestly don’t know what else I can change…

Anyway, thanks for trying Emily.

if you think your CSS may be interfering with the cert code, you can comment it out without deleting it and then turn each CSS group on, one-by-one to check is any code may be the cause.

To comment out your CSS code, 

/* this is a comment */
this is code

move the “  */   “ from the top to just after the last part of the code

/* this is a comment
this is code */

 

Thanks ​@lrnlab but I finally just got this working...I expanded the table width to 150% and just fine-tuned the padding & font size until i had something that worked...so my best guess is that the table width assumes a portrait layout, with margins...in any case, that might well have taken more than 100 tries before landing on something that worked, i think i’m going cross-eyed by now…

All that said, this is a good idea, i’ll remember it the next time i’m struggling with css.

Reply


Terms & ConditionsCookie settings