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 align image to top left of div

    CSS-3 - How can I place a white space holder above two columns?

    How to use pure css selector to select hidden element

    How do I style hyperlinks separately, using CSS?

    How do I show specific images from a get_children array in WordPress

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to make UL Tabs with only HTML CSS

    How to make all the content placed in the center of div?

    How do I set css using jQuery .css after a period of time?

    How to remove curved line in HTML/CSS

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to change ListView cell's text color in JavaFX using css

    How to fix width of column in two-column CSS lay out?

    How to apply a CSS class to a SVG Text element

    How to draw a half circle (border, outline only) [closed]

    Dropdown container not showing right padding

    How to arrange divs by css floats?

    How to show html template using inline styles only?

    How do I adjust triangle in css price tag to the right size

    How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

    how to change padding of last element of li in css

    CSS - How to deactivate the :hover pseudo class in IE 6

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    how to move button to left

    How do you maintain CSS layout when adding content (ASP.NET)

    How to create slideshow in css without having to make more than one class?

    How to nest classes in css modules and react?

    Chrome doesn't show the favicon

    How to make a simple plus one voting system in code igniter

    How to serve SVG using C# so that it will render as a CSS background image