Hi Eric,
Thanks very much for taking time explaining and providing this detailed
answer. That works perfectly.
Posting back to a CSS training is certainly a way of answering but not the
most efficient for users willing to discover, with a limited amount of
time, your really nice application ....
Thanks a lot
Regards
Vpl
Le mardi 18 mars 2014 17:26:10 UTC+1, Eric Shulman a écrit :
>
> On Tuesday, March 18, 2014 4:29:07 AM UTC-7, vpl wrote:
>>
>> <img src="solar.png" style="width: 50%;high: 50%; float: right;" />
>>
>> ! This is title
>>
>> * item-1
>>
>> ** item1.1
>>
>> * item-2
>>
>
> The problem you are having (where the image is taller than the tiddler
> content and overflows the tiddler) is due to the way that CSS "float"
> attribute works.
>
> The image you specified has "float:right". This means that all content
> that follows the image will be rendered next to the image, starting at the
> same vertical position as the top of the image. If the content that
> follows is longer than the image, then it continues to "flow" around the
> image, until it is below the bottom of the image, after which it renders as
> normal (i.e., using the full available width of the tiddler).
>
> In your example case, the content of the tiddler is shorter than the
> image. However, the *image* is still floating and, as I wrote above,
> **ALL** content that follows the floating image will be "flowed" around the
> image until it is below the bottom of the image. This includes content
> from the tiddler that follows the one with the floated image.
>
> Fortunately, in standard CSS usage, there is a way to explicitly terminate
> the "float/flow" handling: when the browser encounters a DIV with CSS
> attribute "clear:left", "clear:right" or "clear:both", it forces any
> content within (or following) that DIV to be rendered AFTER the floated
> image element.
>
> Thus:
> <img src="..." style="...;float:right;...">
> this content will be
> flowed NEXT to the image
> <div style="clear:both;line-height:0px;">
> this content will be rendered BELOW the image
> </div>
> and so will this content
>
> if you don't have any content to follow the image, embed an empty DIV:
> <img src="..." style="...;float:right;...">
> content
> <div style="clear:both;line-height:0px;"></div>
>
> This should produce the results you are expecting (i.e., the floated image
> is completely contained within the tiddler extents)
>
> Of course, it's a bit inconvenient to remember to add this div to each
> tiddler that has a floating image. Fortunately, there is a way to specify
> the "clear:both" attribute using CSS within a stylesheet. All you need to
> do is create a tiddler tagged with "$:/tags/stylesheet", containing the
> following:
> div.tw-tiddler-frame.tw-tiddler-exists:after {
> content: ".";
> display: block;
> height: 0;
> clear: both;
> visibility: hidden;
> }
>
> With this CSS in place, floated images will *automatically* be fully
> contained inside the tiddler-frame, without needing to add any HTML to
> individual tiddlers.
>
> enjoy,
> -e
> Eric Shulman
> TiddlyTools / ELS Design Studios
>
> YOUR DONATIONS ARE VERY IMPORTANT!
> HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
> http://TiddlyTools.github.com/fundraising.html#MakeADonation
>
> Professional TiddlyWiki Consulting Services...
> Analysis, Design, and Custom Solutions:
> http://www.TiddlyTools.com/#Contact
>
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
