Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-06-2012, 06:25 PM   PM User | #1
alisamii
New Coder

 
Join Date: Nov 2003
Posts: 16
Thanks: 0
Thanked 0 Times in 0 Posts
alisamii is an unknown quantity at this point
Exclamation Controlling `<li>` breaks in a multi-column layout

I am having trouble with managing how text-based content breaks in a multi-column, multi-page layout.

I am using the textify.js jQuery plugin available on CodeCanyon.

The problem I am having relates to lists. Sometimes, list items break incorrectly.

For example, a list may contain the following code:

Code:
<ul>
	<li>Vous raccommoder avec votre conjoint après avoir exprimé clairement vos attentes de changement, en surmontant vos différends.</li>
	<li>Consulter un tiers autorisé (psychologue, conseiller familial, prêtre) à titre individuel pour faire le point sur votre situation personnelle.</li>
	<li>Consulter un conseiller/médiateur familial avec votre conjoint.</li>
	<li>Vous séparer de fait (sans requérir l'intervention d'un juge, et avec ou sans une convention écrite avec votre conjoint).</li>
	<li>Requérir du juge des mesures protectrices de l'union conjugale  (en demandant ou non  l'attribution du logement familial, c'est-à-dire en menant ou non une vie séparée).</li>
	<li>À noter que requérir des mesures protectrices de l'union conjugale pour organiser la vie séparée peut-être un moyen de préparer un divorce unilatéral si le conjoint refuse de divorcer.</li>
	<li>Si les conditions en sont réalisées, introduire une action en séparation de corps (cas échéant d'accord avec votre conjoint).</li>
</ul>
The columns are set to a height of 330px.

In this layout, some of the list items break mid-item and are continued on the next column. That isn't a real problem, if the result was not a new list item being started when that happens.

Effectively, it breaks and creates a new `<li>` as such:

Code:
<ul>
	<li>Vous raccommoder avec votre conjoint après avoir exprimé clairement vos attentes de changement, en surmontant vos différends.</li>
	<li>Consulter un tiers autorisé (psychologue, conseiller familial, prêtre) à titre individuel pour faire le point sur votre situation personnelle.</li>
	<li>Consulter un conseiller/médiateur familial avec votre conjoint.</li>
	<li>Vous séparer de fait (sans requérir l'intervention d'un</li>
	<li>juge, et avec ou sans une convention écrite avec votre conjoint).</li>
	<li>Requérir du juge des mesures protectrices de l'union conjugale  (en demandant ou non  l'attribution du logement familial, c'est-à-dire en menant ou non une vie séparée).</li>
	<li>À noter que requérir des mesures protectrices de l'union conjugale pour organiser la vie séparée peut-être un moyen de préparer un divorce unilatéral si le conjoint refuse de divorcer.</li>
	<li>Si les conditions en sont réalisées, introduire une action en séparation de corps (cas échéant d'accord avec votre conjoint).</li>
</ul>
If you notice, the 7 `<li>` elements are now 8 with a new `<li>` created mid-sentence after **l'intervention d'un** of list item 4.

What I'd like to do is control that. Either of the following options would be satisfactory to me:

1. The line breaks to the next column but does not create a new `<li>`
2. The column height grows only enough to allow the `<li>` not to break onto a new column.
3. The `<li>` does not break mid-sentence, but rather if it is too long to display in the column, it breaks before the `<li>`

You can see the layout issue and problems at the following URL:

http://alisamii.dyndns.org/ergonomiq...clients/sosd2/

Any assistance would be most appreciated.
alisamii is offline   Reply With Quote
Reply

Bookmarks

Tags
css3, html-lists, jquery, multicolumn, pagebreak

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:33 AM.


Advertisement
Log in to turn off these ads.