как разместить текст под логотипом css - PullRequest
Новая
       0

как разместить текст под логотипом css

0 голосов
/ 19 августа 2010

Мне интересно, как вы можете иметь текст также под логотипом.

Это код, и я не смог найти, где можно разместить текст под логотипом. Спасибо Теперь вот что я получил: 

                   <html> 
    <head>
    <title>*|MC:SUBJECT|*</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <style type="text/css" media="screen">
            p{margin-bottom:10px;}

            /** 
            * @tab Page 
            * @section background color 
            * @tip Choose a color for your HTML email's background. You might choose one to match your company's branding. 
            * @theme page 
            */ 
            body { 
                /*@editable*/ background-color:#62788F; 
                text-align:center;
            } 

            #layout { 
                margin:0 auto; 
                text-align:left; 

            } 

            /** 
            * @tab Header
            * @section header top 
            * @tip Set the look of the archive link bar. 
            */ 
            #header-top { 
                /*@editable*/ background-color:#62788F; 
                /*@editable*/ border-top:0px none;
                /*@editable*/ border-bottom:0px none;
                /*@editable*/ color:#EFEFEF;
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:11px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal; 
                padding:15px 0 5px; 
                /*@editable*/ text-align:center; 
            } 

            /** 
            * @tab Header 
            * @section title style 
            * @tip Titles and headlines in your message body. Make them big and easy to read. 
            * @theme title 
            */

            /**This is the title*/
            .primary-heading { 
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:46px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:bold;
                /*@editable*/ line-height:100%; 
                margin:0;
                padding:0px;
                /*@editable*/ text-transform:uppercase; 
            } 

            /** 
            * @tab Header 
            * @section subtitle style 
            * @tip This is the byline text that appears immediately underneath your titles/headlines. 
            * @theme subtitle 
            */ 
            .secondary-heading { 
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:18px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal; 
                /*@editable*/ line-height:100%; 
                margin:0 0 0 0;
                padding:10px 0 0 0;
                /*@editable*/ /*text-transform:uppercase; Wrenching Tips For DIY'ers*/
                /*@editable*/ text-transform:uppercase; 
            }

            /** 
            * @tab Body 
            * @section intro content 
            * @tip This is the default text style for the introductory content of your email. 
            * @theme content 
            */ 


            #content-intro {            
                /*@editable*/ background-color:#62788F; /**background of the text title*/
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:14px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:150%;

                padding:15px 10 20px 10; /*New*/

                /*padding:15px 0 20px 0; O*/
                vertical-align:top;             
                width:300px;
            }


            #content-intro-text {

                /*@editable*/ /*background-color:#62788F;*/ /*background of the text title*/
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:14px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:150%;


                /*padding:15px 0 20px 0; O*/
                /*vertical-align:top;*/
                /*width:300px;*/
            }






            #content-intro p{               
                width:300px
                /*width:285px O */
            }

            #image{
                padding:15px 0 20px 0;              
                text-align:left;
                vertical-align:top;
            }

            /** 
            * @tab Body 
            * @section intro content 
            * @tip This is the default text style for the introductory content of your email. 
            * @theme content 
            */ 
            #content-left, #content-right{              
                /*@editable*/ border-top:1px solid #8193A5; 
                padding:0 0 10px 0;
                vertical-align:top;
            }

            /** 
            * @tab Body 
            * @section sidebar widget headings 
            * @tip This is the default style for the sidebar widgets of your email. 
            * @theme content 
            */ 
            .widget .secondary-heading {
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:18px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:100%;
                /*@editable*/ text-transform:uppercase;
            }

            /** 
            * @tab Body 
            * @section sidebar widget text
            * @tip This is the default style for the sidebar widgets of your email. 
            * @theme content 
            */ 
            .widget {
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:14px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:150%;
                margin:20px 0;
                width:290px;
            }

            /** 
            * @tab Body 
            * @section closing content 
            * @tip This is the default text style for the closing content block of your email. 
            * @theme content 
            */ 
            #content-outro{
                /*@editable*/ background-color:#8193A5;
                /*@editable*/ color:#EFEFEF;
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:14px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal;
                /*@editable*/ line-height:150%;
                padding:20px;
            }

            /** 
            * @tab Body 
            * @section closing content heading
            * @tip This is the default style for the heading of the closing content block of your email. 
            * @theme content 
            */ 
            #content-outro .secondary-heading {
                /*@editable*/ color:#EFEFEF; 
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:20px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:bold;
                /*@editable*/ line-height:100%;
                /*@editable*/ text-transform:uppercase;
            }

            #button{
                text-align:center;
            }

            /** 
            * @tab Body 
            * @section closing content button
            * @tip This is the default text style for the closing content button. 
            * @theme content 
            */ 
            #button a {
                /*@editable*/ background-color: #92AECB;
                /*@editable*/ color: #FFFFFF;
                display:block;
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size: 18px;
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight: bold;
                padding: 15px 30px;
                /*@editable*/ text-decoration: none;
                /*@editable*/ text-transform: uppercase;
            }

            /** 
            * @tab Footer 
            * @section footer 
            * @tip You might give your footer a light background color and separate it with a top border 
            * @theme footer 
            */ 
            #footer { 
                /*@editable*/ background-color:#62788F; 
                /*@editable*/ border-top:0px none;
                /*@editable*/ border-bottom:0px none;
                /*@editable*/ color:#EFEFEF;
                /*@editable*/ font-family:Arial; 
                /*@editable*/ font-size:11px; 
                /*@editable*/ font-style:normal; 
                /*@editable*/ font-weight:normal; 
                /*@editable*/ line-height:14px; 
                padding:20px 0 20px 0;
                /*@editable*/ text-align:center;
            } 

            /** 
            * @tab Footer 
            * @section link style 
            * @tip Specify a color for your footer hyperlinks. 
            * @theme link_footer 
            */ 
            #footer a { 
                /*@editable*/ color:#FFFFFF; 
                /*@editable*/ font-weight:normal; 
                /*@editable*/ text-decoration:underline; 
            } 

            /** 
            * @tab Page 
            * @section link style 
            * @tip Specify a color for all the hyperlinks in your email. 
            * @theme link 
            */ 
            a, a:link, a:visited { 
                /*@editable*/ color:#FFFFFF; 
                /*@editable*/ font-weight:normal; 
                /*@editable*/ text-decoration:underline; 
            } 
        </style> 
    </head> 
    <body>
       <table width="600" border="0" cellspacing="0" cellpadding="0" id="layout">
        <tr>
            <td id="header-top" colspan="2" mc:edit="header-top">
                <p>Email not displaying correctly? <a href="*|ARCHIVE|*" title="View this email in your browser.">View it in your browser</a></p>
               </td>
           </tr> 

           <tr>

           <td colspan="2"> 
                <p>
                 <img align="left" hspace="20" src="http://logo_312x142.jpg" /> 
                 <td id="content-intro-text" colspan="2">
                <div mc:edit="main">              

                    <h1 class="primary-heading">Test</h1>
                    <h2 class="secondary-heading">This is a test</h2>
                   <p>Sample copy. Lorem ipsum dolor sit amet et est, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum.             
                   </p>
                </div>
                </p>
          </td>
        </tr>       


        <tr>
                <td colspan="1" id="content-left">
                    <div mc:repeatable>
                        <div class="widget" mc:edit="content-left-repeatable">
                           <h2 class="secondary-heading">Flush Your Coolant</h2>
                           <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
                           <a href="" target="_blank">Read More</a>
                        </div>
                    </div>
                </td>
                <td colspan="1" id="content-right">
                    <div mc:repeatable>
                        <div class="widget" mc:edit="content-right-repeatable">
                           <h2 class="secondary-heading">Flush Your Coolant</h2>
                           <p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
                           <a href="" target="_blank">Read More</a>
                        </div>
                    </div>
               </td>
           </tr>
           <tr>

       </table>
        <span style="padding: 0px;"></span>
    </body> 
</html>

Ответы [ 2 ]

2 голосов
/ 19 августа 2010

посмотрите, как это сделать в этом примере

http://www.ironspider.ca/graphics/alignment.htm

идея состоит в том, чтобы играть с атрибутом align в изображении (поместите изображение в тот же абзац)

и поставьте пробел с атрибутом hspace / vspace

, например: 

     <tr>

           <td colspan="2"> 
                <p>
                 <img align="left" hspace="20" src="http://logo_312x142.jpg" /> 

                <div mc:edit="main">              

                    <h1 class="primary-heading">Test</h1>
                    <h2 class="secondary-heading">This is a test</h2>
                   <p>Sample copy. Lorem ipsum dolor sit amet et est, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum.             
                   </p>
                </div>
</p>
          </td>
        </tr>
1 голос
/ 19 августа 2010

для решения проблем при кодировании HTML-шаблона электронной почты, не стесняйтесь использовать традиционный тег <table> для организации вашего контента. существует огромная проблема с совместимостью почтового клиента, некоторые делают это правильно, некоторые делают это странно ... и т.д.

в вашем случае здесь, пока все хорошо ... теперь вы решили объединить все это в один <td>...</td>, верно ... если вы хотите переместить текстовое содержимое (h1, h2, p..etc) в быть размещенным ниже логотипа img, я думаю, вы можете просто добавить <br> в конце img. по логике это должно работать, верно? Eventough h1 сам по себе является блочным элементом, но в почтовом клиенте вещи могут отображаться по-другому.

или просто добавьте еще <tr>..</tr> после tr для логотипа .. имеет смысл?

ИЛИ, стиль старой школы, "Nested Table"! : D Конечно, я не рекомендую ..

дайте нам знать, если это поможет. :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...