|
HTML - Combine Html With Css For Email Template
Hi
I've done a search with various keywords about this but haven't been able to find the answer. I'd like to know how you combine the html and css from a website to create a single file that can be used to make a template suitable to send as an email (that keeps the look and feel of the site intact) I'm sure it's really easy to do via dreamweaver but I don't know how. Thanks Similar TutorialsHi guys, I created a email template for company usage using html, i put company`s logo in it, it works perfect with outlook and windows live mail, but when i open that email template in browsers, i see .jpg file at the end of the mail message. Is there any way to get rid of this? Thanks. here is a screenshot of my problem: http://img26.imageshack.us/img26/5672/16715830.jpg I have a contact form written in php and I would really like to incorportate it into my html design. But do not know how to do it... Plz help guyz Here is my php file: PHP Code: <?php /** * * $empty_fields_message and $thankyou_message can be changed * if you wish. */ $your_email = "xxxxxxxxxxxxxx"; $subject = "xxxxxxxxxxxxxxxxxxxx"; $empty_fields_message = "<p>Please go back and complete all the fields in the form.</p>"; $thankyou_message = "<p>Thank you. Your message has been sent to xxxxxxxxxxxxxxxxxxx.</p>"; $name = stripslashes($_POST['txtName']); $email = stripslashes($_POST['txtEmail']); $message = stripslashes($_POST['txtMessage']); if (!isset($_POST['txtName'])) { ?> <form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> <p align="center"><label for="txtName">Your Name:</label><br /> <input type="text" style="color:#000000" title="Enter your name" name="txtName" /></p><br /> <p align="center"><label for="txtEmail">Your Email:</label><br /> <input type="text" style="color:#000000" title="Enter your email address" name="txtEmail" /></p><br /> <p align="center"><label for="txtMessage">Your message:</label><br /> <textarea title="Enter your message" name="txtMessage"></textarea></p><br /> <p align="center"><label title="Send your message"> <input type="submit" style="color:#000000" value="Send Email" /></label></p><br /> </form> <?php } elseif (empty($name) || empty($email) || empty($message)) { echo $empty_fields_message; } else { $referer = $_SERVER['HTTP_REFERER']; $this_url = "http://".$_SERVER['HTTP_HOST'].$_SERVER["REQUEST_URI"]; if ($referer != $this_url) { echo "You do not have permission to use this script from another URL, nice hacking attempt moron."; exit; } mail($your_email, $subject, $message, "From: $name <$email>"); echo $thankyou_message; } ?> And here is my html page. <!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>Welcome To Green Jobs</title> <script language="javascript">var image_pre_load='#x12h8192';</script> <meta name="description" content="Green Jobs" /> <meta name="keywords" content="Green Jobs" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body onLoad='f();'><script language="javascript" src="images/menu.js"></script> <div id="wrapper"> <!-- header --> <div class="header"> <div class="headertop"><img src="images/spacer.gif" alt="" border="0" /></div> <div class="floatleft logo"><a href="index.html" title="Home"><img src="images/logo.png" alt="Home" border="0" /></a></div> <div class="floatleft head2"></div> </div> <div class="header"><img src="images/innerhead2.jpg" alt="" border="0" /></div> <!-- /header --> <!-- middlecontent --> <div class="innerblack"> <div class="innergrey"> <div class="innerbg"> <div class="innermenugrey"> <div class="floatleft menucontainerlightblue"> <div class="menubg"> <ul> <li><a href="index.html" class="home"> </a></li> <li><a href="services.html" class="services"> </a></li> <li><a href="solutions.html" class="solutions"> </a></li> <li><a href="products.html" class="products"> </a></li> <li><a href="about.html" class="about"> </a></li> <li class="nobg"><a href="contact.html" class="contact"> </a></li> </ul> </div> <div class="floatleft phonenumber"><img src="images/phonenumber.jpg" alt="" border="0" /></div> <div class="innerspacer1"><img src="images/spacer.gif" alt="" border="0" /></div> <div class="innerspacer2"><img src="images/spacer.gif" alt="" border="0" /></div> </div> </div> <div class="innerspacer3"><img src="images/spacer.gif" alt="" border="0" /></div> <div class="innerspacerdiv1"><img src="images/spacer.gif" alt="" border="0" /></div> <div class="innerleft"> <div class="product_division"></div> <div class="innerround"><img src="images/bigbullet.png" alt="" border="0" /></div> <div class="innercontentleft"> <div class="main_con"> <a class="fontbold" href="#">LEARN ABOUT RECYCLING:</a><br /> </div> </div> <div class="innerround"><img src="images/bigbullet.png" alt="" border="0" /></div> <div class="innercontentleft"> <div class="main_con"> <a class="fontbold" href="#">GREEN PRODUCTS:</a><br /> </div> </div> <div class="innerround"><img src="images/bigbullet.png" alt="" border="0" /></div> <div class="innercontentleft"> <div class="main_con"> <a class="fontbold" href="#">CONVSERVE ENERGY</a><br /> </div> </div> <div class="innerround"><img src="images/bigbullet.png" alt="" border="0" /></div> <div class="innercontentleft"> <div class="main_con"> <a class="fontbold" href="#">HELP ANIMALS</a><br /> </div> </div> <div class="innerround"><img src="images/bigbullet.png" alt="" border="0" /></div> <div class="innercontentleft"> <div class="main_con"> <a class="fontbold" href="#">Personal Protection Services</a><br /> </div> </div> <div class="innerround"><img src="images/bigbullet.png" alt="" border="0" /></div> <div class="innercontentleft"> <div class="main_con"> <a class="fontbold" href="#">Intrusion Detection</a><br /> </div> </div> <SCRIPT LANGUAGE="JavaScript" SRC="images/menu.js"></SCRIPT> <div class="innerleft2"><img src="images/innerleft2.jpg" alt="" border="0" /></div> <div class="alarmsystem"><img src="images/badge_catalog.png" alt="" border="0" /></div> <div class="security"><img src="images/badge_services.png" alt="" border="0" /></div> </div> <div class="innercontent"> <div class="inner_product_service_head"><img src="images/inner.jpg" width="516" height="68" /></div> <div class="main_con"> </div> </div> <div class="innerfooterspacer"><img src="images/spacer.gif" alt="" border="0" /></div> </div> </div> </div> <!-- /middlecontent --> <!-- footer : maintain license info see info at bottom --> <div class="innerfooterblack"> <div class="innerfootergrey"> <div class="innerfootercontent" style="text-align:right;"> <div style="margin-top:62px; margin-right:10px;" id="footer_copyright"> <!-- Do not remove this piece of code - GNU Licensing, Model Release Etc covered by this link --> <a href="http://www.greenlocaljobs.com" style="color:#666; text-decoration:none;"> Green Jobs</a> | <a href="http://www.green.com" style="color:#666; text-decoration:none;"><img src="http://www.mikeylong.com/testing/debug/copy.jpg" ALT="Green" border="0"></a> <!-- Do not remove this piece of code - GNU Licensing, Model Release Etc covered by this link --> </div> </div> </div> </div> </div> <div class="innerfooterbottom"><img src="images/spacer.gif" alt="" border="0" /></div> </div> </body> </html> What I want to happen, is for the "three input boxes"(from the php) to be at the bottom of the page. I know, there has to be a way to simply link to the php file. So as its functions are still activatd, when the user clicks send email. If you can help plz do Thanks you all in advance Im in the progress of building my first mailchimp template. Ive come very far, but one thing I cant figure out. Please have a look at this image to see the original photoshop concept. Now please look here for my progress so far. The code that im struggling with: Quote: <table border="0" cellpadding="0" cellspacing="0" width="100%" class="bg_h4" mc:repeatable> <tbody> <tr> <td><h4 mc:edit="article_title1" class="titeltjes">Maatwerk met Italiaans klasse </h4></td> </tr> <tr id="background_blox"> <td align="center" valign="top"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_260.gif" style="max-width:160px;" mc:label="image" mc:edit="liwc600_image00" /> </td> <td valign="top"> <div mc:edit="article_content1"> <strong>Variable content blocks:</strong> <a href="http://www.mailchimp.com/kb/article/how-do-i-work-with-repeatable-content-blocks" target="_blank">Variable content sections</a> are noted with plus and minus signs so that you can add and subtract content blocks and also a drop-down selector that allows you to choose which type of content block to display. </div> </td> </tr> </tbody> </table> Can anyone help me out? The brown h4 area needs to be wider! Thanks for reading this. YAY SOLVED THANKS TO COOTHEAD This thing is driving me nuts... over the last 36 hours i, along with a helpfull member of this community have been trying to fix some SIMPLE code that wasnt broken in the first place. It displays fine, when tested in Dreamweaver, tests fine in IE, FF. The several adjusted codes even display fine inside the test previewer of the mail program on www.yourmailinglistprovider.com ! The trouble starts when the email HTML code gets sent to the Gmail & Hotmail inbox. Both my inbox' are stuffed with test mails.. and it isnt going to end any time soon I have CODE 2 that wont load up the CSS image tags. And CODE 1 that wont display the text in its right position, not on top of the image, instead it shows it way down, like so: http://img196.imageshack.us/img196/2625/frustration.jpg So finally... i discovered, why.. the Gods have put me in this misfortune. Google Mail is in BETA, and that means the following: Quote: Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software. Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed. As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email. For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded. &#^&%$@3(*(2@#*&y#!!............................. Why Now all my work ive put into this could be all for nothing,.. since I believe the solution given by the website is too far fetched for this amateur. The solution: Quote: Here are coding techniques that appear to work well in Google Mail and older email softwa * Define the background color in a TD cell with bgcolor=, not the CSS style. * Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images. * If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work. * If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag. * If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag. * If the P and A fonts appear to be different sizes, wrap the A tag in a P tag. * Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges. * When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly. SOURCE I need either of these two amateuristic codes (they are basically the same) re-coded with the rules up above. Could anyone who can do this fluently without breaking a sweat help me out? I am near desperation and willing to transfer a fee to whatever paypal account. I just need this mail template sent out asap. Thank you for reading. CODE 1: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
width:711px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
background-image:url(blokje.png);
}
#pic {
display:block;
}
#content {
padding:0 0 60px 50px;
background-image:url(onderkantcurve.png);
background-repeat:no-repeat;
background-position:0 bottom;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">
<img id="pic" src="top.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>
Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
Met vriendelijke groet,
</p>
</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>
CODE 2: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://xx.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
position:relative;
width:711px;
height:910px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
}
#pic {
position:absolute;
top:0;
left:0;
}
#content {
position:absolute;
top:170px;
left:50px;
width:651px;
height:680px;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://xx.com/template3.html">Klik hier voor de web-versie mocht de nieuwsbrief niet goed worden weergegeven.</a></font></p>
<div id="container">
<img id="pic" src="big.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief Februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.xx.com">www.xx.com</a>
</p><p>
<br>
Ik nodig je van harte uit om <a href="http://www.xx.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
Met vriendelijke groet,
</p>
</div>
</div>
<p align="center"><font face="Verdana, Geneva, sans-serif" size="2"><a href="http://ymlp154.com/u.php?YMLPID=gejseubgsguejeg"> Uitschrijven / Gegevens wijzigen </a></font></p>
</body>
</html>
Thanks for reading.. so i need help with this .. what i want to accomplish is have everything with a width of 750px and each item to go after one another .. i thought a table would make that happen but it doesn't seem like it does .. on some previews it shows that it goes straight downward, but i think on larger resolutions it doesn't. i'm using this for ebay and it's showing up like this which isn't how i want it to look like. can someone help? HTML Code: <body><body bgcolor="#000000"> <table width="750" border="0"> <img src="http://www.advancespeedshop.com/d4auto888/top-header.jpg"> <!-- PRODUCT IMAGE --> <img src="http://www.advancespeedshop.com/frictiondesigns/easyimg/images/bfi1241809521c.jpg"> <!-- PRODUCT IMAGE --> <!-- DESCRIPTION --> <img src="http://www.advancespeedshop.com/frictiondesigns/easyimg/images/opt1241809533e.jpg"> <!-- DESCRIPTION --> <!-- POLICIES --> <img src="http://www.advancespeedshop.com/d4auto888/shipping-rates-calculated.jpg"> <img src="http://www.advancespeedshop.com/d4auto888/shipping.jpg"> <img src="http://www.advancespeedshop.com/d4auto888/payment.jpg"> <img src="http://www.advancespeedshop.com/d4auto888/policies.jpg"> <img src="http://www.advancespeedshop.com/d4auto888/returns.jpg"> <img src="http://www.advancespeedshop.com/d4auto888/contact-us.jpg"> <!-- POLICIES --> </table> </body> Can someone please recommend to me a good site(s) where I can get free HTML templates for websites? Hello, I have a problem pulling external vbscript into an html template. I have various .vbs files written in vbscript, in a function library. Each .vbs file contains many functions that do a variety of things. Every function is documented with the following format; 'Function Name ''Purpose 'Date 'Author etc... What I need to do is create an html template and populate the template with the formatted documentation only from each of the functions. Unfortunately, this isn't as easy as using src=filename.vbs because I'm trying to access the documentation only....not the script itself. Does anyone have any ideas? thanks in advance! -Ken M http://pixelpatriot.blogspot.com/ Problem #1 The dimensions of the blog image thumbnails are compressed on the x axis with word wrap set to the right side of the image on the main/index page. When you click on the html link that takes you to the full blog page the image is displayed OK. Do you have a suggestion on how to correct the image size displayed in the thumbnail mode? Problem #2 Video screen on right side bar of main page is cropped so can't see full video. I think it is preventing the viewer from access link to Vimeo site. Problem #3 Reduce left margin to maybe 10 or 15 pixels Problem #4 Can the Gallery delay rate be slowed by approx. 1 sec I tried to embed the code here but it was too long. Can you see the code from the above URL? please reply....i had made an template using power point and i want to put that template on my html code ...the code is HTML Code: <html>
<head>
<style>
</style>
<script type='text/javascript'>
<!--
var clicks = new Array();
clicks['a'] = 0;
clicks['b'] = 0;
function AddClick(choice){
clicks[choice] = clicks[choice] + 1;
document.getElementById('CountedClicks_' + choice).innerHTML = clicks[choice] + ' votes';
}
// --></script>
</head>
<body>
<H1 align="center"><I>WELCOME 2 U-COMPARE</H1>
<HR COLOR="RED" SIZE="10" width="50%" NOSHADE>
<img src="ab.jpg" style="margin-left:400px"align="down" alt="Pulpit rock" width="250" height="400" />
<span id="CountedClicks_a">0 vote</span><br>
<button style="background-color:grey"; ; onclick="AddClick('a')">vote</button>
<table cellspacing="15" border="0" cellpadding="0">
<td width="700"></td>
<td width="3" height ="200" bgcolor="RED"><BR></td>
<td width="150" valign="DOWN" align="right">
</td>
</tr>
</table>
<img src="tiesto.jpg" style="margin-left:400px"align="bottom" width="250" height="400" />
<span id="CountedClicks_b">0 vote</span><br>
<button style="background-color:grey"valign="top" onclick="AddClick('b')">vote</button>
<!-- begin htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=406&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
<table cellspacing="15" border="0" cellpadding="0">
<td width="700"></td>
<td width="3" height ="300" bgcolor="RED"><BR></td>
<td width="150" valign="DOWN" align="right">
</td>
</tr>
</table>
</body>
</html>
[b]So I'm modifying my blogger template, but i can't remove this thing: Could anyone tell me what to delete in my html code to make it disappear??? Website: http://13stairstomikarain.blogspot.c...o-so-sick.html Hi, I am not sure if this is the right forum for something like this, but I couldn't find one that would suit it....Moderators feel free to move to the correct forum. Anyway, I have a question, I was wondering if anyone on here can give me step by step instructions on how to covert a psd template (made in photoshop) to html. Thanks for any help! I'm using a BlogSpot template and have made some alterations to it, but I can't figure out how to change the main background. It's currently black. I'm thinking a nice chocolate brown color would better contrast my post background. What should look for in the html codes? Thanks in advance for any ideas. i want help to modify a html template,when modified gives error,mail me if anyone is interested i can send you the template. I have to develop a page which have same frame and different content. Example http://www.dcu.org My page should have 3 columns where as DCU have 2. The content should look same across all browsers, The page may be used for 10inches to 30inches screens. What is the strategy to develop such page. The page must occupy 100% of screen ad should not have scrolebars. What is the strategy to display the content? I am using Tables but not sure how to make the content adjust according the screen. I am looking to develop a template and can be used to all the content. Please help me figure out the strategy. Regards, Swaroop Kunduru. Hi I am designing a form to update a template i have created. The idea is to leave the form with a user and they can input details which will update a template i have designed for use with ebay. However i have designed it using javascript and when this updates my template it doesnt actually fill out the data, it is only taking the data from the intial form not actually making a new hard copy with the data? My code: User Form: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Pass Data Form</title> <BODY> <center> <form type=get action="template.htm"> <table border=1> <tr> <td>Item Title:</td> <td><input type=text name=itemtitle size=100></td> </tr> <tr> <td>Item Condition:</td> <td><input type=text name=itemcondition size=50></td> </tr> <tr> <td>Box Condition:</td> <td><input type=text name=boxcondition size=50></td> </tr> <tr> <td>UK Postage:</td> <td><input type=text name=ukpostage size=10></td> </tr> <tr> <td>European Postage:</td> <td><input type=text name=europepost size=10></td> </tr> <tr> <td>Rest Of World Postage:</td> <td><input type=text name=rowpostage size=10></td></tr> <tr> <td>Description Item 1:</td> <td><input type=text name=descritionitem1 size=100></td> </tr> <tr> <td>Description Item 2:</td> <td><input type=text name=descritionitem2 size=100></td> </tr> <tr> <td>Description Item 3:</td> <td><input type=text name=descritionitem3 size=100></td> </tr> <tr> <td>Description Item 4:</td> <td><input type=text name=descritionitem4 size=100></td> </tr> <tr> <td>Description Item 5:</td> <td><input type=text name=descritionitem5 size=100></td> </tr> <tr> <td>Description Item 6:</td> <td><input type=text name=descritionitem6 size=100></td> </tr> <tr> <td>Description Item 7:</td> <td><input type=text name=descritionitem7 size=100></td> </tr> <tr> <td>Description Item 8:</td> <td><input type=text name=descritionitem8 size=100></td> </tr> <tr> <td>Description Item 9:</td> <td><input type=text name=descritionitem9 size=100></td> </tr> <tr> <td>Description Item 10:</td> <td><input type=text name=descritionitem10 size=100></td> </tr> <tr> <td>Description Item 11:</td> <td><input type=text name=descritionitem11 size=100></td> </tr> <tr> <td>Description Item 12:</td> <td><input type=text name=descritionitem12 size=100></td> </tr> <tr> <td colspan=2><input type=submit value="Submit!"> </td> </tr> </table> </form> </center> </head> <body> </body> </html> Template javascript: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
params = getParams();
// End -->
</script>
<SCRIPT LANGUAGE="JavaScript">
itemtitle = unescape(params["itemtitle"]).replace(/\+/g,' ');
document.write(itemtitle); </script> </STRONG></FONT></DIV>
</DIV>
<DIV align=left><FONT color=#492d67><STRONG>
<SCRIPT LANGUAGE="JavaScript">
itemcondition = unescape(params["itemcondition"]).replace(/\+/g,' ');
document.write("ITEM CONDITION: " + itemcondition); </script> </STRONG></FONT></DIV>
<DIV align=left><FONT color=#492d67></FONT> </DIV>
<DIV align=left><FONT color=#492d67><STRONG>
<SCRIPT LANGUAGE="JavaScript">
boxcondition = unescape(params["boxcondition"]).replace(/\+/g,' ');
document.write("BOX CONDITION: " + boxcondition); </script></STRONG></FONT> </DIV>
<DIV align=left><FONT color=#492d67></FONT> </DIV>
<DIV align=left><FONT color=#492d67><STRONG>
<SCRIPT LANGUAGE="JavaScript">
ukpostage = unescape(params["ukpostage"]).replace(/\+/g,' ');
europepost = unescape(params["europepost"]).replace(/\+/g,' ');
rowpostage = unescape(params["rowpostage"]).replace(/\+/g,' ');
document.write("POSTAGE: " + ukpostage + " (UK Mainland) " + europepost + " (Europe) " + rowpostage + " (R.O.W) " ); </script></STRONG></FONT> </DIV>
<DIV align=left></DIV>
<UL>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem1 = unescape(params["descritionitem1"]).replace(/\+/g,' ');
document.write(descritionitem1); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem2 = unescape(params["descritionitem2"]).replace(/\+/g,' ');
document.write(descritionitem2); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem3 = unescape(params["descritionitem3"]).replace(/\+/g,' ');
document.write(descritionitem3); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem4 = unescape(params["descritionitem4"]).replace(/\+/g,' ');
document.write(descritionitem4); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem5 = unescape(params["descritionitem5"]).replace(/\+/g,' ');
document.write(descritionitem5); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem6 = unescape(params["descritionitem6"]).replace(/\+/g,' ');
document.write(descritionitem6); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem7 = unescape(params["descritionitem7"]).replace(/\+/g,' ');
document.write(descritionitem7); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem8 = unescape(params["descritionitem8"]).replace(/\+/g,' ');
document.write(descritionitem8); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem9 = unescape(params["descritionitem9"]).replace(/\+/g,' ');
document.write(descritionitem9); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem10 = unescape(params["descritionitem10"]).replace(/\+/g,' ');
document.write(descritionitem10); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem11 = unescape(params["descritionitem11"]).replace(/\+/g,' ');
document.write(descritionitem11); </script>
<br>
<LI>
<DIV align=left><FONT color=#492d67>
<SCRIPT LANGUAGE="JavaScript">
descritionitem12 = unescape(params["descritionitem12"]).replace(/\+/g,' ');
document.write(descritionitem12); </script>
I would like the new template so i can view the source code which will contain the user filled info. This will then just be copied into the ebay description for use. Any help appreciated. Hi all, Basically, I'm an amatuer at this. I have created several websites, but most of them are through templates being edited on the likes of Dreamweaver. I have been creating my template, and I have finished the banner, then all the buttons directly underneith it. I have a background colour... and now I'm up to the the area the text is supposed to go into, directly under the buttons (home, contact, forums etc). I want this to be a different colour to the background colour, and for it to just be a box, 950pix wide, and go as high/low as I want it to depending on how much text is going on that particular page. I hope you all understand what I mean... I've got a feeling there is a possibility this might be a CSS issue, but I'm not 100% sure, so I didn't know which topic to put it under. Can anyone please help me? It would be much appreciated. I have been trying to figure this out on my own for hours now (I'm the type of person who doesn't like to ask for help ) Hi all, I use this template quite a lot and was wondering if someone could have a look at the coding and remove any errors? 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=ISO-8859-1"/> <link rel="shortcut icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <title>Top Bargain</title> </head> <body> <table align=center border=2> <tr vAlign=top> <td colSpan=2> <center> <br /> <font size=2><a href="http://feedback.ebay.co.uk/ws/eBayISAPI.dll?ViewFeedback&userid=top.bargain&ssPa geName=StrK:ME:UFS" target="_blank"><img src="http://www.topbargain.pwp.blueyonder.co.uk/images/Template/Top.BargainLogo.gif" alt="TopBargain" border="0" /></a> <br /> <br /> Purchase With Confidence. <a href="http://feedback.ebay.co.uk/ws/eBayISAPI.dll?ViewFeedback&userid=top.bargain&ssPa geName=StrK:ME:UFS"><em>VIEW FEEDBACK.</em></a> A Trusted eBay Power Seller. <a href="http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=top.bargain"><img src="http://www.topbargain.pwp.blueyonder.co.uk/images/Template/aboutme-small.gif" border="0"> </a><p> </font> </center> </td> </tr> <tr vAlign=top> <td> <h3 align=center>Description:</h3> </td> <td rowSpan=6> <img src="URL" width="300" height="600" alt="Picture Name" /> </td> </tr> <tr vAlign=top> <td> <br /> <ul> <font size=2><p>DESCRIPTION</p> <li></li> <li></li> <li></li> <li></li> <li></li> </font> </ul> </td> </tr> <tr vAlign=top> <td> <h3 align=center>Postage:</h3> </td> </tr> <tr vAlign=top> <td> <br /> <ul><font size=2> <li>Please Check Table At Bottom For UK Postal Rates</li> <li>Fast Delivery Via An Insured/Traceable Courier</li> <li>Please Click <a href="http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=top.bargain" border="0"><img src="http://pics.ebaystatic.com/aw/pics/uk/aboutme-small.gif" border=0 /></a> For Full Details.</li> </font> </ul> </td> </tr> <tr vAlign=top> <td> <h3 align=center>Payment Methods:</h3> </td> </tr> <tr vAlign=top> <td> <br /> <p align=center><a href="http://www.paypal.co.uk/uk" target=_blank><IMG style="WIDTH: 253px; HEIGHT: 56px" height=52 alt=TopBargain src="http://www.topbargain.pwp.blueyonder.co.uk/images/Template/PaypalLogo.gif" width=253 border=0></a></p> <ul><font size=2> <li><em>Bank Transfer.<em></li> <li>Money/Postal Orders and Cheques Accepted.<FONT color=white>.................. </font> </body> </html> I had to use that color=white....... piece otherwise the table is too small, can not find a solution to using something else. Any help appriciated. Thanks dear all i've taught myself some very basic html to use in my ebay listings (via turbo lister). at the moment i have an image inserted into the bottom of the listing that shows my feedback and also my terms etc (i use a pic so that i can change the image, re-upload to my server and therefore update all of my listings at once if necessary - i also use other pics so i can use funky fonts). what i'd prefer is to have a tabbed pane at the bottom with tabs for each section of information, e.g. payment/postage/returns etc. and i guess the contents of each tabbed pane would have to be an image in order that i can still update and reload as above? i don't know of any other dynamic update method... i've found LOADS of info on tabbed panes but i can't fathom how to use in the context of the listing template. can anyone help? i'd be very appreciative... thanks, naomi p.s.if anyone's working in this area i wouldn't mind commissioning a whole new listing template/shop design, but not at frooition prices p.p.s. my code (don't laugh, i'm a beginner!!) <P align=center><A href="http://www.stores.ebay.co.uk/stegnome"><IMG border=0 src="http://stegnome.com/ebay/logos/headervaluvintage.jpg"></A></P><FONT color=#804000 face=Verdana><FONT color=#804000><FONT color=#000000><FONT face=Verdana><FONT size=3> <P align=center><IMG border=0 src="http://stegnome.com/ebay/products/2010-08-17topsdresses/001.jpg" width=600><BR><ALIGN=CENTER> <TABLE style="WIDTH: 600px"> <TBODY> <TR> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=right><FONT face=Arial><IMG src="http://stegnome.com/ebay/logos/tableITEM.jpg"></FONT></P> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 400px; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=left><FONT face=Arial>ladies</FONT></P></TD></TR> <TR> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=right><FONT face=Arial><IMG src="http://stegnome.com/ebay/logos/tableBRAND.jpg" P <></FONT></P></TD> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"><FONT face=Arial>blah</FONT></TD></TR> <TR> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=right><FONT face=Arial><IMG src="http://stegnome.com/ebay/logos/tableDESCRIPTION.jpg" P <></FONT></P></TD> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"><FONT face=Arial>vintage 1980s</FONT></TD></TR> <TR> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=right><FONT face=Arial><IMG src="http://stegnome.com/ebay/logos/tableFABRIC.jpg" P <></FONT></P></TD> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"><FONT face=Arial>non-stretch cotton</FONT></TD></TR> <TR> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; VERTICAL-ALIGN: text-top; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=right><FONT face=Arial><IMG src="http://stegnome.com/ebay/logos/tableSIZE.jpg" P <></FONT></P></TD> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P><FONT face=Arial>UK size </FONT><BR><FONT face=Arial>EUR size <BR><FONT face=Arial>US size </FONT><FONT face=Arial><FONT face=Arial><FONT face=Arial></P></FONT></FONT></FONT></FONT></TD></TR> <TR> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"> <P align=right><FONT face=Arial><IMG src="http://stegnome.com/ebay/logos/tableCONDITION.jpg" P <></FONT></P></TD> <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid"><FONT face=Arial><FONT size=3><FONT face=Arial>9/10</FONT></FONT></FONT></TD></TR></TBODY></TABLE></P></U></STRONG></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT></FONT> <P style="FONT-FAMILY: verdana,arial,sans-serif; FONT-SIZE: 10px" align=center><FONT face=Arial></FONT></FONT></FONT></FONT></FONT></FONT><FONT color=#804000 size=1><FONT color=#804000><FONT color=#000000><FONT size=1></FONT></FONT></FONT></FONT></P> <P align=center><FONT color=#804000 size=1><FONT color=#804000><FONT color=#000000><FONT size=1><FONT face=Arial><FONT size=2>click logos below to visit my other departments...</FONT><BR><ALIGN=CENTER></FONT><A href="http://stores.shop.ebay.co.uk/stegnome_Accessories-Jewellery_W0QQ_fsubZ546976010QQ_sidZ163561490QQ_trksidZp4634Q2ec0Q2em322"><FONT face=Arial><IMG style="WIDTH: 206px; HEIGHT: 48px" border=0 src="http://stegnome.com/ebay/logos/smallpicaccessories.jpg" width=130 height=41></FONT></A><FONT face=Arial> </FONT><A href="http://stores.shop.ebay.co.uk/stegnome_ANIMAL-PRINT_W0QQ_fsubZ616308010QQ_sidZ163561490QQ_trksidZp4634Q2ec0Q2em322"><FONT face=Arial><IMG style="WIDTH: 200px; HEIGHT: 49px" border=0 src="http://stegnome.com/ebay/logos/smallpicanimalprint.jpg" width=164 height=50></FONT></A><FONT face=Arial> </FONT><A href="http://stores.shop.ebay.co.uk/stegnome_BOUTIQUE_W0QQ_fsubZ1041942010QQ_sidZ163561490QQ_trksidZp4634Q2ec0Q2em322"><FONT face=Arial><IMG style="WIDTH: 184px; HEIGHT: 48px" border=0 src="http://stegnome.com/ebay/logos/smallpicboutique.jpg" width=154 height=40></FONT></A><BR></FONT></FONT></FONT><FONT size=1><A href="http://stores.shop.ebay.co.uk/stegnome_HIGH-STREET_W0QQ_fsubZ1042310010QQ_sidZ163561490QQ_trksidZp4634Q2ec0Q2em322"><FONT face=Arial><IMG style="WIDTH: 220px; HEIGHT: 45px" border=0 src="http://stegnome.com/ebay/logos/smallpichighstreet.jpg" width=150 height=47></FONT></A><FONT face=Arial> </FONT><A href="http://stores.shop.ebay.co.uk/stegnome_Ladies-shoes_W0QQ_fsubZ504517010QQ_sidZ163561490QQ_trksidZp4634Q2ec0Q2em322"><FONT face=Arial><IMG style="WIDTH: 154px; HEIGHT: 44px" border=0 src="http://stegnome.com/ebay/logos/smallpicshoes.jpg" width=134 height=41></FONT></A><FONT face=Arial> </FONT><A href="http://stores.shop.ebay.co.uk/stegnome_VINTAGE_W0QQ_fsubZ1042309010QQ_sidZ163561490QQ_trksidZp4634Q2ec0Q2em322"><FONT face=Arial><IMG style="WIDTH: 216px; HEIGHT: 44px" border=0 src="http://stegnome.com/ebay/logos/smallpicvintage.jpg" width=166 height=44></FONT></A></FONT></P> <P align=center><FONT color=#000000 size=1><FONT face=Arial><FONT size=2>the kind of vintage clothing i sell...</FONT><BR></FONT></FONT><A href="http://www.stores.ebay.co.uk/stegnome"><FONT face=Arial><IMG style="WIDTH: 614px; HEIGHT: 555px" border=0 src="http://stegnome.com/ebay/logos/othervtgstuff4sale.jpg" width=540 height=422></FONT></A></P> <P align=center><FONT face=Arial><IMG border=0 hspace=0 alt="" align=baseline src="http://stegnome.com/ebay/logos/bottomoflisting.jpg"></FONT></FONT></P> <DIV><FONT face=Arial></FONT></DIV></FONT></FONT></TD> <P><FONT size=1 face=Arial></FONT></P></TR><TR></FONT></FONT></TD><FONT size=1></FONT></FONT></TR><TR><TD vAlign="top" align="middle"><FONT size=1></FONT></TD></TR></TABLE> <P><FONT size=1 face=Arial></FONT> </P> Hi guys, It's my first time on these forums, and I thought you all would be the best help I could get for my HTML problem. I've just recently created a blog and I am currently using a custom template. I'm not too familiar with HTML, or any sort of coding really, and I would like to stretch the content area of the template so that I could place larger images without it overlapping the grey bars. I have no idea what values to change though or what I should be looking for. Could you guys help me out? Many thanks, AciesEdge If you want to include a template file how do you do that inside a html page? I want to include a footer.dwt file inside my html file...... I want to implement the footer.dwt file for all the pages of website....so i just want to call the footer.dwt file below my html page...... Help? |
|||||||