Extended width ...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hello everybody,

I wrote a page for a compiled HTML help, that includes a few wide  
pictures, that in plain page I display on the right of the presentation  

So the style is as follows :

<p style="float:left;width:220px;">Please admire this beautiful picture  
<p style="margin-left:250px;margin-right:100px;">
    <img title="The beautiful picture" alt="Beautiful picture"  
style="width:400px" src="beautiful.png"/>

If I display that full screen, OK it gives what I described to begin  
with. But if display it on the right of the screen, in an about 500 px  
width window, then the picture exceeds the right of the window, and the  
user has to scroll with the scrollbar of the window (is the expression  
correct ?).

Any idea what to do so that the available width for the display is  
considered to be the width of the window, to avoid that the use of float  
gives the same results as table ?

Re: Extended width ...

18.2.2016, 16:07, Gloops wrote:

Quoted text here. Click to load it

In your example, the picture is 400 pixels wide, or scaled to that  
width. I would not call that particularly wide these days. But  
admittedly it can be relatively wide on pocket-size devices when  
rendered in natural size (one image pixel = one device pixel).

Quoted text here. Click to load it

Setting text paragraph width in pixels is questionable. Setting a right  
margin on the image looks unnecessary.

Quoted text here. Click to load it

The limit is a little over 650 pixels actually: 250 for the left margin  
of the image plus 400 for the width of the image plus a few pixels (by  
default) for the left margin of the page. Exceeding that causes part of  
the image to be hidden and a horizontal scrollbar to appear.

Quoted text here. Click to load it

I don’t quite understand the formulation, but the most important  
question is what should happen when the window is narrow.

Assuming that you want the text paragraph width to shrink if needed, you  
could make the image (instead of the text paragraph) floated. You would  
then need to place the <img> element before the <p> element. Something  
like this (using inline styles and pixel widths, just for comparability  
with the current design):

<body style="max-width: 650px;">

<img title="The beautiful picture" alt="Beautiful picture"  
style="width:400px; float: right"
    src="http://lorempixel.com/400/200 /" />

<p style="margin-right: 30px;">
This text will appear to the left of the image, in a column that is
at most 220 pixels wide but will be narrower if needed.
Note that the text may continue at full 650 px width below the image
if is long.
Please admire this beautiful picture :</p>

Yucca, http://www.cs.tut.fi/~jkorpela/

Re: Extended width ...

Le 18/02/2016 19:28, Jukka K. Korpela a écrit :
Quoted text here. Click to load it


Well I meant compared to an icon, 400 px on a 500 px width window begins  
to represent something :)

In fact the picture is nearly full screen, but I narrowed it to 400 px  
so that it can fit in the window.

Quoted text here. Click to load it

OK, but is not the interest of float to allow both columns to appear in  
the window, one below the other if they are too wide to appear side by  
side ?

It seems I should have to fix the width of the body to enforce this ?

I should like to obtain that automatically to the width of the window,  
so that when in full screen the columns can appear side by side. Do I  
have to use a script for that ?

Quoted text here. Click to load it

OK thank you I am going to see what I can do with that.

Re: Extended width ...

Le 18/02/2016 19:28, Jukka K. Korpela a écrit :
Quoted text here. Click to load it

Well seen !
A paragraph followed by a picture gives the good results.

So it was much more simple than what I imagined.

Thank you.

Site Timeline