I am trying to add a success onto a page on our website: https://www.knowsleycollege.ac.uk/results-day-2021-successes/ and have the image appear on the right, and the text wrapping around it.
However, it seems to align to the right, but then not all the text wraps around it. I have tried adjusting the CSS, but nothing seems to work.
How can this be solved?
The <p> tag has "clear:both" property set. Due to this the text is not wrapping adjacent to the image. see the screenshot for reference.
Removing this "clear" property will work for you.
That's due to the GENERAL clear: both; setting for p tags of your theme. You could erase that in your stylesheet, but that might affect a lot of other pages.
Or you add a style="clear:none" attribute to those p tags which follow the image in the "text" (actually code) mode of the editor, like
<p style="clear:none"> ...your text ... </p>
I need to ensure the paragraph clear property is set to none.
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I have HTML like below and all is displaying grand, the problem is that due to a problem with Sharepoint 2013's editor your unable to edit the link text but as soon as I remove display: block I can edit the link text, the same happens using float.
My question is there a way to emulate the affect of display: block where it will span the whole width that is available to it without using display or float?
<div class="button">
Link Text
</div>
There is one option to make an inline element to be like a block by using position:absolute without using display or float.
But I hope absolute positioning doesn't fit your want. Thus, the final conclusion is that you must use display or float property to render it correctly.
If you even use absolute then don't forget to keep position:relative to your parent element from which you want to be the element as absolute.
You could try display: inline-block; width: 100%;. You might need to alter the width to take into account any padding or border you've set.
(In the past I've used an edit mode panel and other tricks, so these hacky styles only apply when the page is being edited.)
SharePoint 2013's editor is so utterly awesome isn't it? :-(
I find that images floated right won't sit alongside a heading tag such as H3. The H3 tag wants to have its own line so it will always appear below the image.
If I put the image also inside the H3 tag then it works but I would prefer to correct this in the CSS somehow as some of our editors aren't used to delving into the html.
Is this a standard way that H tags behave? Or is it a quirk of my CSS that I can tweak?
I'm doing this in Wordpress using a child theme based on the Thematic theme.
This is a normal behaviour as H tags are block level elements. See this explanation for more information.
Also note that you can make a block level element not to expand all the width (as it's normal for a block element), for example if you make it float (and decrease its width), changing its display propery, etc. See this fantastic tutorial for more information.
try putting the h3 tag after the image tag.... they should appear side by side.....
like this:
<img src="path/to/some/image" style="float:right;" />
<h3>some heading</h3>
All you should need to do is add float:left; to your h3 tag.
See this fiddle.
I want to use a background image to highlight text in a paragraph. I do not want to use the background-color property for this as I want an image that look more like it was hand highlighted. How can I do this INLINE? I seem to only be able to do it as a block element and then the text breaks to its own line. I need it inline, a sentence here or there within a paragraph.
Example of it working but only as a block level element:
link text
Please scroll down a bit to the YELLOW highlighted text. I need the highlighting to NOT cause the text to break onto the next line AND to end when the associated span ends, which could be right in the middle of a paragraph.
THANK YOU! I read all over the place and could not see a solution.
Change display: block to display: inline on .highlite1.
What browser are you using? Works fine in Firefox 3.6.10 with display: inline.
Setting the span to display:inline seems to work in Chrome and FF. Not tried it in others though.