Jump to content
  • 0

НАЛОЖЕНИЕ таблиц в GMAIL - вопрос

DEviso

Asked by DEviso,

 Share

Question

DEviso Explorer

DEviso

Posted
Posted

Всем привет!)

 

 

сверстал страницу для почтовой рассылки http://juliastepanets.com/email/email.html

у меня есть наслоение на странице, наслоение иконок и надписей на конверт

 

потом вставил в gmail, оказалось что почтовики не читают "минусы" - "margin: -100px;" 

"position relative" и "adsolute" - почта тоже не видит, и выходит так:

 

http://goo.gl/vF54d0

 

 

: Пожалуйста подскажите как выполнить наложение таблиц в гмейле?

 

Спасибо!))

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
DEviso Explorer

DEviso

Posted
  • Author
Posted (edited)

дело в том, что почтовик воспринимает только "горизонтальное" и "вертикальное" расположение таблиц. 

Но саму идею ведь както же можно реализовать?

 

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

 

блин, химия еще та))

 

может какой другой способ есть?

Edited by DEviso
Link to comment
Share on other sites
  • 0
DEviso Explorer

DEviso

Posted
  • Author
Posted

это капец какойто))) 21 век все же!!))

 

спасибо ребят!!!

если кто еще способ знает, напишите пожалуйста!) 


УРА!!!!!! у меня получилось!!! назначил фон таблицы - изображение конверта и вставил значки поверх. Почтовик видит!!!)))

 

я чуть позже подробнее опишу))

Link to comment
Share on other sites
  • 0
DEviso Explorer

DEviso

Posted
  • Author
Posted (edited)

нет, ну конечно не только для гмейла, меня интересует как в любом будет показывать, а что?

 

 

DEviso, А почему бы просто эти 5 картинок не вырезать одной?

Верстать для почты нужно максимально просто и не замысловато, как сказали выше, с подходом 90х :)

всмысле? просто картинкой письмо сделать?

Edited by DEviso
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Andrey_Afonchenko
      Помогите с эффектом наложения
      By Andrey_Afonchenko
      Здравствуйте! Помогите, пожалуйста!
      Есть два блока (div): один с картинкой, а другой с текстом.
      Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой.
      Для этого я делал в попытке реализации данного эффекта:
      .image
      {
          display: inline-block;
          Position: absolute;
          z-index: 1;
      }
      @Keyframes block_overlap
      {
          from
          {
              z-index: 0;
          }
          to
          {
              z-index: 2
          }
      }
      .text
      {
          display: inline-block;
          position: absolute;
          animation-name: block_overlap;
          animation-duration: 1s;
      }
      Данный код не привёл к решению проблемы.
       
    • sdanilas
      Адаптивные картинки в e-mail рассылках
      By sdanilas
      Здравствуйте!
      Кто-то верстал e-mail рассылки с адаптивными картинками?
      Столкнулся с такой проблемой. Картинка адаптивится корректно почти во всём зоопарке почтовиков, платформ и браузеров. Но в gmail на android (браузерная версия) переопределяется свойство max-width. Gmail ограничивает ширину картинки чтобы не было горизонтального скрола, но значение он подставляет не корректное. В итоге появляется горизонтальный скролл. Что интересно - в приложении gmail на android всё корректно - проблема только в браузерной версии.
      Думал что у меня наверстано как-то криво (не мооооожет быть, но вдруг :D) - поглядел на пример популярной рассылки от игрового сервиса Steam - на ней такая же беда, картинка получает свой не корректный max-width и тоже появляется скролл.
      Это глюк gmail ли особенность? Кто-то сталкивался с задачей вёрстки адаптвных картинок в рассылках? Всякие популярные шаблоны типа Cerberus не помогают.
    • fenix_63
      Не работает z-index
      By fenix_63
      Народ, всем привет! Есть сайт: http://handmademania.ru/b2b/  Щелкаем пункт верхнего меню "Расчёт заказа". Нас прокручивает вниз к анкете. Так вот, в ячейке "Мастер-классы, которые вы выбрали" я сделал список с мультивыбором. Проблема в том, что список большой,и он пересекается с кнопкой "Отправить". А если надо выбрать элемент списка, который на одном уровне с кнопкой, то кнопка становится на переднем плане, а мне надо, чтобы на переднем плане был выпадающий список.

      С z-index пробовал - не помогло, Пробовал z-index вместе с position:relative и без, но пока безрезультатно (( Помогите пожалуйста, кто может. Скриншот по ссылке:  Скриншот. 
    • DDeDMazday
      Как сослаться на якорь в табе?
      By DDeDMazday
      Собственно вопрос в заголовке, проблема такова: в пределах таба ссылка работает, а при попытке сослаться на якорь в другом табе, ничего не происходит, как можно решить проблему? типовая страница сайта  http://travelsbase.ru/index.php/leningradskaya/goluboe , если нужен исходник вставлю код.
    • oledgan
      Наложить блоки на картинку
      By oledgan
      Добрый день!
      Можно считать, что верстаю впервые.
      Проблема возникла вот с чем. Не могу понять как наложить два блока на картинку(пример во вложении). =(
      сейчас
      а нужно
      вот код html
      и ниже css
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Parlez-vous français</title> <link type="text/css" rel="stylesheet" href="css/table.css"/> <style> body { background: url(image/fonmain.png); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="textabove"> <p> <img src="image/parlez1.png" alt="parlez-vouz francais?" width="300px"/><br> <img src="image/parlez2.png" alt="учим французский язык вместе." width="250px"/> </p> </div> <div> <img id="podlogka" src="image/fon2.png" alt="подложка" height="450px" width="950px"/> </div> </body></html>* { margin: 0; padding: 0;}#textabove { margin-bottom: 10px; margin-left: 15%; margin-top: 55px; line-height: 1px;}#podlogka { margin-left: 205px;}
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept