[TYPO3] Image right or below text depending on layout width?

Gebhardt Thomas gebhardt at hrz.uni-marburg.de
Fri Apr 28 13:06:14 CEST 2006


Hi,

On Friday 28 April 2006 11:20, Tapio Markula wrote:
>> It would be nice if the image would be positioned below the text
>> when it does not fit on the right side.

> AFAIK new css_styled_content use floating elements, which automatic
> goes below text if image don't fit to the same row.
> The old method use floating tables, which should behave the same.

actually I'm using a recent 
css_styled_content (v. 0.2.2)
cron_cssstyledimgtext (v 0.4.1)
together with typo3 4.0

which uses floating divs. Here is a minimal page generated by typo3,
including the relevant css that shows the overlap effect.

Cheers, Thomas


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<style type="text/css" media="all">

/* Needed for noRows setting */
DIV.csi-textpic DIV.csi-imagecolumn { float: left; display: inline; }

/* Right (in text) */
DIV.csi-intext-right DIV.csi-imagewrap { float: right; }

</style>
</head>
<div class="csi-textpic csi-intext-right">
  <div class="csi-imagewrap">
    <dl class="csi-image" style="width:236px;">
      <dt><img src="dummy.jpg" 
          width="236" height="241" border="0" alt="Alt-Text" title="Titel" />
      </dt>
      <dd class="csi-caption"><p class="csc-caption">A Picture</p></dd>
    </dl>
  </div>
  <div class="csi-text">
    <ul>
      <li>AAAAAAAAAAAAAAAAAAAAAAAAAAA</li>
      <li>BBBBBBBBBBBBBBBBBBBBBBBBBBB</li>
      <li>CCCCCCCCCCCCCCCCCCCCCCCCCCC</li>
      <li>DDDDDDDDDDDDDDDDDDDDDDDDDDD</li>
      <li>EEEEEEEEEEEEEEEEEEEEEEEEEEE</li>
      <li>FFFFFFFFFFFFFFFFFFFFFFFFFFF</li>
    </ul>
  </div>
</div>
</html>



More information about the TYPO3-english mailing list