I insert html items in my page-wrapper and let them float left.
After importing pics the first one looks good, the second has some kind of an offset (see example).
I can drag the 2nd item to the top via mouse, but only when it holds a pic, not when I leave it as an html item. Feels even strange that I can move it with the mouse…
You have a space character between them that is messing things up.
That’s one way of looking at it - although I think the simplest solution
would be to remove the floats and put all the images inline - in the same
paragraph.
That’s what I’d do, Chris - unless you have some other reason to float what
are essentially inline images.
Select the rightmost image so that its handles are showing. Use the Left Arrow to move the selection to the left (one click) and then Delete should get rid of the ‘space’
Select the rightmost image so that its handles are showing. Use the Left Arrow to move the selection to the left (one click) and then Delete should get rid of the ‘space’
This is working, great! But if I add a new item this is what happens (example). And this time the trick deletes the second pic but the html item stays somehow wrong.
In my example I also added a picture of the structure I would like to achieve. Maybe there is another approach that
works as well
Remember that your images are inline - in a paragraph - so, p tags right?
The p tags have a margin and a font-size, even though there is no text in
that line. Even floated, divs are block-level elements - like paragraphs
and must respond to the p tags reservation of space for non-existing text.
To fix this type of layout you would have to make and apply a
paragraph-level style - for the paragraph, not the images. The style would
need the following attributes:
margin: 0;
font-size: 0;
If you want to mix images and divs, I think you would be better served to
enclose your images in divs as well, then float only the divs and not the
images. Then I would instead make the images as background images to
accommodate any resizing of the divs due to page flexing or responsive
design.
–
Ernie Simpson
On Thu, Sep 18, 2014 at 5:47 AM, chrisss email@hidden wrote:
Select the rightmost image so that its handles are showing. Use the Left
Arrow to move the selection to the left (one click) and then Delete should
get rid of the ‘space’
This is working, great! But if I add a new item this is what happens
(example). And this time the trick deletes the second pic but the html item
stays somehow wrong.
In my example I also added a picture of the structure I would like to
achieve. Maybe there is another approach that
works as well
that was it! Images as background in divs. Thank you so much. That is the difficulty level I can handle and it works like expected…
Cheers,
Chris
enclose your images in divs as well, then float only the divs and not the
images. Then I would instead make the images as background images to
accommodate any resizing of the divs due to page flexing or responsive
design.