Caution: This documentation is for eZ Publish legacy, from version 3.x to 6.x.
For 5.x documentation covering Platform see eZ Documentation Center, for difference between legacy and Platform see 5.x Architecture overview.

Lists

It is possible to create lists in the same way as in HTML by making use of the "ol", "ul" and "li" tags. The lists can be nested. The optional "class" parameter allows the use of a desired CSS class. The following examples demonstrate the usage of ordered and unordered lists.

Ordered lists

<ol [class=""] [custom_parameter="" [...] ]>
    <li [class=""] [custom_parameter="" [...] ]>Element 1</li>
    <li [class=""] [custom_parameter="" [...] ]>Element 2</li>
    <li [class=""] [custom_parameter="" [...] ]>Element 3</li>
</ol>

Unordered lists

<ul [class=""] [custom_parameter="" [...] ]>
    <li [class=""] [custom_parameter="" [...] ]>Element 1</li>
    <li [class=""] [custom_parameter="" [...] ]>Element 2</li>
    <li [class=""] [custom_parameter="" [...] ]>Element 3</li>
</ul>

The custom parameters are optional. In order to use them, their names must be specified using the "CustomAttributes[]" array in the [ol], [ul], [li] blocks within an override for the "content.ini" configuration file. When used, a custom parameter will be available as a template variable with the same name as it was specified in the tag itself.

Balazs Halasy (10/03/2005 11:47 am)

Svitlana Shatokhina (19/07/2007 10:09 am)

Balazs Halasy, Svitlana Shatokhina


Comments

  • <p> tags in <li> tags?

    When using the unordered list as a navigation block Ez has a tendency to wrap an anchor tag in paragraph tags so what should look like this:-
    <ul>
        <li><a href="whatever">this is a link</a></li>
    </ul>
    

    Is output as this:-
    <ul>
        <li>
    <p>
    <a href="whatever">This is a link</a>
    </p>
    </li>
    </ul>
    

    Semantically speaking this is ok but the extra mark-up is not necessary and it now means you need to do more work with CSS to style these links lists that would otherwise be un-necessary. For example:-
    *CSS
    li p
    {
        margin:0;
    }
    

    I know that is a small issue, but this is most obvious when you need your list items to "display:inline;" or float left or right in pixel perfect fasion. There is also the possibility of issues arising with more complex multiple nested lists. For example I have on occasion seen this scenario poping up:-
    *Correct - This should be the output
    <ul>
        <li><a href="whatever">This is a link</a>
            <ul>
                <li><a href="whatever">This is a link</a></li>
            </ul>
        </li>
    </ul>
     
    *Incorrect - This is what I get
    <ul>
        <li><p><a href="whatever">This is a link</a>
            <ul>
                <li><p><a href="whatever">This is a link</a></p></li>
            </ul>
        </p></li>
    </ul>
    

    Unfortunately this code will not validate as XHTML Strict, however I have only seen this output occur on one or two occasions - in reality I should never get this type of output.

    Is there any way around this type of occurrence?
  • p tags in li tags?

    When using the unordered list as a navigation block Ez has a tendency to wrap an anchor tag in paragraph tags so what should look like this:-
    <ul>
        <li><a href="whatever">this is a link</a></li>
    </ul>
    

    Is output as this:-
    <ul>
        <li>
    <p>
    <a href="whatever">This is a link</a>
    </p>
    </li>
    </ul>
    

    Semantically speaking this is ok but the extra mark-up is not necessary and it now means you need to do more work with CSS to style these links lists that would otherwise be un-necessary. For example:-
    *CSS
    li p
    {
        margin:0;
    }
    

    I know that is a small issue, but this is most obvious when you need your list items to "display:inline;" or float left or right in pixel perfect fasion. There is also the possibility of issues arising with more complex multiple nested lists. For example I have on occasion seen this scenario poping up:-
    *Correct - This should be the output
    <ul>
        <li><a href="whatever">This is a link</a>
            <ul>
                <li><a href="whatever">This is a link</a></li>
            </ul>
        </li>
    </ul>
     
    *Incorrect - This is what I get
    <ul>
        <li><p><a href="whatever">This is a link</a>
            <ul>
                <li><p><a href="whatever">This is a link</a></p></li>
            </ul>
        </p></li>
    </ul>
    

    Unfortunately this code will not validate as XHTML Strict, however I have only seen this output occur on one or two occasions - in reality I should never get this type of output.

    Is there any way around this type of occurrence?
    • Re: p tags in li tags?

      Sorry, none of that came out the way I expected and for some reason it double posted???

      Imagine *link is an href""

      When using the unordered list as a navigation block Ez has a tendency to wrap an anchor tag in paragraph tags so what should look like this:-
      <ul>
          <li>*link</li>
      </ul>
      

      Is output as this:-
      <ul>
          <li>
      <p>
      *link
      </p>
      </li>
      </ul>
      

      Semantically speaking this is ok but the extra mark-up is not necessary and it now means you need to do more work with CSS to style these links lists that would otherwise be un-necessary. For example:-
      *CSS
      li p
      {
          margin:0;
      }
      

      I know that is a small issue, but this is most obvious when you need your list items to "display:inline;" or float left or right in pixel perfect fasion. There is also the possibility of issues arising with more complex multiple nested lists. For example I have on occasion seen this scenario poping up:-
      *Correct - This should be the output
      <ul>
          <li>*link
              <ul>
                  <li>*link</li>
              </ul>
          </li>
      </ul>
       
      *Incorrect - This is what I get
      <ul>
          <li><p>*link
              <ul>
                  <li><p>*link</p></li>
              </ul>
          </p></li>
      </ul>
      

      Unfortunately this code will not validate as XHTML Strict, however I have only seen this output occur on one or two occasions - in reality I should never get this type of output.

      Is there any way around this type of occurrence?
      • Re: Re: p tags in li tags?

        I give up!!!