Need Help For Align Text with image

1

Hi,

I just create sales invoice template modified from Mr. Lubos.
There’s two image, first using imgur and the other is logo company on manager.io
Every time i generated sales invoice, text under company logo is going down.

here’s the code

<div style="font-size: 12px; position: relative">
    <img style="position: absolute; width: 20%; right: 0px; top: 80px" src="{{ business.logo }}" />
    <div style="text-align: center">
        <img style="width: 50%" src="http://imgur.com/sn7U7s4.jpg">
    </div>
    <div style="font-weight: bold; text-align: center; padding-top: 10px; font-size: 19px">{{ business.name }}
    </div>
    <div style="text-align: center; padding-top: 10px; font-size: 15px"><i>GENERAL CONTRACTOR AND IMPORTIR</i>
    </div>
    <div style="text-align: center; padding-top: 20px; font-size: 11px">{{ business.contact_information | newline_to_br }}

And Here’s the sales invoice template

[Album] imgur.com

You can see at the picture, every time i generated sales invoice and the picture from imgur show, date and invoice number text is going down too far.

Please help me, sorry if my english are bad.

2

Why do you expect to see those elements higher? They show where they should according to your HTML template.

3

actually, i want to follow your sales invoice. when it generated to sales invoice, the text under the right logo is not going down too far, i want it still under right logo without having too going down…
Please help , because i want use this invoice on monday

4

If I understand you correctly, you want the DATE and INVOICE NUMBER block to appear higher up on the page, immediately beneath your logo on the right side, with no white space in between?

According to the HTML you posted, the result shown is what would be expected. All the stuff you’ve put in the centre-top of the page (another logo and your business information) is causing the following items to flow downwards.

Either fix your HTML to position everything where you want it (apparently you’ll need to hire an HTML coder to do that), or for a quick fix, get rid of the redundant logo that you have in the centre of the page. Why do you want two logos anyway? If you get rid of the logo in the centre, your business details will be higher on the page and won’t push the DATE and INVOICE NUMBER block so far down. You can also tighten up the leading (vertical spacing) of your business details to use even less space.

(While you’re at it, you might want to fix the spelling of “Importer”…)