Text and image alignment issue

This forum is for all Flare issues related to the WebHelp Mobile target and skins

Text and image alignment issue

Postby Oda on Tue Mar 24, 2015 8:53 am

Hi,

I'm having trouble aligning some text with an image. I produce a web output with the new Top Navigation feature and when I look at the result, the output for web and tablet looks fine:
web_ok.PNG


But the smartphone output looks awful:
mobile_nok.PNG


Here's the piece of code used (it's what i've found on Internet to align a text with the middle lign of an image):
Code: Select all
            <p class="ReleaseName">
                <img src="../Images/sky.jpg" style="width: auto;height: 140px;" />
            </p>
            <p style="font-family: 'Lato Light';font-size: 1.5em;"><span style="line-height: 140px;">My text here bla bla bla</span>
            </p>


Can anyone help me with that? Thanks
(Using Top Navigation, Flare 11)
You do not have the required permissions to view the files attached to this post.
Oda
Propeller Head
 
Posts: 48
Joined: Tue Apr 15, 2014 6:04 am

Re: Text and image alignment issue

Postby Nita Beck on Tue Mar 24, 2015 9:25 am

I can see immediately that the span style you've used is setting the line height of your text to 140px, and that's why you're getting the huge gaps in how it looks on a mobile device.

I think what you need to do is set the position of the image, rather than doing anything with the text. Right-click the image and select Edit Image (in Flare 10) or Image Properties (I think, in Flare 11). On the Position tab, set the Vertical Alignment to Middle. I think that'll do it, but test it. I'm going on memory.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3038
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Text and image alignment issue

Postby Oda on Wed Mar 25, 2015 10:30 am

Thanks Nita. I tried your solution but with no success. That would have been easy though :)
During my searches, I had found that vertical alignment is not supported in HTML5. That's why I pasted the piece of code with text line height set to the same height as the image, as it's the only way I've found to have some text vertically aligned to an image on the same line.
Oda
Propeller Head
 
Posts: 48
Joined: Tue Apr 15, 2014 6:04 am

Re: Text and image alignment issue

Postby kwag_myers on Thu Mar 26, 2015 5:20 am

I generally use a blind table for, what essentially are, two column layouts. I tested the following on Flare's emulator.

Code: Select all
        <table border="0">
            <tr>
                <td>
                    <p style="font-family: 'Lato Light';font-size: 1.5em;">My text here bla bla bla
                    </p>
                </td>
                <td>
                    <p class="ReleaseName">
                        <img src="Resources/Images/sky.jpg" style="width: auto;height: 140px;" />
                    </p>
                </td>
            </tr>
        </table>
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
kwag_myers
Propellus Maximus
 
Posts: 808
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: Text and image alignment issue

Postby Oda on Thu Mar 26, 2015 7:31 am

Thanks kwag_myers, I've tried your workaround and it works just fine!!
Oda
Propeller Head
 
Posts: 48
Joined: Tue Apr 15, 2014 6:04 am


Return to WebHelp Mobile

Who is online

Users browsing this forum: No registered users and 1 guest