How to use HTML-CSS on outputting data conditionally?


Tags: html,css,css3,html-lists,conditional

Problem :

I am implementing a unordered list (<ul><li>...</li></ul>) inside which to display a link (<a>...</a>). 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:

<ul>
  <li>
    +------------------------+
    | +---+  Title           |
    | |   |                  |
    | +---+  Some short text |
    +------------------------+
  </li>
</ul>

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

 +------------------------+
 | Title                  |
 |                        |
 | Some short text        |
 +------------------------+

... if the short text is not present but the image is, then the output should be something like

 +------------------------+
 | +---+  Title           |
 | |   |                  |
 | +---+                  |
 +------------------------+

... if both image and short text are not present, then the output should be something like

 +------------------------+
 | Title                  |
 +------------------------+

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 I: "Basic" structures for each scenario at jsfiddle.net/zF5Cw/2.

Note II: For instance, I have problems:

  • on properly outputting the height of li tags when the image is not present: visually, each li tag (and the related image) is almost overrode by the previous one;
  • on properly outputting the padding-left 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:

var html;

html = "<a>";

if ( image ) { 
  html += "<img>...</img>"
}

if ( short_text ) { 
  html += "Some short text"
}

html += "</a>";

return html;


Solution :

This example covers all four of the scenarios you described. Live demo: http://jsfiddle.net/zF5Cw/3/

li {
    padding: 10px;
    border: 1px solid #000;
    margin: 10px;
    overflow: auto;
    width: 300px;
}
img,span{float: left;}
img{margin-right: 10px;}
span{width: 250px;}

    CSS Howto..

    How to add and remove a current state to a link when another is clicked using jQuery

    How do I customise the style of the Auth0 lock control?

    How to embed a font in website

    How to fold/unfold a DIV like on this website

    How can I have columns like this in CSS? (image)

    How to format an arabic poem using jquery?

    How to make a smoother animation with jQuery UI slide effect

    How to find a first td in a tr using tr class name in CSS? [duplicate]

    How to set input:focus style programatically using JavaScript

    How to replace css using jquery after user agent detection

    How do I optimize a very loooong page with TONS of images on it?

    How to Build fieldSets with fixed width/height & 2 columns of checkboxes

    How to Add sub menu to dropdown menu in Blogger

    How to find the css class of an anchor link inside a cross domain iFrame?

    Can't figure out how to make a box with multiple images with CSS/HTML

    CSS How to make text align background-color top line

    How to adjust height of the div base on contents? [duplicate]

    CSS Sprites - How to Align-bottom all Sprite Buttons

    How to import css dynamically with js?

    How to get rid of scrollbars around iframe

    How to use easily svg as icon?

    how to animate a css grandient change with jquery

    how to change browsers default scrollbar using css or jquery

    How to draw a line on the baseline of the text in HTML/SVG/CSS

    How to implement this logic in CSS?

    How do I add a link to my CSS background?

    How to scale and center text vertically in a fluid layout? (using CSS)

    How to apply css style to custom attributes

    how to show one element under the other one?

    Ambiguous match, found 2 elements matching css, how to get to the second one?