Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 11, 2014 at 10:24 pm #262994
    armindoerr

    Hi,

    I’d like to align some text after icons.
    What it looks now: Bild hochladen

    Goal is to make it look like this (right widget): http://www.photokurs-muenchen.de/kontakt/

    I’ve tried with e.g. <div style="text-indent:10px;">MY TEXT</div>, but that didn’t work.

    Thanks,
    Armin

    May 11, 2014 at 10:42 pm #262996
    Flikk

    [av_font_icon icon...]<div style="float: left; padding-left: 10px;"> worked for me.</div>

    But i dont know if there is a better solution.

    Using a table might be better?

    May 11, 2014 at 10:54 pm #262997
    armindoerr

    Hi Flikk,
    thanks a lot!
    I tried that:

    [av_font_icon icon='ue80a' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

F10 Performance Oil Vertrieb UG
<div style="float: left; padding-left: 20px;">(haftungsbeschränkt)</div>
[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

Ständlerstr. 35
81549 München
Germany

[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

089 / 680 95 688

[av_font_icon icon='ue838' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

089 / 680 95 689

[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

 (Email address hidden if logged out)

    But looks not beautiful yet. Suggesten where the paste your code?

    May 11, 2014 at 11:02 pm #262998
    Flikk

    first code: solution with a table
    second code: solution with a div container
    Versuchs doch mal mit (variante mit div unten ist vielleicht einfacher):

    <table style="width: auto;">
<tr>
<td>[av_font_icon icon='ue80a' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]</td>
<td>
F10 Performance Oil Vertrieb UG <br>
(haftungsbeschränkt)
</td>
</tr>
<tr>
<td>[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]</td>
<td>
Ständlerstr. 35<br>
81549 München<br>
Germany
</td>
</tr>
</table>

    Werde jetzt aber nicht allles übertragen.
    Anschließend kann der Tabelle noch eine ID gegeben werden um über css das styling zu machen (Rahmen entfernen, Abstände und was sonst noch gewünscht wird)

    edit: mein div container würde alles nach einem icon umschließen. Und padding-left brauchst du nicht wenn du den abstand zum icon nicht vergrößern möchtest:

    [av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

<div style="float: left;">
Ständlerstr. 35
81549 München
Germany
</div>
    May 12, 2014 at 7:27 pm #263466
    Yigit

    Hey!

    Please set all text-indents to 0 except for the one after icon. It should look like this – http://i.imgur.com/flmLnyW.png

    Best regards,
    Yigit

    May 12, 2014 at 7:36 pm #263476
    Flikk

    i think you got the wrong idea Yigit.
    The image is what he has and the link is what he wants.

    But you provided the code to make the link look like the picture?

    i think my solution with the div container is the best:

    [av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

<div style="float: left;">
Ständlerstr. 35
81549 München
Germany
</div>

    He could also use the tex-indet method.
    But then he’d need a div container for every new line to align it.

    May 12, 2014 at 8:03 pm #263497
    Josue

    Hey!

    Check this topic, it’s the same request:
    https://kriesi.at/support/topic/help-contact-form/

    Cheers!
    Josue

    May 13, 2014 at 12:48 am #263674
    armindoerr

    Thanks guys!

    I tried now three versions:
    Bild hochladen

    ad1) My own one, forget it.

    ad2) Josue’s solution from that posting: https://kriesi.at/support/topic/help-contact-form/#post-255932
    It would be nice, if it would be aligned with the left side. But as it is, it’s shifted as a whole to the right.

    ad3) That’s the solution from Flikk from this post: https://kriesi.at/support/topic/align-text-after-icon/#post-263476
    It looks great, but how do I add a secont line/entry? If I add one, it arises right of the first one. So problem here is how to ad a break?

    You see, I lack even basic knowledge :-(

    Thanks a lot for your help!
    Armin

    May 14, 2014 at 6:57 am #264501
    Dude

    Hi!

    You can use Flikks code and duplicate it like:

    
[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

<div style="float: left;">
Ständlerstr. 35
81549 München
Germany
</div>

<div class="clearfix"></div>

[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]

<div style="float: left;">
Ständlerstr. 35
81549 München
Germany
</div>

    The div with the class “clearfix” will shift the content below to the next line.

    Best regards,
    Peter

    May 14, 2014 at 3:14 pm #264680
    armindoerr

    Thanks, Peter.

    Now I use this:

    <div class="clearfix"></div>

[av_font_icon icon='ue80a' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">F10 Performance Oil Vertrieb UG (haftungsbeschränkt)</div>

<div class="clearfix"></div>

[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">Ständlerstr. 35
81549 München
Germany</div>

<div class="clearfix"></div>

[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">+49 (89) 680 95 688</div>

<div class="clearfix"></div>

[av_font_icon icon='ue838' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">+49 (89) 680 95 689</div>

<div class="clearfix"></div>

[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;"><a title=" (Email address hidden if logged out) " href="mailto: (Email address hidden if logged out) " target="_blank"> (Email address hidden if logged out) </a></div>

    But first line is still problematic:
    Bild hochladen

    May 15, 2014 at 3:33 am #265036
    Ismael

    Hey!

    Thank you for the screenshot.

    It seems to be working fine on our end. Do you mind if we take a look at the actual page? Here is the screenshot when we tested the code:

    Best regards,
    Ismael

    May 15, 2014 at 2:11 pm #265284
    armindoerr
    This reply has been marked as private.
    May 16, 2014 at 4:47 am #265703
    Ismael

    Hi!

    Thank you for the access.

    Where did you place the actual shortcodes? I can’t see it on the entire website or on the 4 pages that is available on the menu.

    Regards,
    Ismael

    May 16, 2014 at 12:50 pm #265789
    armindoerr
    This reply has been marked as private.
    May 16, 2014 at 8:16 pm #265938
    Josue

    Hi Armin!

    Try with this code:

    <div class="clearfix"></div>

[av_font_icon icon='ue80a' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left; max-width: 200px">F10 Performance Oil Vertrieb UG (haftungsbeschränkt)</div>

<div class="clearfix"></div>

[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">Ständlerstr. 35
81549 München
Germany</div>

<div class="clearfix"></div>

[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">+49 (89) 680 95 688</div>

<div class="clearfix"></div>

[av_font_icon icon='ue838' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;">+49 (89) 680 95 689</div>

<div class="clearfix"></div>

[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' color='#014f9d' size='15px' position='left'][/av_font_icon]
<div style="float: left;"><a title=" (Email address hidden if logged out) " href="mailto: (Email address hidden if logged out) " target="_blank"> (Email address hidden if logged out) </a></div>

    Regards,
    Josue

    May 16, 2014 at 9:28 pm #265976
    armindoerr

    Thanks, Josue.

    I’m satisfied with the solution, even if it’s not aligned as it would be with tab stops in a text document. My goal was to achive this one: http://www.photokurs-muenchen.de/kontakt/

    But for now it’s OK.

    Thanks,
    Armin

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Align text after icon’ is closed to new replies.