Search the Community
Showing results for tags 'адаптивный'.
Found 5 results
-
Всем привет! Занимаюсь версткой чуть больше 2ух месяцев, без наставника, просто просматривая обучающие ролики и читая источники по этой теме. На данный момент сверстал 2 фикс макета и один адаптив, ссылку на который сейчас и выкладываю. Так же адаптирован под ретина дисплеи. https://schamil74.github.io/Sedona2017/ Заходите с телефонов, планшетов. А вот касательно кроссбраузерности, обнаружил такой баг: На IE11 иконки выпадают из инпута. Пока не могу загрузить скрин - ошибка!!!
-
Всем привет. Собрал шаблон jsfiddle но знаю что сделал криво, прошу посоветовать как правильно такое реализовать, сейчас поведение блоков именно такое как нужно, просто думаю что реализовано неверно. На экранах компьютеров должно быть две колонки, левая с картинкой во всю высоту и примерно в половину ширины. В правой колонке текст. На мобильных устройствах, левая колонка поднимается в самый верх на всю ширину экрана, а ниже уже идет текстовый блок который был справа. Пытался сделать кросбраузерно но не получилось, у меня используется свойство background-size: cover которое ниже ие 9 не поддерживается. Пробовал картинку делать не бекграундом, а как обычное img с помощью этого скрипта jsfiddle.net но что то у меня не получилось, на больших разрешениях img фиксируется но при этом растягивается на весь экран. В общем буду признателен за любые дельные советы подсказки или критику
-
Люди, посоветуйте как лучше поступить. Скрин проблемы http://prntscr.com/a58l7i Пояснение: Есть кастомизированный горизонтальный скрол с которым хорошо работать на компьютере. Нужно его адаптировать под планшеты и смартфоны. Изначально я использовал JQuery плагин custom-scrollbar-master, но в нем есть очень большой косяк, он не поддерживает флик (движение пальцем по телефону) вправо на телефоне. Я пытался найти другие плагины, но все которые мне попадались не поддерживают флик вправо. Ребят, посоветуйте как можно решить такую проблему или может кто посоветует другой плагин?
-
Адаптивный шаблон страницы. Шапка не смещается.
newjmrec1@gmail.com posted a question in HTML Coding
Здравствуйте! Помогите пожалуйста. Совмещаю html с css для создания адаптивного шаблона для рассылки писем. Вроде все адаптируется, но только шапка в мобильной версии почему-то смещается влево. Все перерыл, не могу понять почему. Спасибо! PS Возможно имеется лишний код, мог лишний раз куда-то добавить строчки из css. <html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;} </style> <style type="text/css">.content { padding:15px; max-width:600px; margin:0 auto; display:block; </style> <style type="text/css">.content table { width: 100%; } </style> <style type="text/css">.column { width: 300px; float:left;}.column tr td { padding: 15px; }.column-wrap { padding:0!important; margin:0 auto; max-width:600px!important;}.column table { width:100%;}.social .column { width: 280px; min-width: 279px; float:left;} </style> <style type="text/css">ul.sidebar { background:#ebebeb; display:block; list-style-type: none;}ul.sidebar li { display: block; margin:0;}ul.sidebar li a { text-decoration:none; color: #666; padding:10px 10px;/* font-weight:bold; */ margin-right:10px;/* text-align:center; */ cursor:pointer; border-bottom: 1px solid #777777; border-top: 1px solid #FFFFFF; display:block; margin:0;}ul.sidebar li a.last { border-bottom-width:0px;}ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;} </style> <style type="text/css">h1,h2,h3,h4,h5,h6 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;}h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }h1 { font-weight:200; font-size: 42px;}h2 { font-weight:200; font-size: 37px;}h3 { font-weight:500; font-size: 27px;}h4 { font-weight:500; font-size: 23px;}h5 { font-weight:900; font-size: 17px;}h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}.collapse { margin:0!important;}p, ul { margin-bottom: 10px; font-weight: normal; font-size:13px; line-height:1.6;}p.lead { font-size:17px; }p.last { margin-bottom:0px;}ul li { margin-left:5px; list-style-position: inside;} </style> <style type="text/css">{ margin:0; padding:0;}* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }img { max-width: 100%; }.collapse { margin:0; padding:0;}body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width: 100%!important; height: 100%;} </style> <!-- If you delete this tag, the sky will fall on your head --><meta name="viewport" content="width=device-width"> <title>Центр Рушеля Блаво</title></head><body bgcolor="#FFFFFF" style="cursor: col-resize;"><style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;}</style><!-- HEADER --><style type="text/css">table.head-wrap { width: 100%;}.header.container table td.logo { padding: 15px; }.header.container table td.label { padding: 15px; padding-left:0px;}</style><table bgcolor="#999999" class="head-wrap"> <tbody> <tr> <td></td> <td class="header container"> <style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;} </style> <div class="content"> <style type="text/css">.content { padding:15px; max-width:600px; margin:0 auto; display:block; </style> <style type="text/css">.content table { width: 100%; } </style> <table bgcolor="#999999"> <tbody> <tr> <td> <style type="text/css">table.head-wrap { width: 100%;} </style> <img src="http://placehold.it/200x50/" /></td> <td align="right"> <style type="text/css">table.head-wrap { width: 100%;} </style> <h6 class="collapse" style="text-align: right;">Hero</h6> </td> </tr> </tbody> </table> </div> </td> <td> <style type="text/css">table.head-wrap { width: 100%;} </style> </td> </tr> </tbody></table><!-- /HEADER --><!-- BODY --><style type="text/css">table.body-wrap { width: 100%;}</style><table class="body-wrap"> <tbody> <tr> <td></td> <td bgcolor="#FFFFFF" class="container"> <div class="content"> <style type="text/css">table.body-wrap { width: 100%;} </style> <table> <tbody> <tr> <td> <h3>Welcome, Elijah Baily</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> <!-- A Real Hero (and a real human being) --> <style type="text/css">a { color: #2BA6CB;}.btn { text-decoration:none; color: #FFF; background-color: #666; padding:10px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display: inline-block;}p.callout { padding:15px; background-color:#ECF8FF; margin-bottom: 15px;}.callout a { font-weight:bold; color: #2BA6CB;}table.social {/* padding:15px; */ background-color: #ebebeb; }.social .soc-btn { padding: 3px 7px; font-size:12px; margin-bottom:10px; text-decoration:none; color: #FFF;font-weight:bold; display:block; text-align:center;}a.fb { background-color: #3B5998!important; }a.tw { background-color: #1daced!important; }a.gp { background-color: #DB4A39!important; }a.ms { background-color: #000!important; }.sidebar .soc-btn { display:block; width:100%;} </style> <p><img src="http://placehold.it/600x300" /></p> <!-- /hero --><!-- Callout Panel --> <p class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="javascript:;" target="_self">Do it Now! »</a></p> <!-- /Callout Panel --> <h3>Title Ipsum <small>This is a note.</small></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a class="btn">Click Me!</a><br /> <br /> <!-- social & contact --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table class="social" width="100%"> <tbody> <tr> <td><!— column 1 --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table align="left" class="column"> <tbody> <tr> <td> <h5>Connect with Us:</h5> <p><a class="soc-btn fb" href="javascript:;" target="_self">Facebook</a> <a class="soc-btn tw" href="javascript:;" target="_self">Twitter</a> <a class="soc-btn gp" href="javascript:;" target="_self">Google+</a></p> </td> </tr> </tbody> </table> <!-- /column 1 --><!— column 2 --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table align="left" class="column"> <tbody> <tr> <td> <h5>Contact Info:</h5> <p>Phone: <strong>408.341.0600</strong><br /> Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p> </td> </tr> </tbody> </table> <!-- /column 2 --></td> </tr> </tbody> </table> <!-- /social & contact --></td> </tr> </tbody> </table> </div> </td> <td></td> </tr> </tbody></table><!-- /BODY --><!-- FOOTER --><style type="text/css">table.footer-wrap { width: 100%; clear:both!important;}.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}.footer-wrap .container td.content p { font-size:10px; font-weight: bold; }</style><table class="footer-wrap"> <tbody> <tr> <td></td> <td class="container"><!-- content --> <div class="content"> <table> <tbody> <tr> <td align="center"> <p><a href="javascript:;" target="_self">Terms</a> | <a href="javascript:;" target="_self">Privacy</a> | <a href="javascript:;" target="_self"><unsubscribe>Unsubscribe</unsubscribe></a></p> </td> </tr> </tbody> </table> </div> <!-- /content --></td> <td></td> </tr> </tbody></table><!-- /FOOTER --><style type="text/css">table.body-wrap { width: 100%;}</style></body></html> -
Нужен каркас страницы. 4 блока разместить в %соотношении на странице. С меня "спасибо" на телефон или Яденьги, размер спасибо определите сами.
