Hi I am using Mailer to send email to a customer when they purchase an item. The email sends with all details included but the css styling is not recognised. If I "open the html page with" google chrome the styling is fine.
_Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="email-styles.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="head">
<div id="logo"><img src="../../Content/images/email/logo.jpg" /></div>
<div id="date">#ViewBag.DateNow</div>
</div>
</div>
You have to use inline stylings for html emails. Gmail in particular will not recognize CSS stylesheets and will strip them out. I personally haven't tried this tool but its from mailchimp so give that a go and see if your email works correctly.
http://beaker.mailchimp.com/inline-css
Related
First, I know this is very simple and I'm as baffled as you are that I can't figure it out on my own. I have no background in web development and need to use github pages to document a project. I've been spinning my wheels on this for an embarrassing amount of time.
The crux of the problem is that I'm trying to use nested iframes, but with each layer I get another scroll bar and nothing scrolls quite in sync. If I set scrolling="no" content is hidden. This is exacerbated when I use a frames for the side bar.
Index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader">
<b> My Project Name
</b>
</div>
<body>
<div class="topnav">
Overview
Model Concepts/Patterns
Data Lineage
Entity Details
Jargon Glossary
Example Demos
</div>
<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. -->
<iframe name="main_body" src="overview.html" height="100%" width="100%">
</body>
</html>
It gets more problematic is trying to do the left sidebar. It looks like I just don't understand how heights are inherited between frames. The image shows how the sidebars keep stacking up, and the scrolling is just not quite in sync. I've tried bumping up the height to 100000 and hiding scrolling, but then horizontal scroll is also eliminated.
<!DOCTYPE html>
<html>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<body>
<div class="container" style="display: flex; height:100%;">
<div style="display:inline-block;">
<iframe
src="cs_entity_sidebar.html"
name="cs_entity_sidebar"
frameborder="0"
scrolling="no"
width="100%"
align="left">
</iframe>
</div>
<iframe class="second-row"
name="main_overview_content"
scrolling = "yes"
height=10000
align="left"
>
</iframe>
</div>
</html>
This site has a tutorial that is almost what I need, just a simple layout without frames
https://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
Operative snippet:
<div id="main-container">
<div id="sidebar">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<div id="content">Content Area</div>
</div>
But how to I get "Content Area" to populate with the linked html? When I try to do this in my own html is just brings me to a separate window without the top navigation.
This question also gets pretty close, but doesn't cover how to get the links and navigation working.
Furthermore, I have read the jquery/ajax is the better approach here, but none of what I'm doing in ajax has an effect. I'm on a corporate vpn so I'm thinking there is some proxy issue.
Any help is appreciated.
Edit: Jquery/Ajax approach which is not working. It doesn't fail, the click just doesn't do anything. I've tried various sources, including the google library, but src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" is what I've seen working on other projects in my company.
Note the screenshot, nothing loaded above "Above this is from the script"
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('test.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
<div>Above is loaded from script</div>
<div>Below is loaded from a frame</div>
<iframe src="test.html" ></iframe>
</body>
</html>
edit2: Inspect view error
If I'm understanding correctly, you are trying to make a website that lets users navigate to a new page without triggering a page refresh. This is a modern feature of dynamic websites.
For this purpose, it is definitely preferable to use jquery/ajax over iframe because of the many styling issues related to iframes (think about responsive mobile webpages). Here's a simple snippet for implementation using jquery/ajax
index.html:
<html>
<head>
<!-- load ajax, file can also be loaded locally -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/* create event handler that loads content into main area when navigation link is clicked */
$(document).ready(function () {
$('#link1').click(function(){
$('#main_body').load('overview.html');
});
});
</script>
</head>
<body>
<div class="mainheader">
<h3>My Project Name</h3>
</div>
<div class="topnav">
<a id="link1">Overview</a>
</div>
<!-- where you want the page to load -->
<div id="main_body"></div>
</body>
</html>
overview.html:
<html>
<style>
#wrapper {
background-color: yellow;
height: 200px;
}
</style>
<div id="wrapper">
<p>Dynamically loaded webpage</p>
</div>
</html>
link to a demo
Note that there are some security concerns to consider when you dynamically load content. You can read more about this in this question: Dynamic html page creation with jquery
Edit: Your code works fine on an online text editor. Ajax only works if you host the webpages on a server where the page can be loaded with supported protocol schemes such as http/https.
I hope you guys can help. I am currently doing an online course in HTML and CSS. As part of my course I am practising making webpages. I am having an issue with a header href.
I am trying to link from the header to a place in the body. However when I am testing on chrome it doesn't appear as a hyperlink. Using the inspect function of chrome shows it as a link and when clicked it works. However it doesnt work outside of inspect.
My HTML is below:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="landing.css">
</head>
<header>
<h1>
Heading
</h1>
<h2>Services </h2>
<div class="tag-line">
</div>
</header>
<body>
<h3>
About
</h3>
<div class="about">
<h4 id="services_section">
<div class="services">
Services
</h4>
<h5>
<div class="contact">
Contact
</h5>
</body>
</html>
The hyperlink is working, the problem is that there is no text. You need to put your "Services" inside the tag.
Change
<h2>Services </h2>
to
<h2>Services</h2>
I'm having an issue setting my text color. I want to set the h1 element to #513271 but it doesn't seem to want to work. Below is my current code and below that are several solutions I've tried that also did not work.
My CSS is saved as stylesheet.css & it is in the same folder as my HTML (which is tributePage.html).
jumbotron h1 {
color: #513271;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="\stylesheet.css" rel="stylesheet" />
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
I have also tried the following solutions. I have literally tried all of these by themselves, in various combinations, etc.
Change the CSS file path
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\stylesheet.css
C:\Users\Ashle\Coding\Assignments\FCC -- Tribute Page\
\stylesheet.css (I've used \ through \\\)
stylesheet.css\
Change the external CSS link style (no spaces between side carets, just included them so this would print below)
< link href="stylesheet.css" rel="stylesheet" type="text/css"/ >
< link href="stylesheet.css" rel="stylesheet" >
Change the h1 element name in CSS
h1, #h1, .h1
jumbotron h1, #jumbotron h1, .jumbotron h1
jumbotron-h1, #jumbotron-h1, .jumbotron-h1
purple text, #purple text, .purple text
purple-text, #purple-text, .purple-text
Change the font color with an inline element
< h1 style="color:purple;" class="text-center" >Hey now, hey now.< /h1 > Now, oddly enough, THIS will turn the title purple.
Thanks so much for your help!
For your CSS what you want is
.jumbotron h1 {
color: #513271;
}
Note the period before jumbotron to indicate it's a class
I hope my answer help you:
This is your original code:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
</head>
<div class="container">
<div class="jumbotron">
<body>
<h1 style="jumbotron-h1" class="text-center">Hey now, hey now.</h1>
</body>
</div>
</div>
</html>
You cannot have a div element outside the body tag.
You need to include the link to css file in the head tag. Fix your code like this:
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now.</h1>
</div>
</div>
</body>
</html>
You can see that in your css file you declare a 'jumbotron h1', but in your HTML code jumbotron appear to be a class, and to style a class in external css file you need to a dot (.) before the class name. Your css need to look like this:
.jumbotron h1 {
color: #513271;
}
Hope this help.
Your tag is not properly placed nor your external css tag is missing.
and
the class is not used for styling (except if you used bootstrap).
Here is the correct one:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Lizzy McGuire, an Evolution</title>
<link rel="stylesheet" href="dir/style.css" > <!-- put the external css link here -->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hey now, hey now</h1>
</div>
</div>
</body>
</html>
CSS:
jumbotron h1 {
color: #513271;
text-align: center;
}
I recommend you to practice doing external css files instead of inline/internal.
I had a similar problem where my stylesheet was not being reflected in my HTML doc. I finally figured out that my .css file was actually a .css.txt file. "mystyle.css.txt".
In any directory on your computer (I used the one the html/css files were in) click view at the top, then options. Select the view tab, then uncheck the option "Hide extensions for known file types". When this was unchecked i was able to delete the .txt extension from the .css file and it became a true .css file and reflected in my .html doc perfectly.
We are sending mail using Java API and HTML template like
<html>
<head>
<title>Activation Mail</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body style="margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;background-color: #F0F0F0;">
<img src="http://uat-flipxl.fliplabs.net/flipxl/style_appl/images/banner1.jpg" style="width:620px;height:95px;"/>
</body>
</html>
The mail successfully sent. But image is not displayed in mail. In mail image source is created as
<img src="//www.rediffmail.com/cgi-bin/red.cgi?red=http%3A%2F%2Fuat%2Dflipxl%2Efliplabs%2Enet%2Fflipxl%2Fstyle%5Fappl%2Fimages%2Fbanner1%2Ejpg&isImage=1&BlockImage=1&rediffng=0&rogue=c0f0aa43da2e831f97528cd4d35ab6eac85bfe9f" style="width:620px;height:95px;">
So image is not displayed.How can I override this problem? Any solution please.
I want to link my css code with the html code for my website. I am using Aptana Studio 3. It appears to work, but when I preview it in Aptana my css styling does not show up. Here is my code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
And my css code:
.body {
font-family: cursive;
}
When I preview it, the css style doesn't show up.
All my files are saved in the same folder so I don't know why this is not working. Thanks in advance for your help.
.body refeers to a container with a body class, if you want to be applied to the body tag remove that dot
body { font-family: cursive; }
.some its applied to class="some"
#some its applied to id="some"
some its applied to <some></some>
You can not set the font family in the body.
Html code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left" class="navagation">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
Css:
.navagation{
font-family: cursive;
}