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.
Related
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');
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
Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
I`ll try to explain what i need as simply as i can.
I have a text area in which i paste some text that contains html tags.
The tags are between some random text and i need to find if there are any broken tags.
For now a i have the code to count how many opening and closing divs i have. But lets say i have 10 opening divs and 9 closing divs. I need to find where exactly inside the text area is that missing closing div. The closing div is not actually missing , but it can be just written badly , for example like this "".
I hope this is clear enough.
Thanks a lot in advance.
Use Stacks.
Whenever you come across an opening tag, push it into the stack.
Whenever you come across a closing tag, check if the top of stack is the same as the closing tag you have got.
If yes, then pop out the top element of the stack.
If No, then there lies your problem.
Note : You need to take the cases such as <img ... /> , < br /> as special cases and just ignore these kinds of tags.
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>