AlexWeb
-
Posts
24 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by AlexWeb
-
-
Папку то покажете?
-
Путь к картинке задается относительно html файла. Скрины папки с проектом в студию.
-
Обманщик!
-
Может картинка лежит в папочке image?)
-
формат?
-
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
http://pixs.ru/showimage/sdfhjpg_6291544_28615315.jpg http://pixs.ru/showimage/hsgkgflghj_3085492_28615331.jpg Без отступов так себе... Но опять же можно обыграть от соседних элементов. Этот код, если что <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style> .container { background-color: red; } img { float: left; margin-top: -1em; margin-left: -1em; margin-right: 1em; } p { margin: 1em; margin-bottom: 0; float: left; background-color: green; } </style> </head> <body> <div class="container"> <p> <img src="http://placekitten.com/200/200?image=6"> текст </p> <div style="content: '';clear: both; height: 0;"></div> </div> </body> </html> margin-bottom: 0; можно убрать у p и появится рамка снизу, если что -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
Прям вот так, как вы хотите - наверно, не получится. Если нужно достичь обтекания картинки, то это в любом случае float. А если его использовать то придется ставить распорку, что бы убрать обтекание для других элементов и нормального отступа снизу для p. А чем мешает рамка снизу? Если посмотреть на общую картину, то можно еще как-нибудь обыграть, не трогая эту рамку. Там все равно будет торчать либо блок либо рамка текста. Отрицательный margin на картинке заставит текст заползать под картинку. Так что вариантов всего 3: Отказаться от обтекания. Обыграть рамку относительно других элементов. Не поддерживать ie7 ))) (Зачем вообще нужна его поддержка?) http://pixs.ru/showimage/fdhsdhjpg_5771743_28615232.jpg Это с маленьким текстом тоже самое. Никак от этого не избавиться. Причину описал выше. Либо будет зеленый padding от p, либо вот этот красный блок из-за margin p. Отрицательный отступ у картинки заставит текст заезжать под него. -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
http://pixs.ru/showimage/fg235iyjpg_1471688_28614787.jpg Так? -
Для этого можно использовать относительные единицы измерения em rem. Откажитесь от вашей затеи пока не поздно))
-
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
Если у распорки высота не 0, то возможно это и был ваш загадочный отступ. Но это же легко инспектится... -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
У меня начинает подгорать)) Разукрашка: красный - это div зеленый - это p делаем то, что я вам скинул в 2х вариантах (много текста, мало текста) http://pixs.ru/showimage/dagf1taskj_1490523_28604972.jpg http://pixs.ru/showimage/2taskjpg_2536133_28604978.jpg делаем волшебство http://pixs.ru/showimage/task3jpg_5104466_28604986.jpg http://pixs.ru/showimage/task4jpg_2167806_28604990.jpg Какой вариант нам нужен? Если нам нужен 2й вариант, то вот код <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style> div { overflow-y: hidden; height: auto; border: none; background-color: red; } img { float: left; margin-right: 10px; } p { /*margin: 1em;*/ float: left; background-color: green; } </style> </head> <body> <div> <p> <img src="http://placekitten.com/200/200?image=6"> Текст </p> <div style="clear: both; content: ''; height: 0;"></div> </div> </body> </html> Как можно понять, ваш margin тупо закоменчен, потому что он работает во все стороны. Распорка в подарок) -
ну у вас 4+4+4+4=12 Адаптива пока еще нет, как я понимаю? Попробуйте разбить на 2 row. Все отображается правильно, просто lg не хватает в данном случае. Но 2 row решат вопрос без лишних классов для сетки. И применять свои стили к блокам col не лучшая идея
-
<div id="SECTION_2"> <div id="DIV_3"> <button id="BUTTON_1"> Расширенный поиск </button> </div> <div id="DIV_4"> <button id="BUTTON_2"> Пакетное предложение </button> </div> </div> body { background-color: blue; } #BUTTON_1, #BUTTON_2 { padding:1%; font-size: calc( (100vw - 240px)/(1100 - 240) * (20 - 8) + 8px); background-color: blue; color: rgb(255, 255, 255); cursor: pointer; width:50%; min-height:50px; margin: 0 3% 0; } #DIV_3, #DIV_4 { float:left; width: 50%; } #DIV_3 { text-align: right; } #DIV_4 { text-align: left; } Примерно так)))
-
Проблема в свойствах width и calc, а точнее в том, как вы их применяете. Не надо так, пожалуйста font-size: calc( (100vw - 240px)/(1100 - 240) * (20 - 8) + 8px); В итоге ваша математика сюда не влезла width:30% ; Воспользуйтесь медиа запросами. В них вы сможете отрегулировать размер шрифта, а также ширину, отступы, рамки блоков и их положение относительно друг друга. Также рекомендую посмотреть как верстают резиновые макеты на Ютубе. У вас получилась слишком резиновая резина, которую тяжело контролировать. Смысл заключается в том, что бы текст был читаемым на любом разрешении, а не соответствовал ширине экрана. P.S. А вообще такие скачки блоков происходят из-за того, что они со свойством display: inline-block. Начинают подстраиваться друг под друга. Если вы все же хотите довести этот пример до ума...
-
Могу предположить, что "Детское кресло" занимает все пространство row, то есть col-*-12. А вообще, да
-
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style> div { overflow-y: hidden; height: auto; border: none;} img { float: left; margin-right: 10px;} p { margin: 1em; float: left;} </style> </head> <body> <div> <p><img src="http://placekitten.com/200/200?image=6"> Текст любого размера </p> </div> </body> </html> Блок выделен. Режим - 7 ie. -
Вам нужно искать ближайшего общего родителя - container. Расставлять атрибут ID блокам с контентом - не рекомендую. Воспользуйтесь тем же data-*, к примеру - data-tabContent Соответственно, вам не придется помнить сколько у вас до этого было блоков с вкладками и сколько вкладок в каждом из блоков. В каждом новом блоке можно начинать нумерацию вкладок с 1, т.к. с соседними блоками взаимодействовать больше не сможет. Меняйте ID <div data-tabContent="tab-1" class="tab-content"> Новый js $(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); var parent = $(this).closest('.container'); parent.find('ul.tabs li').removeClass('current'); parent.find('.tab-content').removeClass('current'); $(this).addClass('current'); parent.find('[data-tabContent='+tab_id+']').addClass('current'); }); });
-
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
Вставьте img в p -
IE7 margin-bottom от абзаца добавляется к img { float: left; }
AlexWeb replied to 7ion's question in HTML Coding
Тут все просто. У вас просто тег p вылезает. Ему тоже нужно задать float:left; -
Схлопнуть padding и убрать border-radius у подряд идущих inline
AlexWeb replied to 7ion's question in HTML Coding
Если скриптом разбить все слова на span, то тогда можно определить "непосредственных соседей". Если убрать отступы и радиус скругления, то никаких проблем. -
Есть готовые решения в виде плагинов. Можно пойти другим путем, к примеру: https://www.howtomake.com.ua/front/stilizaciya-vsex-elementov-form-s-pomoshhyu-css-i-jquery.html
-
Select может отображаться в разных браузерах по разному. Я бы не рисковал кастомизировать его. Можно сделать все выпадающими менюшкам. Но придется поколдовать на js.
-
Как сделать псевдо 3д эффект? Изображения объекта в разных ракурсах.
AlexWeb replied to FRANZEE's question in HTML Coding
Может я не правильно понял, но все же... <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div class="cart"></div> <link rel="stylesheet" href="style.css"> <script src="jquery-3.2.1.min.js"></script> <script src="script.js"></script> </body> </html> body { margin: 0; height: 1000vh; background-color: #555; } .cart { position: fixed; top: 50vh; left: 50%; margin-top: -200px; margin-left: -200px; height: 400px; width: 400px; background-size: cover; background-position: 50%; } $(window).scroll(function(event) { var h = $(this).scrollTop(); var png = h % 8; $('.cart').css( 'background-image', 'url("img/card'+png+'.jpg")'); }); jQuery не забудьте. В папку с проектом добавляете директорию img. Называете картинки cardX.jpg (или меняйте путь в скрипте, как вам нужно). X - Номер картинки. (От нуля - это важно ) Количество картинок - 8. Ставьте сколько нужно. Если я правильно понял концепцию, то вам нужно формировать спрайт. В js по тому же принципу расчитывать позицию.