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.
Related
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.
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
Does anyone know how to make a surrounding div the width of the inner text?
I know i can set the div to display: inline-block; but this only works when your inner text is one line. Whenever the text is too big as the set max-width, the text starts on a second line and the width of the div is set as the max-width.
Even if there appears empty space now.
On this image, i want to apply this to the title with the pink transparent background.
https://img.skitch.com/20120206-e912tg8nwnrrbm5qqhxrb789qk.jpg
Many thanks!
Tom
My solution:
As i can't change the markup easily, the jquery solution did the trick indeed.
This is what i did:
$('#something h2').each(function(index) {
$(this).css('width',$(this).find('a').css('width'));
});
Have you tried setting it using jQuery?
$('#UrDIV').css('width',$('#UrPText'))
Maybe this will work for you.
considered wrapping <div><span>my multiline text</span></div> elements?
I have a system similar to BB code whereby text within two tags is converted into a link which when hovered over produces an line image.
The problem is that sometimes if the phrase is long the text wraps onto the next line. When this occur the image is displayed above the text on the preceeding line and doesn't look right. Because of this I want to ensure that if the text is going to wrap, it instead breaks to a new line.
I'm happy with any CSS3 only solutions to this.
Thanks
give your a css display: inline-block. Inline block doesn't allow breaking within the block and therefore moves to the next line.
a {
display: inline-block;
}
I have a box where user activity will be inside.
Now I am having two issues.
The first one is that i have a float left element, and when this ends the text also goes at left. (issue1)
The second is that if you type in a non-breaking word/sentence, like eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee it wont break it and go under, but allows it going to the right, like it do not listen to the width specified.
Here is live of both issues:
http://jsfiddle.net/AB4Ls/5/
Help please, how can I solve this, and why is this happening?
For first issue set element that contains text to be displayed as block and give it left-margin amount of floated element width.
display: block;
margin-left: 40px; /* adjust to your needs */
For second issue check this url: http://perishablepress.com/press/2010/06/01/wrapping-content/
Explanation is to long to repeat it here.
Are you sure it is possible you have such long words?
If true you can use css3 property word-wrap or parse words with php before displaying it.
I think you're saying that you want the text in the issue 1 to NOT flow back under your image that you've floated to the left.
If so, just surround the text with a div tag and use display: table-cell. This will put a "rigid border" if you will, around your text.