JCE editor in Joomla removes link from a div - html

When I create a div with a link, and I toggle the editor, JCE removes the entire link code from the div.
This is the example:
<div id="test">text or image here</div>
When I toggle editor to see the result, and than back to the code view, this is the result:
<div id="test">text or image here </div>
So I don't understand why JCE removes the link outside of the div. I put there the link cause I would like the entire div with its background to be clickable.
If I save the article, when I'm in the code view, it saves the link! So it remove this only if I change to the visual way when I'm editing the article.

<div> is a block element and <a> is an inline element ahd before HTML5 putting a block inside of any inline element was not valid. This is why I suspect that JCE would wipe it out; in pre HTML5 this would be invalid markup. In HTML5 you can put a block element inside of <a> it, but I'm not sure if there is a setting in JCE to get it to validate with HTML5. You should probably ask on their forums. This link gives you some more detail.

Related

Why is anchor tag not working inside the footer element in C# asp,net mvc? The link is not clickable

In my mvc project, I have a cshtml file, wherein I have an anchor tag placed inside a footer element, which looks like this:
<footer class="login_footer">#Messages.msgCopyright | <a onclick="BeginSupportLoginMode();">Support Login</a></footer>
The problem here is that I am not able to click on the link when it is placed inside the footer element. The link was clickable when I tried putting it outside the footer element. I have tried finding solutions in several ways, but nothing has worked yet. Please suggest what should be done in this case.
The <a> is missing a href attribute. It is valid but it doesn't behave as a hyperlink (It is not tab-able or clickable). If it should be a clickable link, add a href="" attribute.

How to make mdGridTile's into links

I have a similar question as this thread, but the answer doesn't seem to be listed anymore. I have a list of tiles that show a property image and some relevant information. I'd like each to be a full link to another page with more information on the property.
I've made my tiles into a directive, and currently the html content of that directive is wrapped in an anchor tag. Which works to reach my specified link, however that anchor tag only matches the height of the mdGridTileFooter.
Is there a way to make the entire tile clickable? So that the user can click on any part of it and access the intended link (not just the bottom footer?
The HTML Directive:
<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path}}">
<div>
<md-grid-tile-footer class="saved-prop-address">
<div class="saved-prop-address-title" ng-bind="spVm.city"></div>
<div class="saved-prop-address-subtitle"
ng-bind="proforma.listing.update_date | date: 'MMMM dd'"></div>
</md-grid-tile-footer>
</div>
</a>
The HTML Page with the Tile List:
<md-grid-list md-cols-xs="2"
md-cols-sm="3" md-cols-md="3" md-cols-gt-md="6"
md-row-height="1:1" md-gutter="4px">
<md-grid-tile class="saved-prop"
ng-repeat="proforma in sdVm.pageGroups[sdVm.saved.idx]"
ng-click="sdVm.showSelectedProperty(proforma); sdVm.linkToProperty(proforma)"
ng-href="{{sdVm.path}}"
ng-style="{'background-image':'url({{proforma.thumbnail_url}})'}">
<pgo-saved-property proforma="proforma">
</pgo-saved-property>
</md-grid-tile>
</md-grid-list>
Thank you!
Since it looks like the directive had no height, adding any responsive height/width styling to the anchor tag won't work.
Adding this code to the css for the directive, and the anchor tag, will bring the anchor/link to the full height and width of the tile.
style="display:block;height:100%;width:100%;"
And any responsive changes that occur with the tiles will work with this code as well.

Notepad++ text alignment

I am trying to create a simple document after recently starting to learn HTML and CSS. I am using Notepad++ with the plugin "Preview HTML".
The problem is the text in the preview window is centered by default(meaning i have to insert text-align to render any text left).
However, when I open my HTML file in a browser (without text-align), it displays text to the original left alignment.
Any idea how I can change the default text alignment in the "Preview HTML" window to left?
Below are screenshots depicting the problem
Preview in "Preview HTML"
Preview in Google Chrome
I tried what you gave, and the reason is improper closing <h2> tag. You missed the forward-slash sign while closing. Causing the <h2> tag to never end and the below <p></p> tag was treated as enclosed inside this and thus style for parent tag i.e. .heading class got applied to the child tag of <p>
<h2 id="heading">Testing<h2>
should be
<h2 id="heading">Testing**</h2>**
for it to work.
screenshot of corrected html is below
screenshot showing what happened actually in DOM

Remove AHREF next Html tag

</body>
</html>
visit us
I have wordpress theme with this ahref in ALL pages, can i remove??. I search on all php functions and css style but nothing...any idea?
Thanks for your time!
CSS cannot remove element from DOM. If you know javascript or better jQuery, just give all anchor which you want to remove a specific class then remove it all by using:
$(".yourClass").remove();
If you don't know jQuery, then you need to use the parent of each element to remove it:
element.parentNode.removeChild(element);
Look like you have this tag in footer template, scroll down to check if there is any text written after closing html tag, or sometimes the case may be that your editor does not have wrap text option set as a result you are not able to see this text may be on right side, scroll to right of the editor or alternatively you can use the search option to locate the text.

Div ID uses properties from the one above it

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.