I'm trying to create a responsive homepage with max-width of 1024 first. However the images are not displaying when I called from the css file.
I did include the stylesheet inside the home page and the current viewport is 1024.
I can't find my mistake, please help.
Thanks.
homepage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Responsive design</title>
<link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/>
</head>
<body>
<table class="ct">
<tr>
<td class="1">
<?php include 'menu.php'; ?>
</td>
</tr>
<tr>
<td class="2">
</td>
</tr>
<tr>
<td class='3'>
<img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='4'>
</td>
</tr>
<tr>
<td class='5'>
wefhuiweabhfuia</td>
</tr>
</table>
</body>
</html>
stylesheet
#charset "utf-8";
/* CSS Document */
#media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
Don't use numbers as css classes. Starting with a number is breaking it for you. A CSS class name should start with an underscore, letter, or -. Class names starting with a dash are reserved for browser extensions. Typically start a class with a letter, though.
The following fiddle works. You can see in the console it tries to load the images, but gets a 404 in this case.
http://jsfiddle.net/nks7S/
HTML
<table class="ct">
<tr>
<td class="a1"> </td>
</tr>
<tr>
<td class="a2"></td>
</tr>
<tr>
<td class='a3'><img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='a4'>
</td>
</tr>
<tr>
<td class='a5'>
wefhuiweabhfuia</td>
</tr>
</table>
CSS
#charset "utf-8";
/* CSS Document */
#media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.a1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.a2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.a3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.a4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.a5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
Suggestion: Instead of 1, or a1 in my example, try to be a bit more descriptive in your class names. It makes it a lot easier for anyone other than you to follow.
Related
I have recently begun studying html, im trying to make a small crappy website, and when I copy full path and then paste it into the browser it just gives me a blank screen. Im sorry if this is simple, but nothing I do seems to change it.
code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
its just not appearing, a blank screen.
You are missing a <body> tag.
Everything you want to display on the page, goes in the <body> tag. Like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<body>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
</body>
I am coding a responsive email template using media queries and I have a specific issue.
I am using MailChimps guidelines and therefore I got into using their CSS Inliner , but I find an issue where the inlined css somehow overrides and breaks my previously working CSS above in the styles.
So for example here is what I am talking about, here is my not inlined code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
#media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
This is just for reference, this is not my actual code, but I hope You get the point.
So my problem with this is, after I use the CSS Inliner from MailChimp, I get this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
#media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop" style="display: block;">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi" style="display: none !important;">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
And after I send test emails, in the mail clients, most importantly Gmail, everything is wrong, either both of the objects show or the #mobi one is hidden on mobile and vice versa.The !important statement in my upper css in the style section is due to the fact that the #mobi object will always be visible in Gmail unless it has an !important for the display:none property.
I tried deleting the inlined important statements but nothing worked so far. What is the problem here and how can I bypass it?
According to the rules of CSS Specificity:
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.
You could use !important in your stylesheet to increase the specificity of the relevant styles, forcing them to override the inline styles. However, it should be noted that GMail, among other clients, does not support media queries nor the display property.
I want to send the following page as an html email. It displays fine on the web but in the email the red background doesnt display for the body or the button at the bottom of the page. What am I missing here?
HTML email has been giving me so much trouble!
Thanks for any help i can get!
http://www.americanvineyardmagazine.com/emails/AVvid14email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>American Vineyard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style type="text/css">
th td tr {
text-align: center;
}
</style>
<body style="padding: 0;background-color:#800000">
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
<th style="color:#800000; width:650px;"><h1>New Video On American Vineyard Website!</h1></th>
<tr>
<td style="text-align:center;">
<a href="http://www.americanvineyardmagazine.com/index.html#modal-video14">
<img src="http://americanvineyardmagazine.com/images/video.play.png" alt="http://americanvineyardmagazine.com/images/featvideos/featvideo14.jpg" width="300px" style="background:URL(http://www.americanvineyardmagazine.com/images/featvideos/featvideo14.jpg) center center no-repeat;">
</a>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h2><em>El Niño Amplifies Risk for Vine Canker Disease </em></h2>
</td>
</tr>
<tr>
<td style="text-align:center; color:#800000; ">
<h5>With El Niño coming strong for the next few months, grape growers are grateful for the drought relief; however, pruning is going to be a difficult task this winter with increased disease pressure. Doug Gubler, UC Davis Plant Pathologist addressed this at the SJV Grape Symposium.</h5>
</td>
</tr>
<tr>
<td style="text-align:center;padding-bottom:35px;">
Watch Now!
</td>
</tr>
</table>
</body>
</html>
The problem is in your table's background path.
You are using a relative path here..
<table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
It will display correctly on the web because browser will be able to resolve that.
But when you use it in an email, Email client won't be able to resolve that.
Use absolute path here instead.
<table align="center" style="background-image:url(http://www.americanvineyardmagazine.com/images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
Use parent class under body tag .wrapper {background-color: #800000;}
I am trying to load two different images in an email based on the screen size the viewer is using.
I have a WordPress ninja form thank you email that I want sent out with an image displayed in the body. If the screen size is smaller than 501px I want image displayed if it is smaller than 500px I want a different image displayed. The difference being one is less text and easier to read on mobile.
I have tried media queries but they do not work for the email formatting. I used them on a test html page to make sure my code was working and it was fine so maybe media queries don't work for email?
Is there another way to change the images based on the size of the screen the email is viewed on?
Here is my code:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='ourStory'>
<img src='http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-mobile-copy.jpg' />
</div>
</body>
</html>
CSS
#media all and (min-width: 501px) {
div.ourStory{
content:url('http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-copy.jpg');
}
}
Responsive Email cannot be achieved properly or even at all with <div> you will need to use <table>
https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
Services such as mailchimp know about these and have their own built in tool to design email.
http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/
I suggest you use a library such as this one to accomplish a better responsive design for your email.
http://zurb.com/ink/docs.php
Example code:
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td>
Eight Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td>
Four Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Also many email provider and client doesnt support linked css so you have to rely on inliner tools which will apply style="" attributes to your HTML elements.
As the links say, div can and should be used in email, but the complex layouts require Tables. I personally think a combination is the best course, which I will use in my sample below.
The major issue that jumps out at me is that you have a link tag to the stylesheet (almost universally no support on email clients) and that you use more complex CSS (content:) on the media query (also not well supported).
I created some code using table and div while also updated some css, etc to your above code - including Outlook conditional statements. You would likely need to test this across clients, but this is the best and pretty much only way to do an image swap in email. You can also change the background-image in the media queries if you want to switch it again at a lower screen size.
See below:
.ourStory { width:640px;}
#media only screen and (max-width: 640px) {
.ourStory { width:100% !important;}
.image1 {display:none !important; visibility:hidden !important; overflow:hidden; width:0px !important; height:0 !important; line-height:0 !important;}
.bgimage {width:100% !important; height:100px !important;}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<title></title>
<style>
<!-- Inline Style Sheet Here -->
</style>
</head>
<body>
<div class='ourStory' style="width:100%; max-width:640px;">
<!--[if (gte mso 9)|(IE)]>
<table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="ourStory" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;">
<tr>
<td class="bgimage" background="http://placehold.it/639x100" bgcolor="#7bceeb" width="100%" height="150" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:639px; height:150px;">
<v:fill type="tile" src="http://placehold.it/639x100" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div><img class="image1" width="100%" src='http://placehold.it/640x150' style="border:none; display:block;" />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</div>
</body>
</html>
The following code should display table with borders around cells, but it doesn’t. Any idea why?
<head>
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1” />
<style type=“text/css”>
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
It works for me if you use the html tag around your text and replace your quotes with actual " or ' (you are using ” which isn't the same. Look closely ” != ")
It shows borders for me in IE6, IE7, IE8, FF3, and Chrome 3, but the borders are around each cell individually.
If you want the borders to appear connected, just add this in your style tag:
table { border-collapse: collapse; }
You're missing an opening <html> tag; is that just an accident from copy/pasting your code here? Also, fix the quotes in the meta and style tags:
<meta http-equiv="content-type"
content="text/html;
charset=ISO-8859-1" />
and
<style
type="text/css">
Adding a proper DOCTYPE is probably a good idea too, although you'll get borders to display from just making the above fixes.
For future reference, running your HTML through the W3C Validator or HTML Tidy can instantly identify issues like this.
Is this the whole document?
If it is, you might want to add a document type and html tags.
your double quotes aren't proper double quotes. try
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<head>
<style type="text/css">
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
I've only tested it on IE6 (sorry - I'm not on my machine) but I think your text editor has inserted 'smart quotes' around the double-quotes strings instead of the straight ones. It seems like just a stylistic change but it is a different character (“\” instead of "). When I replaced them it rendered the borders.