Lining up text in a column

• 

  cavair · Member · May 20, 2014 at 5:47 pm

  • Copy link
  • Add topic to favorites

  I have a list of names in a private members page and after each name is a description of members interests. The names are bulleted followed by a colon, i then wanted the descriptions to line up below each other to give some uniformity. Tabbing doesnt work after the colon, but as each name is a different length it probably wouldnt work anyway.
  Below is the code for first 4 – what i want is the “Parish” / “Beginners” / “How” etc to line up below each other and so on, but they don’t line up and looks messy. How do i get that text to line up for each name / line? or any suggestions!

  • Jeanne:  Parish records pre 1837.
  • Sheila:     Beginner – help with getting started
  • Joan:       How to organise records; Furthering research through paper based documents
  • Liz:          How to organise records; Writing up family history; life of agricultural labourers; How to get the best out of local Record Offices/church records;

  The blog I need help with is: (visible only to logged in users)

• 

  georgestephanis · Member · May 20, 2014 at 8:47 pm

  • Copy link

  Well, there’s two ways you could do this.

  The first is to use a <table> to represent your data — something like this (you’d paste it into the text/html part of the editor, rather than the visual/wysiwyg side):

  
  

  <table>

  <tr>

  <th scope="row">Jeanne:</th>

  <td>Parish records pre 1837.</td>

  </tr>

  <tr>

  <th scope="row">Sheila:</th>

  <td>Beginner - help with getting started</td>

  </tr>

  <tr>

  <th scope="row">Joan:</th>

  <td>How to organise records; Furthering research through paper based documents</td>

  </tr>

  <tr>

  <th scope="row">Liz:</th>

  <td>How to organise records; Writing up family history; life of agricultural labourers; How to get the best out of local Record Offices/church records;</td>

  </tr>

  </table>

  view raw
  
  table.html
  
  hosted with ❤ by GitHub

  The second (and likely much more complicated) option is to use what’s known as a Definition List with some custom styling applied.

  The markup would look something like this:

  
  

  	<dl>
  	<dt>Jeanne:</dt>
  	<dd>Parish records pre 1837.</dd>
  	<dt>Sheila:</dt>
  	<dd>Beginner - help with getting started</dd>
  	<dt>Joan:</dt>
  	<dd>How to organise records; Furthering research through paper based documents</dd>
  	<dt>Liz:</dt>
  	<dd>How to organise records; Writing up family history; life of agricultural labourers; How to get the best out of local Record Offices/church records;</dd>
  	</dl>

  view raw
  
  definitionlist.html
  
  hosted with ❤ by GitHub

  Then you’d need to use CSS to set the width and make all the dt (definition term) and dd (definition definition) float to the left, as well as clearing all of the dt’s to the left. If you’d like to see what that would look like in code, let me know, but the first table option is probably best suited to your situation at hand.

• 

  cavair · Member · May 22, 2014 at 7:57 am

  • Copy link

  Thanks George!

  Of course! After using coding many years ago then getting used to WYSIWYG editors id forgotten this, especially as i didnt see the usual Table icon along the top of the text page editor. Ive only just started using WordPress so need to get used to what coding options it shows and what i need to re-learn.
  Thankyou again.