How to use HTML-CSS on outputting data conditionally?

WaSlA SoFt

New Member
I am implementing a unordered list (\[code\]<ul><li>...</li></ul>\[/code\]) inside which to display a link (\[code\]<a>...</a>\[/code\]). In this link tag, other than a title text, I have to conditionally * display an image and a short text.The "complete" output is something as-like the following:\[code\]<ul> <li> +------------------------+ | +---+ Title | | | | | | +---+ Some short text | +------------------------+ </li></ul>\[/code\]However, since the above output is conditionally built, it could be that the image or the short text is not displayed. So...... if the image is not present but the short text is, then the output should be something like\[code\] +------------------------+ | Title | | | | Some short text | +------------------------+\[/code\]... if the short text is not present but the image is, then the output should be something like\[code\] +------------------------+ | +---+ Title | | | | | | +---+ | +------------------------+\[/code\]... if both image and short text are not present, then the output should be something like\[code\] +------------------------+ | Title | +------------------------+\[/code\]I would like to "play" on HTML-CSS tags-properties and not "directly" on the code "behind" / "that generates" that output. How can I make that?Note: For instance, I have problems:
  • on properly outputting the \[code\]height\[/code\] of \[code\]li\[/code\] tags when the image is not present: visually, each \[code\]li\[/code\] tag (and the related image) is almost overrode by the previous one;
  • on properly outputting the \[code\]padding-left\[/code\] of "Title" and "Some short text" when the image is present and not present;
  • ...
* Behind the scenes I have a JavaScript code that conditionally adds HTML to the outputting code:\[code\]var html;html = "<a>";if ( image ) { html += "<img>...</img>"}if ( short_text ) { html += "Some short text"}html += "</a>";return html;\[/code\]
 
Back
Top