i don't know how to solve a special problem.
I searched for it in google but i can't anything, probably because i don't have a correct keywords to find a solution.
I will explain my problem with an example:
<div>
<label>Message</label>
<div id="messageContent">
<b>Title:</b>
The content of the message
<u>Other type of content
</div>
<div id="differentContent">
The content of this div should not be affected by the "<u>" of the messageContent div
</div>
</div>
My problem now is that I have a div where I display different messages and if there is anything without a closing tag it does also affect every following text on the page and sometimes it also destroy the structure of the page.
What I want is that everything inside the messageContent div does not affect anything outside of it.
In HTML, every tag that is once opened needs to be closed. Since you have an opened u tag that is never closed, your browser applies the appropriate styling (in this case an underline) to the end of the page. To fix this problem, you simply need to close the tag where you want it to end, like this :
<u>Other type of content</u>
In the differentContent div, since you're trying to display the tag as plain text, you'll need to escape these string by using the appropriate character: <u>
Check out Fixing unclosed HTML tags
It provides both server-side (PHP Tidy)or JS-side solutions.
I would add that you can also try using jQuery's parser if you use jQuery, its parser guarantees the DOM is well formatted, but it may fail when the input is too malformed:
$('#messageContent').html('<div>a<div>b');
Related
The pre tag is used for defining block of preformatted text in order to preserve the tab, text space, line break e.t.c.
But I don't really know while this is not working for me. Am having excess WhiteSpace in all my blog posts.
I have provided a screenshot for view as well as a live url to see the effect of what am trying to explained.
I tried this:
.pre-blog{white-space:pre-line;white-space:-moz-pre-line;white-space:-pre-line;white-space:-o-pre-line;word-wrap:break-word;word-break:keep-all;line-height:1.5em; display:inline;margin:0}
But no luck with it cos it couldn't solve the issue.
Here is one of the blog posts that you can access and see what I am trying to explain.
Screenshot:
the whitespace you show in the screenshot is the space between li items. This is default styling applied for these html elements.
Easiest way to get rid of the space would be to apply display: flex and flex-direction: column to the parent, which is the ol element
You seem to be trying to put <div>s and other elements inside the <pre>. As far as I know that's not how <pre> works; it's only meant to contain plaintext that you want preformatted in a certain way as described here. It's usually used for displaying things like computer code that need all their indentation preserved.
Your screenshot and linked web page seem to be ordinary formatted text. I'm not sure what exactly you're trying to achieve, but <pre> is not the right way to do it; you'll have better luck with proper use of <p> and <br> tags and CSS styling with properties like margin, padding, and line-height. (Depending on your use-case, if you want to avoid manually typing tags, you might want to consider something like Markdown to automatically add the formatting tags for you).
I suggest you replace your <pre> with a <div>, and then post a different question regarding the whitespace if you're not able to figure it out yourself.
Inside a wysiwyg editor, I have to code a lot of non-editable divs. This following method works :
<div contenteditable="false"> Non editable content here </div>
But "contenteditable" is quite a long word and i'd like to shorten it. Is there a way to define something at the top of the html file like "define ce = contenteditable" and then using it like that <div ce="false">...</div> ? I know that example doesn't work, but is there another, similar way ?
No, there is no way to alias the html element attributes.
However, the div element is not editable by default. Therefore it should not be necessary to set contenteditable="false" on any div. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
If you are finding that this is necessary to prevent the rendered content from being edited, then that may be an effect of the wysiwyg editor you are using.
I have a situation where the client needs to be able to insert html he is copying off other sites into a product description.
He has no clue about html so he is literally copying it off the site with the permission of suppliers and then pasting into an Opencart description.
The issue is that sometimes what he is copying isnt correctly formatted and so it may be closing divs too early or not closing them at all making the html for the remainder of the page all over the place.
Is it possible to have a situation where i can create div and basically tell it Close off this div here no matter what the html inside it contains?
Thanks.
I guess just to give an example. In this situation the bottom </div> would not close off <div class="myclosedoffdiv"> even though thats what Id like it to do.
<div class="myclosedoffdiv">
<div><span> This is incorrectly formatted html</span>
</div>
You can create jquery object from string (in case if using jquery):
var div = $('<div><span> This is incorrectly formatted html</span>');
div[0] will return:
<div><span> This is incorrectly formatted html</span></div>
then insert it into wrapper:
$('.myclosedoffdiv').html(div);
I need to hide a
</div>
without JavaScript or Jquery. I tried
<span style="display: none;"></div></span>
but it didn’t work at all.
Any help is much appreciated.
EDIT:
Thanks for confirming that it is NOT possible!
That’s what I wanted to know.
I solved my problem by changing my markup a little bit.
In my case it would have been logic because it simply would have saved some lines of code. (Basically I wanted to insert a div into another when a user activates an option, hiding just one closing tag and one new div opening tag when the option is disabled, showing them when the option is activated. It’s a tumblr theme with some closing tags rendered in {block:Posts} after every post. No need to get further in detail, i think it would be unnecessary complicated because the problem is already solved. Thanks!
I can think of absolutely no logical reason for doing this. even though a div tag may look like two elements to some, it is in fact one element and neither the starting nor the closing tag function on their own.
The fact that a
</div>
tag is being displayed suggests that you have an extra closing tag - there is no corresponding
<div>
opening tag. These tags should never be displayed on a page if implemented correctly.
Try looking through your code and checking every opening
<div>
has a corresponding
</div>
In html all tags must be in pairs, having one opening and one closing tag. e.g.
<div id "test">
Test text!
</div>
JP
The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.