Html 5 "tel:"not working using eval - html

I fill the repeater with phone numbers to make calls while using on mobile phones.
But it not working.
That's html;
<p style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-top: 36px; font-weight: 500; color: #8b8383"><%#Eval("Telefon") %></p>
How can i solve this? Thanks..

You need to provide the value in the href attribute too:
<p style="font-family: 'Roboto', sans-serif; font-size: 14px; margin-top: 36px; font-weight: 500; color: #8b8383"><%#Eval("Telefon") %></p>

Related

What does the text within the curly brackets (and the vertical lines within them) represent?

See below:
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
So the above, is a standard paragraph tag but with the extra text (which seems like some sort of variable);
The code is from a random markup file I came across, I am curius to see what it represents.
&bull gives you to use a bullet mark and the {|FeatureFour|} is the content inside the <p> tag, so {|FeatureFour|} is just a paragraph content
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• Hello world!</p>
. You can change these content in the text editor.

getting rid of gap in html table

I am getting a gap at the end/beginning of just 2 cells in my email and I can't for the life of me figure out why.
The cell-padding is set to 0
cell-spacing = 0
Here's what I have:
<style type="text/css">
h1,h2,h3,h4,h5,h6,h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;}
h1 {
font-size: 20px;
color: #B99350;
line-height: 1;
font-size: 25px;
padding-top: 10px;
font-align: center;
font-weight: normal;
text-align: center;
}
h3{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #B99350;
font-size: 24px;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 10px;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: capitalize;
}
h4{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #b99350;
font-size: 22px;
padding-right: 10px;
padding-left: 15px;
font-style: normal;
text-align: left;
font-weight: normal;
}
h5{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: normal;
color: #FAFAFA;
font-size: 14px;
padding-top: 3px;
color: #FCFCFC;
}
h6{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding-left: 15px;
color: #FFFFFF;
}
h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;
}
h8 {
padding-left: 15px;}
h9 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;}
body,td,th {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 10px;
color: #FFFFFF;
line-height: 20px;
}
li {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
color: #FFFFFF;
line-height: 1em;
padding-top: 10px;
}
body {
background-color: #FCFCFC;
}
.blue {
color: #B99350;
}
</style>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" valign="center" ;
>
<tbody>
<tr>
<td colspan="2" bgcolor="#201545" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<h7>• AA rated State Government of South Australia occupies 76% of the NLA</h7>
<br>
<h7>• $13 million* spent in refurbishments between 2008 and 2016</h7>
<br>
<h7>• 5.3 year WALE and 97% occupancy</h7>
<br>
<h7>• Located in the core of Adelaide’s CBD</h7>
<br>
<h7>• Surplus land area with development potential</h7>
<br>
<h7>• Fully leased net income of $9.3 million*</h7>
<br>
<h7>• Net lettable area of 19,855sqm*</h7>
<br>
<h7>• 4.5-Star NABERS Rating</h7>
</p>
<h7><strong>Please click here to view the Information Memorandum
<h7></strong><br>
<h9>* approx </h9>
<hr valign="top" width="100%" size="4px" color="#9D7F4A" align="left" style="border-collapse: collapse;" >
<h4>FOR SALE VIA EXPRESSIONS OF INTEREST CLOSING 5PM (AEDT) THURSDAY, 20 OCTOBER 2016</h4></td>
<tr><td valign="top" width="232" align="left" bgcolor="#201545" cellspacing="0" style="padding-left: 15px; ";><img src="JLL_Logo_Rev_WEB.png" width="97" height="42" alt="JLL"/>
<h5><strong>Rob Sewell<br>
</strong>+61 407 243 229<br>
rob.sewell#ap.jll.com</h5>
<h5><strong>Jamie Guerra</strong><br>
+61 418 849 780<br>
jamie.guerra#ap.jll.com</h5>
<h5><strong>Roger Klem <br>
</strong>+61 423 919 373<br>
roger.klem#ap.jll.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Stuart McCann<br>
</strong>+65 8522 1031<br>
stuart.mccann#ap.jll.com</h5></td>
<td valign="top" bgcolor="#201545" style="color: #2BACE2; padding-left: 15px;"><img src="KnightFrank_LR.png" alt="KnightFrank" width="108" height="54"/>
<h5><strong>Guy Bennett<br>
</strong>+61 418 808 548<br>
< guy.bennett#au.knightfrank.com</h5>
<h5><strong>Lukas Weeks</strong><br>
+61 434 957 537<br>
lukas.weeks#au.knightfrank.com</h5>
<h5><strong>James Parry</strong><br>
+ 61 408 553 000<br>
james.parry#au.knightfrank.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Neil Brookes<br>
</strong>+65 8309 4985<br>
neil.brookes#asia.knightfrank.com</h5></td>
</tbody>
</table></tr>
</body>
</html>
There are 2 columns/cells in this section and both are sitting with a massive gap between the (missing) logos and the text above it and I can't figure out how to close it...
Please help!
Thanks
P.S. the top code is not to the end. But I wasn't allowed to show the rest as it was "too much HTML" not enough question...
I HAVE THE ANSWER -
at the very end the
is after & and should be before them.
Simple as that. Swapped it in front and all fixed!
First of all, this is NOT how you use tables!
W3Schools Tables Link
Secondly, the space after each email field is the margin for the h5 tag. See that all your data is wrapped in an h5 tag? Those provide a top-bottom margin. Try removing it to see the effects. You cant call these "cells" because you are not wrapping the individual items in td tags.
Also, dont forget to close your tables.

Keeping HTML in Django email templates DRY

I have created Django html email templates that looks something like this:
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
Hello John
</p>
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
Welcome to the site
</p>
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
More text here...
</p>
Since it's an email template, I must use inline styles and as a result it looks ugly and I have to repeat myself. I'm looking for a way to improve this.
My idea is to create a template tag that will return the style info:
#register.filter
def style(tag):
tags = {
'p': "style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;""
# Will add more options here
}
return tags[tag]
Then in my template I will use:
<p|style>
Hello John
</p>
<p|style>
Welcome to the site
</p>
<p|style>
More text here...
</p>
I know it is not ideal to put html in python code, but I can't think of a better way?
Any thoughts or better ways to achieve this?
Consider defining a CSS class and assigning this class to all the elements that need to be formatted.
template.css
.MyEmailStyle {
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.6em;
font-weight: normal;
margin: 10px 0 10px;
padding: 0;
}
main.html
<p class="MyEmailStyle">
Hello John
</p>
As you can't include external or internal CSS files in an email template, consider using this library.

My CSS doesn't work now that I used a <!--nextpage--> to split my page

This is what my CSS looks like on the page.
<!DOCTYPE html>
<html>
<head>
<style>
p.addresscenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
margin: 0;
text-align: center;
white-space: pre;
}
p.endtagbold {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
line-height: 1.2;
margin: 0;
padding-top:16px;
}
p.hoursofoperationcenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
margin: 0;
text-align: center;
white-space: pre;
}
p.infop {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:30px;
}
p.infostextbox {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 550;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:16px;
}
p.topmenu {
background-color: none;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 500;
font-style: normal;
line-height: 1.4;
margin: 0;
text-align: center;
}
p.towncounty {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 1.4;
margin: 0;
padding-top:16px;
}
</style>
</head>
<body>
<p class="topmenu">Text with id tags here.</p>
There is a set of columns here made with these tags
<div class="one-half first">Text</div>
<div class="one-half"> Text </div>
Then there is more text which is formulated by <p class=""></p> and then finally the <!--nextpage--> attribute occurs somewhere in the middle.
After the <!--nextpage--> tag I have more text with <p class=""></p>
The entire page ends with
</body>
</html>
On my other pages that are not split the css shows up fine. For whatever reason the css is not showing up on page 2 after the <!--nextpage--> . What do I have to do to make sure the css shows up before and after the <!--nextpage--> attribute.
I'm not sure if I understand everything well, but You should try to place <!--nextpage--> between the tags, and not inside of them.
For example:
<p>asdasd</p><!--nextpage--><p>asdasd</p>
Is ok, while:
<p>asdasd<!--nextpage-->asdasdasd</p>
is not ok. I hope this is the case, if not, please do not downvote and update You question with full code. Then I will try to update my answer.
Few more words. When You click next page, then the paragraph element has started on the page before. So on the actual page there is no paragraph start, but only: asdasdasd</p> which is causing problems, and is not a valid html.
Best regards.

Selfmade Font from MyScriptFont.com dont works

I've created a own font with http://www.myscriptfont.com/ but this does not appear on my website. My code
#font-face {
font-family: 'MyFontName';
src: url('fonts/MyFontName.otf');
src: url('fonts/MyFontName.ttf');
font-weight: normal;
font-style: normal;
}
MyFontName {
color: #df0000;
font-size: 15px;
font-size: 1.5rem;
font-family: MyFontName;
font-size: 35px;
}
what am I doing wrong?
Thanks a lot for your help!
Greetings from germany
The way you created the class is wrong. May be this cause issue.
Instead of this:
MyFontName {
color: #df0000;
font-size: 15px;
font-size: 1.5rem;
font-family: MyFontName;
font-size: 35px;
}
Use like this:
.CustomClass{
color: #df0000;
font-size: 15px;
font-size: 1.5rem;
font-family: MyFontName;
font-size: 35px;
}
HTML:
<div class="CustomClass">My Sample Text Goes Here</div>