Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 10/30/2013 in Posts

  1. FRUTALITY
    Здравствуйте. Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы. Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"? 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/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.
    1 point
  2. Catherine
    Про БЭМ уже тут написали. Существует множество подходов к именованию. Зачем утруждаться? Ну, например, удобно при копировании. Один раз якобы перетрудился, но... Двойной клик по имени, содержащему символы подчеркивания выделяет всё имя (мелочь, а приятно), в то время, как "-" является разделителем, и для выделения полного имени надо больше действий. +1
    1 point
  3. SelenIT
    Почему, поворачивать можно столько раз, сколько нужно. Главное, чтобы суммарный угол всех поворотов был равен нулю (картинка вернулась в норм. положение).
    1 point
  4. npofopr
    Вы правильно сказали, рекомендации, а не правило, которые тоже не запрещено нарушать. В общем это еще один большой холивар.
    1 point
  5. advokatua
    А я наоборот люблю подобную лаконичность. Для покерсайта он конечно слишком лаконичен. Да и с размерами блоков надо было поработать. Подобные сайты должны завлекать и зажигать пламя в головах азартных чуваков, а не вводить в душевное спокойствие будто это новостной портал. Цвета хоть какие, но должны быть это 100%. Белый цвет с азартом и игрой вообще не ассоциируется. И да, все это выглядит как бутстрап из коробки с парой своих картинок и минимумом переработок.
    1 point
  6. wwt
    метод hide() просто добавляет display:none и класс active остается
    1 point
  7. SelenIT
    Тупыми поисковиками (к счастью, вымершими) не будет, продвинутыми, вероятно, будет, но плохо. Гугл рекомендует делать вот так.
    1 point
  8. SelenIT
    В префикснутых вариантах как раз "to" не нужен. Строчка с -ms-префиксом тоже не нужна, IE9 всё равно не поймет, релиз IE10 понимает без префикса с "to" (по стандарту), а бетами IE10 нормальные люди не пользуются. Да и -moz-строчка тоже не сильно нужна сейчас — много ли осталось Фоксов ниже 17-го, когда уже вышел 26-й? На практике сегодня достаточно двух строчек: background: -webkit-linear-gradient( bottom, #dedede, #fff); /* Safari 6-, в т.ч. мобильные */ background: linear-gradient( to top, #dedede, #fff); /* стандарт W3C, все новые браузеры */
    1 point
  9. wwt
    var str = '2,5,4,25,26,27,4,24,7,76,42,43,44,42,44,45,43,61,62,63,64'; var arr = []; $.each(str.split(','), function(i, el){ if($.inArray(el, arr) === -1){ arr.push(el); } }); console.log(arr.join());//2,5,4,25,26,27,24,7,76,42,43,44,45,61,62,63,64 или без jquery var str = '2,5,4,25,26,27,4,24,7,76,42,43,44,42,44,45,43,61,62,63,64'; var arr = str.split(','); var out = []; for(var i=0;i < arr.length;i++){ if(out.indexOf(arr[i]) === -1){ out.push(arr[i]); } } console.log(out.join());//2,5,4,25,26,27,24,7,76,42,43,44,45,61,62,63,64
    1 point
  10. npofopr
    Откуда вы вообще такое взяли? Поддержку каких либо css3 свойств можно посмотреть на http://caniuse.com/
    1 point
  11. SelenIT
    Тупо убирать — не выход. Надо 1) определиться с задачей, 2) выбрать правильный инструмент для решения задачи, 3) решить задачу. Зачем-то ведь вы эти атрибуты ставили (для какого-то JS-плагина или еще чего-то)? Значит, скорее всего они зачем-то нужны. И удалять их, чтобы пройти формальную валидацию по устаревшей схеме — всё равно, что отрезать себе ногу, чтобы иметь право сидеть на местах для инвалидов в метро Вообще, современные браузеры разбирают страницы именно по HTML5-правилам (независимо от доктайпа), так что если с HTML5-доктайпом валидатор показывает много ошибок — это в любом случае нехорошо. Нужно разбираться с причиной, а не прятаться от нее за более удобный (для валидатора, но не для работы) доктайп. Можно увидеть саму проблемную страницу?
    1 point
  12. SelenIT
    Можно выкрутиться через несколько вложенных оберток с overflow:hidden и разной трансформацией поворота (http://kizu.ru/fun/polygons/). Но если там огромная картинка — может быть напряжно для рендерера. Лучше на SVG.
    1 point
  13. lexxcode
    На начальном этапе да. Я имел ввиду, что (в поддержку слов klierik'а) нужно стремиться найти 2-5 заказчиков, которые будут постоянно обеспечивать тебя потоком проектов, которые будут нравиться тебе, в первую очередь. Либо просто работа над каким-то одним большим проектом на длительный период. Не стоит хвататься за что попало, просто потому что за это платят. Если ты видишь откровенно лажовый макет, который объективно не принесет тебе профита в знаниях, то зачем тебе такой проект? Нужно требовать. Если доработки выходят за рамки начальной договоренности, то они оплачиваются отдельно. Понятное дело, что если там прилетела одна единственная просьбочка, которая решается за пять минут и больше за собой ничего не тянет, то нечего и заводиться с доп. оплатой. А за 2-3 часа, ты могла бы, что-то прочитать, или позаниматься спортом, или банально поспать. Время не возобновляемый ресурс, к сожалению. Те 2-3 часа, это не просто часы работы, а часы твоей жизни. А жизнь одна, не стоит разбрасываться ею направо и налево. Цени, в первую очередь себя и свое время. Заказчик не оценит твои затраченные бесплатно 3 часа времени, он просто получит выгоду, а ты просто потратишь 3 часа времени.
    1 point
  14. nerv
    Array.indexOf(); функция должна возвращать булево значение
    1 point
  15. wwt
    SELECT name FROM country WHERE id = (SELECT country_id FROM regions WHERE id = 2 LIMIT 0,1) LIMIT 0,1;
    1 point
  16. Rimstar
    Спасибо за ответ) Согласен, большинство ошибок там из-за невнимательности.. Значит будет лучше просто убрать data-category-id="1" и itemid="8" .. ?
    0 points
  17. wwt
    offline browser
    -1 points
  18. advokatua
    Обычно все кто с Рашки в Украину возвращается, с отдыха или работы, только и теребенит какие у вас высокие зарплаты и пенсии. Коренные же наоборот чаще опровергают. Некому верить. Ощущение будто везде одни сказочники да фантазеры
    -1 points
  19. Rimstar
    А какой доктайп нужно прописать? Сейчас у меня такой стоит: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> хм, попробовал просто убрать data-category-id="1" и itemid="8" страницы стали валидными, на дизайн вроде не повлияло..
    -1 points
This leaderboard is set to Kiev/GMT+02:00
×
×
  • 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