Skip navigation
Currently Being Moderated

DIV Problem

Feb 4, 2013 6:41 AM

Dear All,

I am facing some div problem i want to place a some content centre of JPG email.

My entire code link is given below for valuable feedback.

WEBLINK

 
Replies
  • Currently Being Moderated
    Feb 4, 2013 6:52 AM   in reply to manojb05

    In CSS you can center text using the text-align:center property on an element. To center content other than text, there are 3 things that need to occur. The first is to be sure the content to center has a width property. The second is to set the left & right margins to auto for that element. The third is only necessary if you are using absolute positioning on other elements within the element you wish to center. If that is the case, you will need to add relative positioning to the element. Here is example CSS for the properties I mention above for the img tag selector.

     

    img {

         width: 300px;

         margin-left: auto;

         margin-right: auto;

         position:relative; /*only needed if other elements within this one are absolute positioned*/

    }

     

    The margin auto property tells the browser to keep the margins the same on both sides of the element you choose as the selector.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 7:51 AM   in reply to manojb05

    Sorry to say, but most modern web page coding will not work for an Email.

    If you want to code your own HTML emails, your are going to have to go back to mid-90's web coding practices.  Yup... tables and minimal CSS with only inline styling.

     

    rge.jpg

     

    <!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>HTML Email</title>

    </head>

     

    <body>

      <table width="140" border="0" align="center" cellpadding="5">

        <tr>

          <td height="290" valign="top" background="http://www.newtonclients.com/emailer/images/rvt.jpg">

            <p> </p>

            <p> </p>

            <p>This Box Content centre of yellow area. How can i do this </p></td>

         </tr>

      </table>

    </body>

    </html>

     

    http://www.sitepoint.com/code-html-email-newsletters/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 7:51 AM   in reply to Ken Binney

    Ken, thank you for catching that this was an email. I am afraid I missed that piece, so my explanation did not take that into account. Email newsletters do not have the flexibility with CSS that the browser does.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2013 8:55 AM   in reply to Candyce Mairs

    You're entirely welcome m'lady.

    Hope you're keepin' warm there.

    cm.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 5, 2013 1:50 PM   in reply to manojb05

    You cannot use a background-image for an image map. 

     

    You would need to create separate icons for FB, YT & Twitter.  Insert the 3 new icons into your table cells.  Then link each one as required.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 7:40 AM   in reply to manojb05

    manojb05 wrote:

     

    ken i have one doubt in mind. u think its not a emailer i am created for my web.

    How can i postioned content in middle.

     

    Sorry Manoj, I do not understand -

     

    1. Are you coding a web page or an HTML email?

    2. What content are you trying to center?

     

    We Need to see all the code in your document.

    Please put your document and necessary images on your web server and post a link here.

     

    Ken

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 9:32 AM   in reply to manojb05

    You have not given the requested link so we are still guessing.

     

    You could slice that image and insert the top half AS A BACKGROUND with your HTML text typed over it

    rvt-topbg.jpg

     

    Insert the bottom half AS A NORMAL IMAGE and apply your image map for the four links.

     

    rvt-bottom.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 12:06 PM   in reply to manojb05

    Try pasting this into a new, blank document:

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <style>
    #container {
         width: 140px;
         margin-right: auto;
         margin-left: auto;
    /**background image goes here**/
         background:yellow;
    /**same as image height**/
         min-height: 350px;
    }
    
    #content {
        border: 1px dotted red;
    /**adjust margins as needed**/
        margin-top: 145px;
        margin-right: 25px;
        margin-bottom: 100px;
        margin-left: 25px;
    }
    
    </style>
    </head>
    <body>
     <div id="container">
          <div id="content">
               Your text goes here...
         </div>
    </div>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 10, 2013 6:21 PM   in reply to manojb05

    There are two problems with the above page code.  The background image will not display, and if repaired, you would not be able to apply your image map to a background image.

     

    As I explained in my earlier post, I suggest splitting the image into two separate images; the top one as a background with your text typed on top, and the bottom as a regular image with an image map.

     

    Save this code as an HTML file:

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>untitled</title>

     

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

     

    <style>

    #container1 {

         width: 135px;

         margin-right: auto;

         margin-left: auto;

        background-image:url('http://forums.adobe.com/servlet/JiveServlet/downloadImage/2-5062226-29 6338/135-172/rvt-topbg.jpg');

        background-color:yellow;

        min-height: 172px;

    }

    #text {

        margin-top:10px;

        margin-right: 25px;

        margin-bottom: 0px;

        margin-left: 25px;

    }

    #container2 {

         width: 135px;

         margin-right: auto;

         margin-left: auto;

        background-color:yellow;

        min-height: 128px;

    }

    </style>

    </head>

    <body>

    <div id="container1">

     

    <div id="text">

    This text is typed over the upper background image.

    </div>

     

    </div>

     

    <div id="container2">

    <img src="http://forums.adobe.com/servlet/JiveServlet/showImage/2-5062226-296342 /rvt-bottom.jpg" alt="" width="135" height="128" border="0" usemap="#Map">

    <map name="Map">

      <area shape="rect" coords="42,6,57,23" href="#">

      <area shape="rect" coords="38,13,42,15" href="#">

      <area shape="rect" coords="34,14,45,20" href="#" alt="Facebook">

      <area shape="rect" coords="63,6,80,27" href="#" alt="Youtube">

      <area shape="rect" coords="85,4,106,26" href="#" alt="Twitter">

      <area shape="poly" coords="83,32,16,82,45,118,110,72" href="#" alt="Participate">

    </map>

    </div>

    </body>

    </html>

     
    |
    Mark as:

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