15 Replies Latest reply: Feb 14, 2013 5:40 AM by manojb05 RSS

    DIV Problem

    manojb05 Community Member

      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

        • 1. Re: DIV Problem
          Candyce Mairs Community Member

          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.

          • 2. Re: DIV Problem
            Ken Binney MVP

            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/

            • 3. Re: DIV Problem
              Candyce Mairs Community Member

              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.

              • 4. Re: DIV Problem
                Ken Binney MVP

                You're entirely welcome m'lady.

                Hope you're keepin' warm there.

                cm.jpg

                • 5. Re: DIV Problem
                  manojb05 Community Member

                  Thanks ken & Candyce.

                  Ken actually i have one doubt when i incorporate the image in td background "the image have a social media network "facebook, Youtube & Twitter"

                  I want to link that Icon accordingly, this case is i don't how can i use MAP in?

                  please help me this?

                  • 6. Re: DIV Problem
                    Nancy O. MVP

                    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.

                    • 7. Re: DIV Problem
                      manojb05 Community Member

                      thanks nancy.

                      • 8. Re: DIV Problem
                        manojb05 Community Member

                        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.

                        • 9. Re: DIV Problem
                          Ken Binney MVP

                          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

                          • 10. Re: DIV Problem
                            manojb05 Community Member

                            Ken that document is for HTML email you already given the answer. Thanks.

                             

                            For eg my previous content for HTML IMAGINE "This Box Content centre of yellow area. How can i do this"

                            I am try to use DIV NOT TABLE

                             

                            ITS FOR A WEBSITE NOT HTML EMAILER

                             

                            WEBLINK

                            • 11. Re: DIV Problem
                              Ken Binney MVP

                              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

                              • 12. Re: DIV Problem
                                manojb05 Community Member

                                I am really sorry ken language is big concern.

                                SAME LINK

                                 

                                1)      I have a DIV container width is

                                             #container {

                                             width: 140px;

                                             margin-right: auto;

                                             margin-left: auto;

                                 

                                2)  I am inset one image in this div tag <img src="images/rvt.jpg" width="135" height="300" border="0" usemap="#Map" />

                                 

                                3) Then another div is  <div id="contentbox">This Box Content centre of yellow area. How can i do this</div>

                                 

                                4) I am try to fit id="contentbox" content centre of my image is it possible?

                                • 13. Re: DIV Problem
                                  Nancy O. MVP

                                  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.

                                  • 14. Re: DIV Problem
                                    Ken Binney MVP

                                    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-296338/135-172/rvt-top bg.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>

                                    • 15. Re: DIV Problem
                                      manojb05 Community Member

                                      thanks nancy & ken