[tw5] Best way to control transcluded image flow?

[Michael Wiktowy]

I am seeking some advice:

I have a bunch of transcluded images in a tiddler like so:

{{img1_top.gif}}

{{img1_bottom.gif}}

{{img2_top.gif}}

{{img2_bottom.gif}}

Normally they flow one on top of the other but what I realized is, given enough horizontal space, they will flow beside each other even if there is blank lines between them. This is understandable but undesirable to me since they are chopped up parts of a single image.

I could go through and put a <br> (or some other markup) after each one but there are *a lot* of them.

Is there a more efficient way to cause these images to stack vertically using some CSS magic. I would be happy if this condition was applied globally since there are no instances in this particular document where I am stacking images side-by-side. But I would also be happy if it just affected the "Open in new window" pane as that (in the absence of a sidebar and the content of which I might like to print) is where I see the issue the most.

Thanks,

/Mike

[Mat]

Even if I don't fully understand your problem description, I would think that putting them in a table should solve the issue. You can set the borders to be invisible with this CSS:

<style> 

#noborders, #noborders th, #noborders tr, #noborders td {border:0; }

</style>

...either the <style> commands like that in the local tiddler or put in separate tiddler and tag it  $:/tags/Stylesheet

then you apply it to you table by using e.g 

<div id="noborders">

your table

</div>

I think this last bit should work with wikitables (i.e |this|type| ) but otherwise you make a html table and just add the id like so; <table id="noborders">

<:-)

[Michael Wiktowy]

On Monday, July 13, 2015 at 8:02:32 PM UTC-4, Mat wrote:

Even if I don't fully understand your problem description, I would think that putting them in a table should solve the issue. You can set the borders to be invisible with this CSS:

<style> 

#noborders, #noborders th, #noborders tr, #noborders td {border:0; }

</style>

...either the <style> commands like that in the local tiddler or put in separate tiddler and tag it  $:/tags/Stylesheet

then you apply it to you table by using e.g 

<div id="noborders">

your table

</div>

I think this last bit should work with wikitables (i.e |this|type| ) but otherwise you make a html table and just add the id like so; <table id="noborders">

Thanks. I know that I could apply specific formatting to each instance (either with a table or <br> tags) and force all the images into one column but I was hoping for a way to do so globally so that I wouldn't have to edit each and every tiddler. Maybe it isn't simple and I will just have to do the brute force method.

/Mike

[Eric Shulman]

On Monday, July 13, 2015 at 2:03:15 PM UTC-7, Michael Wiktowy wrote:

Is there a more efficient way to cause these images to stack vertically using some CSS magic. I would be happy if this condition was applied globally since there are no instances in this particular document where I am stacking images side-by-side.

Perhaps something like this would do:

   img { display:block; }

-e

[Michael Wiktowy]

Thank you very much! That was the exact CSS magic that I was looking for (but Google was serving up endless pages of not-so-useful "float" descriptions with the search terms that I was using).

Popping that into a stylesheet tiddler brought all my split images back into one column on a wide page. I will override that with inline if and where needed.

/Mike