Jump to content

Search the Community

Showing results for tags 'grid'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Web site

Telegram

Signal

Viber

Skype

From

Interests

Found 12 results

  1. d0ublezer0
    zebra-tara.ru на главной странице есть блок с популярными товарами чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер? мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван.. Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался
  2. sasha_anto
    Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом. <body> <header>Бабуленькины котятки</header> <div class="global"> <div class="menu"> <a class="submenu" href="#" id="abis">Абиссинская</a> <a class="submenu" href="#" rel="brit"">Британская</a> <a class="submenu" href="#" rel="rus">Русская голубая</a> <a class="submenu" href="#" rel="siam">Сиамская</a> </div> <div class="cats"> <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat"> </div> <div class="rating"></div> </div> <footer>Подвал</footer> <style> a { color: #000 !important; text-decoration: none; } body { background-color: gainsboro; display: flex; flex-direction: column; } header { text-align: center; font-size: 40px; font-style: bold; } img { width: 250px; height: 200px; } .global { display: -webkit-flex; display: flex; justify-content: space-around; } footer { color: wheat; background: black; } div.menu { display: flex; width: 250px; flex-wrap: wrap; background: gray; align-content: flex-start; } .submenu { display:flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 25px; border-bottom: white 1px solid; } .cats { display: flex; flex-wrap: wrap; width: 800px; height: 900px; justify-content: space-around; } .cats img:nth-child(2){ width: 500px; } .cats img:nth-child(6) { width: 500px; } .cats img:nth-child(8) { width: 750px; } .rating { width: 250px; background: olive; } </style> Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность. Так как у меня фото и породы в разных блоках, я не понимаю как это сделать. Был вариант не добавлять категории в отдельный блок, но тогда как разметить страницу? Прошу помощи, или хотя бы небольшой подсказки
  3. Goreska
    https://artrises.github.io/index.html Всем добрый день, это моя первая работа, прошу конструктивно описать какие проблемы есть, какие ошибки допустил (хочу не вырабатывать говнокод), а постепенно реализовывать себя как толкового фронтендера. Поэтому будет важно все - мои косяки, ваши предложения, огрехи которые вы увидели в работе. И прошу помочь с одной проблемой - логотип в шапке - под ним как будто маленький маргин\паддинг, но я обнулил его, через инспектор тоже не нашел в чем проблема, какая то брешь между логотипом и контейнером оберткой. Заранее спасибо.
  4. Nailya

    css grid

    Nailya posted a question in HTML Coding

    Добрый день) Хочу узнать мнение опытных верстальщиков. Активно ли вы используете grid: display: grid, grid-template-columns: 30px 200px auto 100px и т.д.? Или рано еще?
  5. Rusik177
    Приветствую друзья не могу понять почему не работает адаптивка. Осваиваю адаптивную верстку на основе Grid . По задумке у меня несколько колонок которые при сжатии экрана менее чем 500 пикс., должны стать в две колонки. Не могу понять в чем подвох. Вроде бы пример элементарный. Может какая синтаксическая ошибка. Буду оч признателен если подскажете.
  6. alex_web64
    Здравствуйте. Есть такой пример на флексах https://jsfiddle.net/dtns7L2v/ При уменьшении размера окна когда контент не помещается в одну строку он переносится на вторую. Но между элементами не плохо было бы добавить отступ. К примеру, с помощью внутренних полей и отрицательного отступа в родителя, как это сделано в бутстрапе. Гриды нам предлагают отличное свойство grid-gap, которое может сделать подобное одной строкой кода. Проблема в том, что я не могу добиться подобного поведения элементов, из-за отсутствия опыта работы с этой новой технологией. Мои попытки: - элементы имеют ширину по контенту, но не переносятся https://jsfiddle.net/dtns7L2v/1/. - элементы переносятся, но ширину я выставил фиксированную, что не подходит https://jsfiddle.net/dtns7L2v/2/
  7. Luca
    Здравствуйте. .wrapper{ display: grid; grid-template-columns: 1fr; grid-template-rows: 62px 1fr; grid-gap: 0px; } .logo{ grid-column: 1 / 2; grid-row: 1 / 2; } .menu{ grid-column: 2 / 3; grid-row: 1 / 2; } <div class="wrapper"> <div class="logo">LOGO</div> <div class="menu">MENU</div> <div class="main">MAIN</div> </div> хочу сверстать как на GoogleFonts (в учебных целях). использую гриды, как Вы уже догадалсиь. Как выравнивать текст и прочие элементы внутри .menu и . logo. Хотелось бы, чтобы было как на указанном сайте. Можно, конечно, обернуть .logo и .menu во флекс, но хочется как можно меньше обёрток. Можно вообще содержимое (текст) выравнивать в грид-слое? Честно сказать материала много и я заблудился ))
  8. band1k
    Добрый день. Сайт на вордпрес, не понимаю что блокирует картинки плагина "Essential grid". Подскажите с решением, кто сталкивался. Сайт - http://airybeats.com/ Сразу после "Contact form".
  9. d0ublezer0
    Привет! Есть вот такая страница с фотками: http://apriori.leveler.ru/apriori/fotogalereya.html Хотелось отойти от скучной сетки и для равномерного заполнения листа объектами я использовал FreeWall Он изменяет размеры и расположение элементов для равномерного заполнения листа. Адаптивный. Но он, гад, безбожно тормозит. Хотя на демосайте у них всё хорошо. Вопрос - он ли тормозит? И как можно ускорить первоначальную прорисовку? Может, есть более интересные альтернативы? PhotoWall я пробовал - почему-то не подружились. Надо передавать массив картинок в JSON, мне это не оч удобно. да и ошибки в нем, не смог исправить
  10. Spark89

    Сетка

    Spark89 posted a question in HTML Coding

    Здравствуйте, в процессе обучения верстке сделал свою сетку. Но есть одна проблема. Допустим есть макет с сеткой http://bloggingtips.moneyreigninc.netdna-cdn.com/wp-content/uploads/2008/05/website-index.jpg. в header есть логотип и меню, есть 24х колоночная сетка. Между логотипом и меню есть 8 колонок. Вопрос: как сверстать этот пробел? Влепить туда пустой блок 1/8 или сделать margin ?
  11. Маленьке Звірятко
    Делаю верстку с резиновыми колонками и фиксированными отступами между ними. .col {margin-left: 10px;margin-right: 10px;}Через float колонки находятся в одном ряду. Если задать margin, при ресайзе окна колонки не обтекаются и переносятся. Подумал для этого использовать бордеры, вот так: border-left: solid 10px transparent;border-right: solid 10px transparent;Можно так?
  12. 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/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.
×
×
  • 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