HTML - Toc Links In Newsletter Sent Via Email
I have a newsletter sent out via email to subscribers. IT has a table of contents with all the headings at beginning of the page. Here is my problem.
I wanted the subscriber who receives the email to be able to click the heading and it takes them directly to the paragraph without all the scrolling. I did try this ( the original word doc you could do it and then i transfered it to html,but it opened the heading in the browser as a separate link. Its quite a long newsletter and as it is they scroll and scroll. Any advice? thanks. Similar TutorialsHello i'm new here and i'm in need of some help... i'm trying to send out a newsletter blast but when i copy the code from front page into the thirdparty to send out the newsletter when we send out a test the messege loooks all wrong why woould that be?? it shifts everything down or to the side..... please help.. here is the code from front page that i paste into the third party HTML Code: <html> <head> <title>Untitled-2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> <!-- div.Section1 {page:Section1;} p.MsoNormal {margin:0in; margin-bottom:.0001pt; font-size:12.0pt; font-family:"Times New Roman";} --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center"> <table id="Table_01" width="750" height="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="9"> <a href="http://www.bootbarn.com/"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_01.jpg" width="755" height="104" alt="" border="0"></a></td> </tr> <tr> <td rowspan="2"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_02.jpg" width="8" height="650" alt=""></td> <td colspan="7"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_03.jpg" width="738" height="609" alt=""></td> <td rowspan="2"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_04.jpg" width="9" height="650" alt=""></td> </tr> <tr> <td> <a href="http://www.bootbarn.com/navigate/men"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_05.jpg" width="95" height="41" alt="" border="0"></a></td> <td> <a href="http://www.bootbarn.com/navigate/women"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_06.jpg" width="107" height="41" alt="" border="0"></a></td> <td> <a href="http://www.bootbarn.com/navigate/youth"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_07.jpg" width="89" height="41" alt="" border="0"></a></td> <td> <a href="http://www.bootbarn.com/brand"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_08.jpg" width="94" height="41" alt="" border="0"></a></td> <td> <a href="http://www.bootbarn.com/multiview/viewspecial/1/view/view"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_09.jpg" width="111" height="41" alt="" border="0"></a></td> <td> <a href="http://www.bootbarn.com/multiview/viewspecial/1/view/view/0/12/new/All/All/All/All"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_10.jpg" width="136" height="41" alt="" border="0"></a></td> <td> <div style="position: absolute; width: 711px; height: 587px; z-index: 1; left: 106px; top: 113px; border-style: outset; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" id="layer1"> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial">Dear (First Name),</span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> </span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial">Welcome to Boot Barn!</span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> </span></font></p> <p class="MsoNormal"> <span style="font-family: Arial"><font face="Arial" style="font-size: 11pt"> We are excited to include you into our fast-growing e-mail program –and as a thank you for signing up with us, please enjoy a special <b>15% </b>off your next order.</font></span></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial">Just use code: <b> <span style="FONT-WEIGHT: bold">welcome</span></b> at checkout to redeem the offer. <u><a href="http://www.bootbarn.com/">Shop now</a></u></span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> </span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial">You can expect to receive special and sometimes exclusive offers in future e-mail newsletters, along with product updates related to our many brands.</span></font></p> <p class="MsoNormal"> </p> <p class="MsoNormal"> <font face="Arial" color="black" style="font-size: 11pt"> <span style="color: black; font-family: Arial">Boot Barn is a place you can trust. We’re proud to offer one of the world's largest boot <span class="grame">selections for</span> over 30 years!<b><span style="FONT-WEIGHT: bold"> </span></b> </span></font><font face="Arial" style="font-size: 11pt"><span style="font-family: Arial"> We started in <span class="grame">California in 1978 and we've been global for many years. </span>We are backed by over <u> <a href="http://www.bootbarn.com/indexflatfile/store_locator.html">80 retail store locations</a></u> in states ranging from California to Arizona, Nevada, New Mexico, Wyoming and.Montana.<span class="grame"></span></span></font></p> <p class="MsoNormal"> </p> <p class="MsoNormal"><span class="grame"> <font face="Arial" color="black" style="font-size: 11pt"> <span style="color: black; font-family: Arial">We carry the best boots in the business. Many of the brands we carry have a rich heritage and legacy of designing and manufacturing footwear for several decades! We strive to offer the best selection of top quality leather footwear in the styles you are looking for, and we are known for </span></font> <font face="Arial" style="font-size: 11pt"><span style="font-family: Arial">providing our customers with great quality service<U2:P></U2:P></span></font></span><font face="Arial" style="font-size: 11pt"><span style="font-family: Arial"> Over the years, we've expanded our product assortment to include men's, women's and youth clothing and a wide assortment of accessories.</span></font></p> <p class="MsoNormal"></p> <p class="MsoNormal"> <font face="Arial" color="black" style="font-size: 11pt"> <span style="color: black; font-family: Arial">And, while many websites wait for the one big blow-out sale to offer you value prices, we offer them everyday! Check our <a title="http://www.bootbarn.com/indexflatfile/about.html#lowprice" style="color: blue; text-decoration: underline" href="http://www.bootbarn.com/indexflatfile/about.html#lowprice"> low price guarantee</a>. </span></font><font face="Arial" style="font-size: 11pt"><span style="font-family: Arial">And, to be clear, we have a no nonsense privacy policy that NEVER shares, rents or <span class="grame">sells</span> your personal information and email addresses to outside third parties.<U3:P></U3:P></span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> </span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial">So, thanks for your interest and we look forward to serving your needs,</span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> </span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial">Sincerely,</span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> </span></font></p> <p class="MsoNormal"><font face="Arial" style="font-size: 11pt"> <span style="font-family: Arial"> The Boot Barn Team</span></font></div> <a href="http://www.bootbarn.com/multiview/apparel/clothing"> <img src="http://bootbarn.ws/newsletter/Blue%20Hornet/Welcome%20Letter/images/welcome_11.jpg" width="106" height="41" alt="" border="0"></a></td> </tr> </table> </div> <!-- End ImageReady Slices --> </body> </html> Hello to all. I have designed a newsletter in html that i am ready to email out to people. Only thing is the client wants the image to be displayed instantly with no attachments. So basically embedded into the email. Does anyone know how to do this? Reading other people's comments i am sure there is a way. If i insert the html ito the email itbecomes an attachment which i do not want? PLEASE HELP!!! Thanks Gray I've been working on an email blast in slices for the first time without the use of tables, yet I haven't been able to align the left bar with the other components on the right. How can I align these components so that they are all together? <!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>Untitled Document</title> </head> <body> <div style="width:550px;"> <div><img src="http://img263.imageshack.us/img263/9634/bottombox119.gif" width="1" height="31" /><img src="http://img98.imageshack.us/img98/7985/bottombox120.gif" width="549" height="31" /></div> <div style="float:right; clear:left; margin-right:0px; "><img src="http://img98.imageshack.us/img98/7985/bottombox120.gif" width="20" height="1218" /></div> <div style="float:right; clear:left; margin-right:0px; "> <img src="http://img179.imageshack.us/img179/2510/bottombox105.gif" width="311" height="158" /></div> <div style="float:right; margin-right:0px; "> <img src="http://img69.imageshack.us/img69/5752/bottombox104.gif" width="197" height="118" /></div> <div style="float:right; clear:left; margin-right:0px; "><img src="http://img692.imageshack.us/img692/3859/bottombox108.gif" width="311" height="165" /></div> <div style="float:right; clear:left; margin-right:0px; position:relative;"> <img src="http://img62.imageshack.us/img62/7371/bottombox107.gif" width="197" height="205" /></div> <div style="float:right; clear:left; margin-right:0px; "><img src="http://img87.imageshack.us/img87/2279/bottombox109.gif" width="243" height="220" /></div> <div ><img src="http://img98.imageshack.us/img98/7985/bottombox120.gif" width="22" height="1218" /></div> </div> </body> </html> Hey, I built an email newsletter for a friend of mine using GoLive! It was fairly simple he wanted a header graphic and a green box on the left where he could put information about classes he was teaching/things relating to the articles in the email newsletter. Problem is... is that none of the ways I found to build it would come through safely in any email client, be it gmail, thunderbird, or otherwise. I was hoping to find one of two things: a good template we could paste his stuff into, or a free program that we could build his newsletter that would be generally readable in most mail clients. What advice would you offer to me, I'm not extensively familiar with HTML again, i just recently got back into it after a break (too long, cuz i know little to nothing now except how to pick apart and analyze code, just not how to build from scratch!) Hence why I was using Adobe GoLive. If you could recommend a template or a program that would be free, that'd be fine... otherwise any comments or info would be great. thanks. For some reason one part of my table isn't formatting correctly. I believe I've set it up correctly but one slice is not in the correct place. Any suggestions as to why? http://www.essencia-spa.com/december...l%20blast.html my code is easily viewable by View -> View Source EDIT: SOLVED. Just solved the issue with a colspan issue. Thanks to anyone who took a look at this. And i am having a problem. Here is an example i made for the problem. It is being made my someone who has no knowledge of html in dreamweaver and then the code being tweaked by someone who knows html to be perfect. A sample line of code that comes up is 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>Untitled Document</title> </head> <body> <img width="195" height="755" src="file:///C|/Users/dog/AppData/Roaming/Adobe/Dreamweaver CS4/en_US/OfficeImageTemp/clip_image002_0003.png" align="left" hspace="12" vspace="10" alt="Text Box: blah blah. " /> </body> </html> When i try to test emailing the file the picture does not show up. I know the reason. It is because it is on my computer and it cant find it. But the question is how do i get around this? The pictures and pieces of the newsletter are being made in a combination of Microsoft Word and Photoshop. Would i have to upload each picture to the internet and do it that way? Or is there a way i can imbed the pictures into the newsletter? I am using this through a yahoo email address using a program that allows you to send emails with html content through emails that do not allow html, such as yahoo. I appreciate any help. Thanks in advanced. Hello All, I am implementing an email newsletter. The problem I have is that when I open the newsletter in Outlook it does not look like the original web page newsletter. Does anyone have advice as to how to implement this functionality to have the email newsletter look like the web page news letter. Any suggestions recommendations or advice will be greatly appreciated. Thanks In Advance. Hi, so I'm trying to make this e-mail newsletter. It's entirely images, tables and text. So no javascript, just plain stuff. I tried attaching it as a signiture file and I had trouble sending it. It also didn't come out right. I'm trying to avoid using a software. Its basically just a block of HTML I need to show up as the only content in an email. If you just put HTML into a email text field, it just shows the HTML code in the email as text. Any ideas? Ok its so easy & I dont know why its not working, but I want to make Models@PunkRockPrincess.com & Photographers@PunkRockPrincess.com both active links so that when you click them they open up as an email <p><h1 style="text-align: center;"><a href="http://www.myspace.com/punkrockprincess.com"><span style="color: ##00BFE1;">PunkRockPrincess.com on Myspace! </span></a></h1> <p style="text-align: center;"><span style="color: #cc99ff;"></span><img src="http://www.searchviews.com/wp-content/themes/clean-copy-full-3-column-1/images/myspace_logo.jpg" height="46" width="137" /></p> <h1 style="text-align: center;"><span style="color: #ffffff;">Models@PunkRockPrincess.com <br />Photographers@PunkRockPrincess.com</span></h1></p> So what do I change to this code? How do I stop the hover link code in my email signature affecting the entire email and links by the recipient? My code (stolen from somewhere on the net): <html> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <style type="text/css" media="all"> a:link {color: #CFD4D8; text-decoration: none;} a:visited {color: #CFD4D8;text-decoration: none;} a:hover {color: #003065; text-decoration: none;} a:active {color: #CFD4D8;text-decoration: none;} </style> </head> <body> <a href="http://www.mywebsite.com">www.mywebsite.com</a> </body> </html> Hey, For the first time I need to prepare a newsletter template for a company. I read a lot about this in web but I coun't understand one thing. It should be used repeatedly. So how can I make a Html template to be use repeatedly? May be the programmer will use my template and make it reusable? Somebody know about this? Thanks! Hi all, I'm really struggling with getting my e-newsletters to view correctly (as they do in my web browser) in the actual mail message. I usually code the page and when it's done, load it onto our server, then open the page, copy the content and paste it into the new mail message. This works fine, except when your html page has layers or flash clips in it, everything goes completely crazy. It seems like the layers are the big problems, spacing goes out and the layers aren't actually in the "newsletter" anymore, they load at the top of the page, almost seperate from the rest of the file. Any help would greatly be appreciated. Thanks so much. Bees how can i put an option in my html code to subscribe to a newsletter with only two field boxes for the name and email address? I wish to then have this info sent to a default emaill address. I'd like to have a newsletter opt-in, but I don't want to move the person to a php page to confirm they're in the system. Is it possible to add them from the same page, and without a page refresh, show them they're added? I have created an html newsletter which is just about ready. I am trying to add a header image to top cell of table however when I preview the table expands and I get a bunch of whitespace. Image is set width and in edit mode appears fine. I am using Sharepoint Designer and Web Expression 2 but not luck removing all the whitespace. Any suggestions? thx Hi all, I'm trying to build a newsletter for a company. This thing has to be sent via e-mail so all the styling has to be done inline I have pretty much everything right, except for the background. I want to use a gradient that aligns to the bottom (bottom of content, not bottom of viewport) over the entire width of the screen (5px wide, repeat-x) However: when I go to the page, the gradient is in the bottom of my viewport. When I scroll down, I go below that gradient. Anybody have any idea how I can get that gradient down? (so far only IE6 behaves the right way, Safari and Firefox do not) tnx |