How to Align text at ANBY position I want? Other than left, center ,right

by awledd
6 replies
  • WEB DESIGN
  • |
I wanted to create a page where I list Telephone numbers in a column without a table. I write something like this:

Tel: 123456
932435
182435

But after posting it (WordPress), it becomes disorganized and the rest of the phone numbers become off the line. Even here they are not in the same position as the first phone number. How do I keep them in line as the position of the first?
#align #anby #center #left #position #text
  • Profile picture of the author pphillips001
    Use DIVs instead of table (not sure why you don't want a table?).

    Something like:

    <div id="wrapper" style="width:200px; height: 100px; position:relative;">
    <div id="innerLeft" style="width: 100px; height: 100px; float:left;">Tel</div>
    <div id="innerRight" style="width: 100px; height: 100px; float:left;">123456<br>932435<br>182435</div>
    </div>
    {{ DiscussionBoard.errors[9356740].message }}
  • Profile picture of the author awledd
    If I use table, will it be invisible? I don't want it to be seen.. look how it looked when I use the above code: 2014-07-15_0542 - Dess71's library
    Signature
    {{ DiscussionBoard.errors[9357333].message }}
    • Profile picture of the author savidge4
      For what you want to do there is no need to use tables. Its wordpress I would suggest maybe a 5 column shortcode setup tel:|1234567| empty | tel: |1234567

      And you can run 2 columns that way, and its responsive dynamic to boot!
      Signature
      Success is an ACT not an idea
      {{ DiscussionBoard.errors[9357769].message }}
  • Profile picture of the author awledd
    the above snippet doesn't work or have I missed anything?
    Signature
    {{ DiscussionBoard.errors[9359559].message }}
    • Profile picture of the author pphillips001
      Hi Awledd,

      The code I gave was off the top of my head/typed straight into the editor to give an example. Play around with the font sizes and div widths to get the fit working.

      You can quite easily create invisible tables - it's just a matter of styling. There are loads of examples on the web.
      {{ DiscussionBoard.errors[9359662].message }}
  • Profile picture of the author awledd
    Ok found it. The wordpress platform will not hold the non brake space code when you save it. you have to add it ( &nbsp; )manually in text editing mode mode and publish. This worked for me.


    Later on, I added TinyMCE Advanced plugin and then I do not have to play with &nbsp; html code anymore. This plugin also has very interesting editing features like changing fonts.
    Signature
    {{ DiscussionBoard.errors[9438159].message }}

Trending Topics