How to link section in mjml - mjml

I want to link the whole section as an button to my page, but I dont know how to..? Does anyone know whats the best solution to do this?
[![
<mj-section>
<mj-group width="90%">
<mj-column width="40%">
<mj-image width="100px" src="image"/>
</mj-column>
<mj-column>
<mj-text>
<p css-class="partner-name">Text</p>
<p>Text</p>
<mj-button href="https://mecenat.com/se" line-height="24px" style="color:#FA6F21;">Text<img src="image-orange-arrow" style="width:18px; vertical-align:middle; margin-left: 8px" /> </mj-button>
</mj-text>
</mj-column>
</mj-group>
</mj-section>
]1]1

Related

Please tell me how to create a toggle out of an image?

I want multiple images in a window. When I click on a image I want toggle out showing some info. I want this on all my images.
You didn't post the technologies you're using so I assume you are using jQuery and html:
Here is the html example:
<div>
<img class="img" data-imgid="img1" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" width="200px" />
<br/>
<text style="display:none;" id="img1">Image1 ......</text>
<br/><br/>
<img class="img" data-imgid="img2" src="http://www.111ideas.com/wp-content/uploads/2018/01/download-rose-image.jpg" width="200px" />
<br/>
<text style="display:none" id="img2" class="text" hide>Image2 </text>
<br/><br/>
<img class="img" data-imgid="img3" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" width="200px" />
<br/>
<text style="display:none" id="img3" class="text" hide>Finally Image3 :)</text>
</div>
​and here is the jQuery code which handle the toggling process.You need to use toggle method based on the id of any text tag in the html code inside onclick function to toggle it:
$(function () {
$('.img').on('click', function () {
var txtId = $(this).attr('data-imgid');
$('#' + txtId).toggle();
});
});
You can see live demo here:
http://jsfiddle.net/gtU56/342/

Joomla turns image into Read:more link

I got a problem with Joomla. I created a MenuItemType Category Blog which perfectly lists all the articles of a single category. Nevertheless I got a problem when I create an article for the category. Joomla automatically turns all images into readmore links. For instance
<p>
<img alt="" src="image.JPG" style="width: 180px; height: 79px;" />
</p>
will turn into
<a href="/index.php/en/news/24-zweite-news" title="Read more: Zweite News">
<img src="image.JPG" width="180" height="79" class="multithumb_blog" style="border: ;" alt="Read more: Zweite News">
</a>
I cannot find any configuration parameter to change this behaviour.

After iframe, no div value showing in webpage

My application is web based and developed by MVC3 razor. I wanna show SSRS report in my page. For that I have used iframe tag to show SSRS report and its working fine. After the iframe tag I have put a div and included content in that.
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" />
</div>
<div>© 2012</div>
Problem: I facing problem in div i.e. I'm unable to view values inside the div.
I'm using IE8
An iframe is not a self-closing tag. You should change from <iframe /> to <iframe></iframe>:
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://"></iframe>
</div>
<div>© 2012</div>
iframe's can be self-closed with HTML5, but IE8 doesn't support this.
Your iframe code is missing the closing, you should change your code to
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" ></iframe>
</div>
<div>© 2012</div><div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" ></iframe>
</div>
<div>© 2012</div>

image not floating properly in chrome

On this site> http://upcycledonline.com/test/Site/defaultUpCyc.html when I view it in chrome the rightEdge image looks like it is pushed down by something. I have rearranged the code several times and tried the image in different places with no luck. Help please!
Should I throw it in a div and try to make it do something that way?
You can change the markup? If so, do this:
<div id="header" style="overflow:auto">...</div>
<img src="leftEdge.png" style="float: left;">
<div style="float:left;">
<img src="topEdge.png" style="float: left;">
<div id="content">...</div>
<img src="bottomEdge.png" style="float: left;">
</div>
<img src="rightEdge.png" style="float: left;">
Note that:
Nothing inside the new floated div should itself be floated.
You need that overflow:auto on the header
You will have to adjust the height of the content div

XHTML Markup Problems

my template includes following:
<h1 style="height: 80px;" /><img border="0" src="/somemoduledirectoryhere/Headline.ashx?c=sometexthere&fc=" alt="anothertexthere" /></h1>
<h2 style="margin-top: 20px;margin-left: 5px;">someheadlinehere</h2>
I receive following errors during XHTML 1.0 transitional markup.
document type does not allow element "h2" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
end tag for element "h1" which is not open
Would you please suggest me how to fix these two problems?
Thank you.
You're self closing the H1 tag
Remove the forward slash in:
<h1 style="height: 80px;" />
so its
<h1 style="height: 80px;">
<h1 style="height: 80px;" />
^
Remove the self-closing tag syntax.
In first line, you self-close h1:
<h1 style="height: 80px;" />
should be
<h1 style="height: 80px;">

Resources