Hello community,
unable to find an already existing answer, I am looking for your kind help here. The topic surely is not new, but rather complex in its usage…
Given is:
a parent container as a paragraph
within: a figure, positioned by float: left
within figure is an image having width and height declared
after the figure, before the closing tag of the paragraph, there is some text (floating righthand of the figure, fine)
The problem is:
I could not find a way to prevent following elements in the page to print into the righthand text for the figure.
How could this be avoided?
Thanks in advance
Uli
The code I have until now:
<p>
<figure
style="
float: left;
margin-right: 1rem;
margin-left: 0;
padding: 0;
"
>
<img
style="
"
class =""
width ="175"
height ="159"
src=""
alt=""
loading ="lazy"
>
<figcaption>
Some figcaption text ...
</figcaption>
</figure>
Some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text
</p>
Here comes some other, unrelated text, whatever on the page.<br>
This text is placed **directly** following the explanatory text above.
Before we work on the layout, it would be good to get the sematic HTML stucture right.
This will to some extent help with the layout, as the default styles for elements do lean toward a sensible layout.
To start with, wraping your figure in paragraph tags makes little semantic sense, as it’s an image, not a paragraph of text. Figure itself is a block container suitable for an image. So do you need an extra container?
It does depend on context of the content. You do have some text explanitory text with the image. That would lend itself to the figcaption element, but you have a figcaption with more text. Do need both the figcaption text and the explanitory text?
If you need both, the explanitory text should be a <p> all of its own. If you don’t need both the explanitory text should be in the figcaption.
The other unrelated text should be an other <p> possibly two, replacing the <br> tag.
Thanks a lot SamA74!
The gemneral hints are very useful and valuable for a beginner like me and I seem to understand most of what you explained.
Regarding the direct layout within some tags: I just prefer to do so while developing to move parts to CSS once it is reliable in its function.
(Regarding the forum-functionalities, there are uncertainties - please bear with me…)
Having applied all of the proposed ideas and elements, everything is working fine!
Only the top-line of the text “Some explanatory text some exp …” now is positioned above the upper limit of the figure. Both top-lines ought to be in the same height.
What needs to be added to avoid this?
(Shall try to upload an image for better comprehension)
But of course is just one of a myriad of options for containing floats but is by far the neatest method these days. Using clear:both works but does not do the same thing as the parent still doesn’t contain the float.
It looks as though you aren’t floating anyway in your latest example as I can see grid rules at play. If you don’t want text to wrap under the figure then you don’t need float anyway.
You’ll need to post your full code again if you want the alignment checked but it looks like a margin discrepancy from the picture you posted.
Try using codepen to show the problem as that makes it easier for us to help
Thanks, could apply a suitable margin to figcaption and now it works fine in this respect!
Regarding your good help here and help the helpers as well, Codepen also is ready
But how to proceed in a preferred way from here?
The desired complete layout of the figure is much more complex and I already have noticed, that only ‘minor’ additions are spoiling the whole layout…
Would it be best to use this same topic (not quite right semantically) or open up another one, more general with a suiting title, to solve particular, but related problems in separate, dedicated topics ???
If the problem is related to the layout of the figure then you can continue the thread discussion here as the previous answers will help narrow the problem down and give context.
If it’s a new problem unrelated to the figure as such then I would start a new thread.
If you don’t want your text to be invaded by the elements below, you need to put your figure and your text in a div and hide the overflow. This will create a magic barrier that will keep the intruders away from your floated figure.
<div style=“overflow: hidden;”>
<figure style=" float: left; margin-right: 1rem; margin-left: 0; padding: 0; " >
<img style=“” class =“” width =“175” height =“159” src=“” alt=“” loading =“lazy” >
<figcaption> Some figcaption text … </figcaption> </figure> Some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text some explanatory text </div> Here comes some other, unrelated text, whatever on the page.<br>
This text is placed below the explanatory text and the figure.
Still being without much oversight, here please find the actual status. (couldn’t find a way to edit the topic-title a little)
The code-section better is treated like a stand-alone in this case, even if some redundancy is resulting. For me as a beginner the embedding in the final page seems easier and less errorprone then.
Whenever it could help, the whole thing may be uploaded on a temporary subdomain as well.
Continuing from this Codepen, the main item missing now is the positioning of the GIF perfectly on top of the JGP, covering the JPG, once the user likes to see the details.
How would you go about this?
(Below please find the two images - sorry, can’t scale them down…)
What am I looking at here? How do those 2 images relate to the task in hand.
Do you mean you want an image placed directly on top of another image and then when you click it you remove the top image to reveal the image underneath?
I can’t quite get my head around what you are trying to achieve here
edit:
Actually I think I might see what you want and then when you click the animation button you want to hide the visible image and show the other image.
If you move the image up a level you can do that with css like this.
Really great, I am flabbergasted! Never forgot this word since the first time I heard it
And I must admit that this still is more of a miracle than true comprehension on my side…
Neither myself - it surely is rather clumsy. Anyway I also read your note as a calming confirmation regarding the stability on most browsers and devices. Being very much open for constructive criticism, I would be happy to work on any improvements.
At least, most or all relevant is moved to CSS now.
The Codepen is showing the actual state:
(BTW: I could not find an edit post button to upload smaller images)
Hello PaulOB,
before uploading a pre-final version for the completed figure element (and contents), would you be so kind to check why no background color can be applied to the marker?
What is working fine:
.summary-top::marker {
color: red;
}
What is not working:
.summary-top::marker {
color: red;
background-color: green; /* this is not working */
}
(The colors are not to be taken serious, they are for checking only…)
The marker is a browser generated pseudo element and you would have a similar problem if you were to try and change the background color of a bullet marker in a standard list.
It doesn’t make a lot of sense to change the background on that arrow anyway as you would have a small coloured square with a black triangle dividing it. It would look odd. (Although as an aside if you use the -webkit-marker version they will indeed let you change the background on webkit browsers and indeed does look odd)
If you meant to change the background of the whole summary then that is syled via the actual summary element.
If indeed you want a custom marker then its best to get rid of the default and create your own which can be anything you like as long as you know how tyo style it.
I’ve changed it in my demo to a circle so you should be able to work out how to change it to your desired outcome.
Hello PaulOB,
labouring to hone this snippet for the actual usecase, I have not found a way to relate the width (and height - the browser ought to know the height as well for the case of lazyload) in the layout relative to the vieport width.
Whatever I have tried, unexpected behaviour is happening…
Could you recommend a concise method?
