Поместить <a>за границу?Почтовый бюллетень - PullRequest
Новая
       11

Поместить <a>за границу?Почтовый бюллетень

0 голосов
/ 03 декабря 2018

Я хочу поместить тег <a> поверх границы, как на изображении, но он должен быть отзывчивым в outlook 2013.

Outlook не поддерживает Max-Height, отступы только в элементах таблицы (td, th, tr), любой вопрос https://www.campaignmonitor.com/css/

How i want the table!

<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
        border="0">
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
                color: #737373;
                font-size: 15px;
                font-weight: 700;
                text-transform: uppercase;
                margin-bottom: 9px;">Example</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
                   xxxx</p>

                <table style="color:white;border-left: 10px solid #ffffff;
                border-right: 10px solid #ffffff;"
                    width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="center" valign="top" style="padding:0px 0px 0px 0px;" bgcolor="#ed1c2e">
                            
                            <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">See
                                more <i style="    font-size: 29px;
                                                vertical-align: -5px;
                                                font-style: normal;">➝</i>
                            </a>

                        </td>

                    </tr>
                </table>


            </td>

        </tr>

    </table>

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Вот он, рабочий пример того, что вы ищете: 

<html>
<head>
<style>
    button:focus {
        outline: none;
        cursor: pointer
    }

    body {
        font-family: 'Arial';
    }
</style>
</head>
<body>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;padding: 20px 20px 0px 20px;border-bottom: 0px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
            color: #737373;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 9px;">Campanha</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Estratégia
                    nacional de Turismo 2027</p>
            </td>
        </tr>
    </tbody>
</table>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td style="margin: 0px;padding: 0px;width: 10px;">
                <table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-right: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td bgcolor="#ed1c2e" style="
                                    text-align: center;
                                    padding-left: 20px;
                                    padding-top: 24px;
                                    width: 23px;
                                    background-color: white;
                                    ">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td align="center" valign="top" style="padding: 0px 0px 0px 0px;" bgcolor="#ed1c2e">
                <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">Ver
                    mais <i style="font-size: 29px; vertical-align: -5px; font-style: normal;">?</i>
                </a>
            </td>
            <td style="margin: 0px; padding: 0px; width: 10px;">
                <table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-left: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td bgcolor="#ed1c2e" style="
                                    text-align: center;
                                    padding-right: 20px;
                                    padding-top: 24px;
                                    width: 23px;
                                    background-color: white;
                                    ">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table> 
</body>

0 голосов
/ 03 декабря 2018

Обновление

Хорошо, я не увидел изображение, потому что я идиот.

Итак, вот что я сделал, я сделал a position:relative

Затем добавили следующее к встроенному стилю: 

border: white solid 10px; 
bottom: -37px;

, потому что вы используете вещи, которые я не рекомендую использовать в реальном мире.,Есть лучшие способы делать вещи.

Затем я добавил к вашей таблице следующее: 

margin-top: -30px;

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

<table style="padding-left:28px;padding-right:27px;position: relative;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody><tr>
    <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
        <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
        color: #737373;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 9px;">Example</p>
        <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px;padding: 20px;">Example
           xxxx</p>

        <table style="
        color:white;
        padding-bottom: 0px;
        " width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody><tr>
                <td align="center" valign="" style="padding:0px 0px 0px 0px;padding: -20px;position: relative;width: 100%;top: bottom;bottom: 20px;text-align: center;">
                    
                    <a href="#" target="_blank" style="text-decoration:none;color:#ffffff;outline:none;width:90%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700;text-align: center;background: #ed1c2e;display: block;position: absolute;border: white solid 10px;top: 0px;z-index: 200;left: 50%;transform: translateX(-50%);">See
                        more <i style="    font-size: 29px;
                                        vertical-align: -5px;
                                        font-style: normal;">➝</i>
                    </a>

                </td>

            </tr>
        </tbody></table>


    </td>

</tr>

</tbody></table>

СТАРЫЙ ПОБЕДИТЕЛЬ

Честно говоря, я не уверен на 100%, что вы хотите.Я предполагаю это это?Что вы используете max-height для?

Это то, что вы хотели бы? 

<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
        border="0">
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
                color: #737373;
                font-size: 15px;
                font-weight: 700;
                text-transform: uppercase;
                margin-bottom: 9px;">Example</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
                   xxxx</p>

                <table style="color:white;border-left: 10px solid #ffffff;
                border-right: 10px solid #ffffff;"
                    width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="center" valign="top" style="padding:0px 0px 0px 0px;">
                            
                            <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center; background: #ed1c2e; display: block">See
                                more <i style="    font-size: 29px;
                                                vertical-align: -5px;
                                                font-style: normal;">➝</i>
                            </a>

                        </td>

                    </tr>
                </table>


            </td>

        </tr>

    </table>

Все, что вам не хватало, было display: block; В теге a.

Если это не то, что вы хотели, пожалуйста, прокомментируйте и плохо отрегулируйте

...