[TYPO3-content-rendering] CSS Styled Imgtext

[Christopher]

JoH wrote:
 >
 > Well - how do you tell your div tags (or div tags or whichever you might
 > use) to render i.e. 9 images with 3 columns and 3 rows then?
 > What about 3 columns containing 3 images of different height?
 > How do you render them without additional spaces?
 > This is all default behaviour of original textpic elements and you will
 > still have to realize this while using your approach to stay backwards
 > compatible.
 > And I don't see how you want to do this using floated elements only ...
 >

Well, this doesn't seem to be an insurmountable problem to me, provided 
we find layout tables sufficiently irksome (when well-used, I don't find 
them so, but I don't always like how they degrade when a document is 
presented unstyled...) Granted this task is somewhat easier when using a 
table to do it, but isn't the whole point of content management that you 
only have to do the tricky setup stuff _once_?

Provided we're willing to use a little programming logic to help out the 
  CSS, we could use a list element to do this:


--------------------------------------------------------------

<ul>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
   <li>
     <img src="#" />
     <div>Caption</div>
   </li>
</ul>

<p>Curabitur non diam et justo pharetra fringilla. Nulla ligula erat, 
facilisis at, consequat nec, sodales eu, lectus. Integer tellus. Aliquam 
turpis. Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Nam molestie quam vel ante. Maecenas 
nec tortor. Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices posuere cubilia Curae; Mauris blandit. Vivamus consectetuer 
suscipit nulla. Donec non metus et purus aliquam viverra. Donec rhoncus. 
Cras in quam a ligula egestas hendrerit. Curabitur posuere auctor diam. 
Vivamus dui. Proin quam diam, commodo vitae, interdum vel, congue eget, 
ligula.</p>

--------------------------------------------------------------

It seems to me that what would be necessary to make this _work_ is the 
following (I'm assuming that most of the css involved would be 
predefined, and that we would write additonal styles into the head of 
the document unless it were _absolutely_ necessary to add inline styles):

   1. Assign a dynamic id to the content element (this already 
happens...), so that we can get at the elements inside it with 
contextual selectors, AND a standard class to the content element only 
so we can style the content element and contents generically.

   2. Float the <ul>. In some cases, the containing element will need to 
be a) styled or b) followed by a closing <div>. I think this might best 
be handled by adding a checkbox to the BE form

   3. Style the width of the <ul> (and possibly the height) dynamically 
based on the widths of the widest of (images 1, 4, and 7), (images 2, 5, 
and 8), and (images 3, 6 and 9).

   4. Float the <li> elements

   5. Assign dynamic ids to the list items

   6. Assign styles to the list item ids based on the width and height 
of the containing images. This is clearly the hardest part. I'd suggest 
floating the <img> and <div> elements in the list items so that their 
parent containers would expand to fully contain their contents (this 
solves most of the problems with getting the image container to contain 
both the secifically-dimensioned image and the relatively specified text 
below it). We would need to assign width, height and padding to the list 
items in order for this to work.

Obviously this is not a fully worked-out solution, but as long as some 
of the styles could be dynamically generated, I don't see what the major 
impediments are. Incidentally, I don't test HTML/CSS on Opera < 7, but 
I'm almost positive that the general strategy I'm talking about can be 
made to work in IE Win >= 5, Opera Win >= 7.5.x, Firefox 1.x/Moz 1.7 
Win/Mac/*nix, Safari >= 1.2 (and probably Konqueror), IE 5.2 Mac OSX/OS9...

-Christopher


PS
- why would we need to make this backwards compatible? I'd say it's 
better to clean up the existing content rendering and create a new 
extension that can do the same without tables, provided enough people 
want that. If we create a new extension, we could also include/add 
options for layouts that are not well-suited to table-based layouts...

- for the nitpickers among us, the method above could be accomplished 
with a <dl> too...