Skip navigation
sneedbreedley
sneedbreedley
Currently Being Moderated

How to Insert Date Over Image in Dreamweaver CS6?

Feb 17, 2013 8:15 AM

I have a coupon in the middle of my webpage. I want to insert today's date in the image. I tried Insert-Date, but that adds the date next to the image. I need to precisely position the date in one section of the coupon.

741 Views   15 Replies   Latest reply: Nancy O., Feb 18, 2013 1:54 PM
 
Replies
  • SnakEyez02
    Currently Being Moderated
    1. SnakEyez02,
    Feb 17, 2013 10:40 AM   in reply to sneedbreedley
    Report

    Out of all the cases you will read on these forums about not using positioning, this is a case where it must happen. To make this work you can make the image a background of a fixed size container (div with set dimensions) and then position the "date" layer over the image.

     

    You do mention that this is in the center of your webpage.  If this is something likely to be printed then you might be better using an image in the center of your webpage, followed by a printable webpage with the actual date printed in the coupon.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    2. sneedbreedley,
    Feb 17, 2013 12:17 PM   in reply to SnakEyez02
    Report

    I managed to add today's date over an image using a new CSS rule. But I cannot change it's positon from top center in the image. How can I precisely position it?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Feb 17, 2013 2:20 PM   in reply to sneedbreedley
    Report

    How can I precisely position it?

    With CSS.  Can you show us the URL?

     

     

    Nancy O.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    4. sneedbreedley,
    Feb 17, 2013 2:31 PM   in reply to Nancy O.
    Report

    http://savcp.com/index-coupon-800.html

    I want to replace the date on the coupon with the current date, so it changes every day.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Feb 17, 2013 2:54 PM   in reply to sneedbreedley
    Report

    On this URL:

    http://savcp.com/coupon-400-01-wht.html

     

    <img src="images/coupon-400-01.jpg" alt="coupon" name="coupon" id="coupon" height="261" width="576">

     

    <p style="position:absolute; top:226px; left:180px; font-size: 21px; color:red"><?php $theDate = date("m/d/y"); echo "$theDate"; ?><p>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    6. sneedbreedley,
    Feb 18, 2013 10:18 AM   in reply to Nancy O.
    Report

    That didn't seem to do anything.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Feb 18, 2013 10:23 AM   in reply to sneedbreedley
    Report

    It works if your page is .php and your server supports PHP code.

     

    <p style="position:absolute; top:226px; left:180px; font-size: 21px; color:red">INSERT DATE HERE<p>

     

     

    Nancy O.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    8. sneedbreedley,
    Feb 18, 2013 10:38 AM   in reply to Nancy O.
    Report

    It's html.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Feb 18, 2013 10:51 AM   in reply to sneedbreedley
    Report

    Which code are you using to get the current date?

     

     

    Nancy O.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    10. sneedbreedley,
    Feb 18, 2013 11:07 AM   in reply to Nancy O.
    Report

    I used Insert-Date, but now that I see the code, I don't believe that it updates the date automatically.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    11. Nancy O.,
    Feb 18, 2013 11:21 AM   in reply to sneedbreedley
    Report

    To get current date off the server, you need to use server-side code.  What kind of server do you have -- Windows or Linux?

     

    Nancy O.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    12. sneedbreedley,
    Feb 18, 2013 11:23 AM   in reply to Nancy O.
    Report

    Windows

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    13. Nancy O.,
    Feb 18, 2013 11:37 AM   in reply to sneedbreedley
    Report

    Create a new ASP page.

    Insert coupon image and paragraph code I gave you earlier.

     

    Insert date with VB Script:

     

    <%=FormatDateTime(Now(),vbLongDate)%>

     

    Save coupon page as .asp

     

    Upload to server to test.

     

     

    Nancy O.

     
    |
    Mark as:
  • sneedbreedley
    Currently Being Moderated
    14. sneedbreedley,
    Feb 18, 2013 12:42 PM   in reply to Nancy O.
    Report

    NG, here's what I got

    http://savcp.com/coupon-800-01-wht-erase.asp

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    15. Nancy O.,
    Feb 18, 2013 1:54 PM   in reply to sneedbreedley
    Report

    Then you're not on a Windows server. You're on a Linux server. 

     

    Copy & paste this into a new, blank document.  Save As .php document.

    Upload to  test.

     

     

    <!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>Coupon White</title>

<style type="text/css">

#coupon {
    position:relative;
}

#coupon p {
position:absolute; 
top:198px; 
left:125px; 
background:#FFF; 
font-size: 18px; 
font-weight:bold;
color:red;
}
</style>

</head>

<body>
<div id="coupon">
<img src="http://savcp.com/images/coupon-800-01.jpg" 
alt="coupon" name="coupon" id="coupon" height="261" width="576">

<p>Offer good until 
<?php $theDate = date("m/d/y"); echo "$theDate"; ?>. 
One per customer</p>

</div>

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points