Search the Community

Внутри блока с фиксированной шириной и высотой должны располагаться четыре блока в один ряд. Между ними не должно быть пустое пространство. (margin:0; padding:0; не помогло). Почему блок с классом 'col-4-2' позиционируется относительно нижней границы текста блока с классом 'col-4-1'? Что я делаю неправильно. Вот ссылка на файл: https://jsfiddle.net/ttoliboff/81oL39y3/

Добрый день, такая проблема: устроился на стажировку в веб студию, сразу дали решить/устранить проблему в их уже существующем проекте. - сайт: http://en.uff.fr - суть проблемы: на главной странице внизу, в диве с классом container, расположены на черном фоне логотипы продуктов(svg картинки). Реализовано всё через display:flex. Во всех браузерах отображение правильное кроме safari. Там поведение картинок такое что у них разные размеры и они как-бы *в куче*. Я гуглил эту проблему на англоязычных источниках и единственным советом был просто префикс -webkit-, но это уже учтено и всё равно правильного отображения мы не добились. Есть какой-то способ решить эту проблему? Заранее спасибо.

Здравствуйте! Будьте добры, подскажите пожалуйста как сделать такую вещь... Есть два радио переключателя. Если выбрать один то определённый div у которого был display none становится display block, если нажать на другой то первый блок должен снова становиться display none а новый уже display block. Мне нужен самый примитивный вариант реализации такой вещи. Я искала но находила примеры с jQuery но грузить всю библиотеку для такой простой вещи как то не хочется - это не правильно. Спасибо!

Доброго времени суток! Обращаюсь к знатокам своего дела! Ребят, подскажите малоопытному )) Не работает скрипт ни в одном браузере кроме Mozilla Firefox.. Вроде все просто, суть - показывать/скрывать поля при выборе значения select в форме Подскажите в чем дело, что не так и как это исправить? Вот тело: <form name="" id="" method="post" action="" onsubmit=""> <div style="padding-bottom:10px; "> <select > <option id="" class="3" value="">Вы новый пользователь?</option> <option id="" class="1" value="">Я новый пользователь</option> <option id="" class="2" value="">У меня уже есть кабинет</option> </select> </div> <div id="my1" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 1"></input></div> <div id="my2" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 2"></input></div> <div id="my3" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 3"></input></div> <div id="my4" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 4"></input></div> <div id="my5" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 5"></input></div> <div id="my6" style="display:none; padding-bottom:6px; margin-top:14px;"><input name="submit" id="submit" value="Принять" type="submit"></div></form>Вот скрипт: $(".1").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my1, #my2, #my3, #my4, #my5, #my6").toggle(1000);});$(".2").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my3").toggle(1000);$('input[name="other"]').attr('value','');});$(".3").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');});подключаю JQuery 1.9.1 Вот ссылка на мою форму - http://jsfiddle.net/2w18do1z/1/ или здесь, кому как удобнее - http://codepen.io/anon/pen/MaOxMb Буду благодарен за Ваши советы и помощь!!!

Доброго времени суток! Обращаюсь к знатокам своего дела! Ребят, подскажите малоопытному )) Не работает скрипт не в одном браузере кроме Mozilla FireFox.. Вроде все просто, суть показывать/скрывать поля при выборе значения select Вот тело: <form name="" id="" method="post" action="" onsubmit="return validateForm();"><div class="" style="padding-bottom:10px; "><select ><option id="" class="3" value="">Вы новый пользователь?</option><option id="" class="1" value="">Я новый пользователь</option><option id="" class="2" value="">У меня уже есть кабинет</option></select></div><div id="my1" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 1"></input></div><div id="my2" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 2"></input></div><div id="my3" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 3"></input></div><div id="my4" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 4"></input></div><div id="my5" style="padding-bottom:10px; display:none;"><input type="text" placeholder="значение 5"></input></div><div id="my6" style="display:none; padding-bottom:6px; margin-top:14px;"><input name="submit" id="submit" value="Принять" type="submit"></div></form>Вот скрипт: $(".1").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my1, #my2, #my3, #my4, #my5, #my6").toggle(1000);});$(".2").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');$("#my, #my3").toggle(1000);$('input[name="other"]').attr('value','');});$(".3").click(function(){$('#my, #my1, #my2, #my3, #my4, #my5, #my6').fadeOut('slow');});подключаю JQuery 1.9.1 Вот ссылка на мою форму - http://jsfiddle.net/2w18do1z/1/ или здесь, кому как удобнее - http://codepen.io/anon/pen/MaOxMb Буду благодарен за Ваши советы и помощь!!!

Вопрос немного странный, но вёрстка разваливается при просмотре сайта на телевизоре 2013 года) Проблема в использовании flex в галерее (например, здесь). При клике на главную картинку открывается большое изображение, но, т. к. flex не работает, всё разъезжается. Браузер определяется как Chrome 22 (естественно, модифицированный). С каких версий flex вообще нормально работает? Или дело в чём-то ещё?

Есть вот такая конструкция.. http://jsfiddle.net/4376rfy8/3/ В IE, Google Chrome и Opera вроде работает, а вот в FireFox текст в левой колонке почему то съезжает вниз, методом тыка выяснил что скорее всего виноват display: table; в родительском контейнере. Но вот обойти этот глюк пока не могу придумать как((( Может кто сталкивался с подобным!? Что нужно в итоге: 1) левая и правая колонка одинаковой высоты с плавующей шириной 2) в правой колонке 4 блока которые центруются(выравниваются) по вертикали, причем верхний блок должен прилипнуть к потолку, а нижний к полу.

http://jsfiddle.net/Launder/38femeh7/2/ <ul class="menu"> <li><a href="#">Русская кухня</a> <ul> <li><a href="#">Филе рябчика фаршированное в сухарях </a></li> <li><a href="#">Заливной пирог с картофелем и белыми грибами</a></li> <li><a href="#">Щи суточные с расстегайчиками</a></li> </ul> </li> <li><a href="#">Украинская кухня</a> <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li> </ul> </li> <li><a href="#">Немецкая кухня</a> <ul> <li><a href="#">Гусь по-берлински</a></li> <li><a href="#">Пирог яблочный с грецкими орехами</a></li> <li><a href="#">Cвиные отбивные под лимонно-соевым соусом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }Почему когда ставишь .menu a {display: block}, а, как блочный элемент, с не заданной шириной, не растягивает li, который является inline-блоком и, по-идее, его размеры должны определяться размерами внутренних элементов?

Всем доброго времени суток! Есть такой код Промежуток между тегами li насколько я понимаю из-за табов и пробелов?!. Первые 2 li идут без пробелов и табов и проблемы нет. Но как без изменения HTML кода, средствами CSS убрать эти отступы ? P/S. Интересует как избавиться от отступов именно в такой ситуации. Если что, то я имею представление про float: left и т.п.(вместо display: inline)

Всем привет. Ребят помогите с версткой, прилагаю образец, результат, код. Как надо - У меня получилось так - проблемы - 1) 1 и 2, 3 и 4, 5 и 6 блоки (блоки категорий) должны находится на одной высоте по отношению к друг другу 2) "подкатегории" должны прилипать друг к другу 3) лишний отступ код: <div class="category_list"> <div class="category"><div class="title">Дизайн-студия</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Айдентика:</a><span>разработка логотипов, фирменных стилей, бренд-буков</span></div></div> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Дизайн наружной рекламы:</a><span>выставочные стенды, вывески, вывески, баннеры, широкоформат, световые короба, комплексное оформление</span></div></div> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Дизайн полиграфии:</a><span>листовки, флаеры, визитки, плакаты, афиши, буклеты, каталоги</span></div></div> </div></div> <div class="category"><div class="title">Размещение рекламы</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc">Нет привязанных подкатегорий.</div></div> </div></div> <div class="category"><div class="title">Полиграфия</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc">Нет привязанных подкатегорий.</div></div> </div></div> <div class="category"><div class="title">Фото-видео</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Предметная фотосъемка:</a><span>художественная фотосъемка, съемка продукции для каталогов и сайтов</span></div></div> </div></div> </div>

Здравствуйте. Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы. Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"? 1. Старые добрые таблицы. Думаю, не нужно объяснять, что "таблицы для табличных данных", и вообще, поддерживать более-менее сложный макет, сверстанный таблицами — очень муторно. 2. Способ классический. Использовать float: left/right. Код: <!doctype html> <html> <head> <title>Способ классический: float</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; float:left; text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Плюсы: кроссбраузерно. Минусы: если нужно вставить элемент ниже, то нужно применять clear:both. А когда макет действительно сложный, становится слишком много усложнений - конструкция превращается в монструозную. если высота элементов не фиксированная, то в достаточно типичных макетах случаются разные неприятности (http://habrahabr.ru/post/117109/ - 3 абзац) 3. "Все правильные ребята уже давно прочитали статью в блоге Мозиллы" (с) Сергей Чикуёнок. Речь о display: inline-block, конечно же. Способ почти идеальный. Если честно, я предпочитаю именно его, но тут есть свои заморочки. Блок, отмеченный как inline-block, ведет себя как блочный, но если ему указать ширину, то спокойно встает в одну линию с другими элементами. Перепишу стили для примера выше (разметку не трогаю): <!doctype html> <html> <head> <title>Способ правильный: inline-block</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ display:inline-block; /* Это добавили */ text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Взгляните на скриншот, что у нас получилось: (Я использую Firebug для подсветки элементов на странице) Обратите внимание на зеленые стрелки: первая указывает на зазор в 4 пикселя между inline-block-элементами. Вторая указывает на последствие - из-за этих зазоров уменьшилось расстояние до правой границы контейнера. А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась. Как с этим бороться: 1. Достаточно "вытянуть" в одну строку html-код элементов 1-3 (зазор пропадет) 2. Либо прописывать font-size:0 для контейнера и font-size:%ваше значение% для блоков 1-3 3. Либо использовать для блоков 1-3 margin-right: -0.3em 4. Либо еще какой-нибудь костыль (полный список в комментариях здесь: http://chikuyonok.ru...vertical-align/) 5. Либо "подгонять" margin-ы между элементами. Итак, плюсы: довольно изящное решение, все максимально понятно Минусы: без вытягивания кода или использования костылей отображается браузерами не так, как хотелось бы. 4. Абсолютное позиционирование. Вся соль в использовании position:absolute. Перепишу все тот же несчастный пример (разметку снова не трогаем, меняется только CSS): <!doctype html> <html> <head> <title>Способ pixel-perfect: position:absolute</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; position:relative; /* Добавили */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ position:absolute; /* Добавили */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ left:15px; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ left:130px; /* Добавили */ width:59px; } #block-3{ left:205px; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> На этот раз, изменений больше. Способ работает совсем идеально. С точностью до пикселя. Плюсы: получено именно то, чего хотелось, и без костылей. Минусы: без калькулятора не обойтись - на любое изменение одного блока нужно менять и все остальные. элементы страницы ведут себя так, будто абсолютно позиционированных элементов на странице нет, и это иногда не очень классно. 5. Способ прогрессивный. Верстка по настоящей сетке с использованием display:grid. Снова поменяю пример: <!doctype html> <html> <head> <title>Способ прогрессивный: display:grid</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; display:-ms-grid; /* Добавили */ -ms-grid-columns:15px 99px 16px 59px 16px 180px; /* Добавили */ padding:40px 0; /*position:relative; Убрали */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ /*position:absolute; Убрали */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ /*left:15px; Убрали */ -ms-grid-column:2; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ /*left:130px; Убрали */ -ms-grid-column:4; /* Добавили */ width:59px; } #block-3{ /*left:205px; Убрали */ -ms-grid-column:6; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Вот он, способ моей мечты. Подробно можно почитать на Хабре (http://habrahabr.ru/...ft/blog/140715/). Если вкратце: описываем контейнер как сетку. Каждому элементу назначаем место в этой сетке. И все классно. Но есть существенные минусы: в чистом виде, без префиксов, не работает вообще ни в одном браузере (это еще не стандарт, только черновик) с префиксами работает только в IE 10 и выше Пока что этот способ - в мечтах. Можно, конечно, использовать JS-библиотеки, реализующие поддержку Grid в браузерах (например, http://ecsstender.org/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.