AlexZaw

Ах, да, пардон, писал в три часа ночи, маленько зарапортовался

Ну не совсем, если есть бутстрап, то, скорее всего, есть и jQuery, может быть это имелось в виду? Спросили самый оптимальный вариант, я и ответил а так да, вы правы, проще slick использовать

Если из JS на сайте будет только слайдер и не используется бутстрап, то самый оптимальный вариант это написать слайдер на чистом JS, что бы не перегружать сайт лишними библиотеками. Если же вы все равно к сайту подключаете jQuery, то на чем писать уже без разницы. Можно конечно и на чистом css слайдер написать, но он его нельзя зациклить

Смотрите, блок с регистрацией встречается в коде хтмл перед блоком меню, и флоатится вправо. затем блок меню тоже флоатится вправо, но там уже стоит блок регистрации и он не может занять его место. Есть вариант сделать дополнительную обертку для блоков меню и регистрации, и уже ей назначать display:inline block; (для того чтобы он стал по ширине контента) и float:right; (у блоков меню и регистрации, ну или в нашем случае у блоков .box, разумеется убрать флоаты) тогда блоки в коде хтмл можно располагать в обычном порядке

Делаете еще один блок и просто задаете ему нужный float. как то так: <div class="header"> <div class="box logo">logo</div> <div class="box reg">reg</div> <div class="box menu">menu</div> </div> .header{ background: #00f; font-size: 0; } .header:after{ content: ''; display:table; clear: both; } .box{ display: inline-block; height: 50px; width: 100px; float: right; font-size: 16px; } .logo { background: #0f0; float: left; } .menu{background: #f00;} .reg{background: #ff0;} обратите внимание на расположение блоков в хтмл и то как они отображаются на экране

Дело в том что при нажатии на кнопку у вас устанавливается display:block, а блочный элемент, как известно, занимает всю ширину строки.Замените скрипт на следующее: <script type="text/javascript">function disp(myid){document.getElementById('r1').style.display="none";document.getElementById('r2').style.display="none";document.getElementById('r3').style.display="none";document.getElementById(myid).removeAttribute("style")};</script> хотя конечно можно сделать его еще элегантнее

Если вы просто читали и при этом не практиковались то немудрено что в голове все перемешалось. Начинайте с малого пройдите практикум на том же htmlbook.ru и бесплатные курсы на htmlacademy.ru Что касается статей то вряд-ли что то подобное существует, тут все зависит от конкретной задачи, например нужно или нет поддерживать старые браузеры. Со временем придет опыт когда и что лучше использовать. На практике же абсолютное позиционирование чаще всего, как мне кажется, применяется к псевдоэлементам before и after, ну и к выпадающим меню. Можете показать пример того где это применяется? Возможно тогда и найдется объяснение. Потому что просто так абсолютно позиционировать шапку не имеет смысла. В данном же макете я, может быть, использовал бы позиционирование только в заголовке "Our Mission" для звездочек (если бы вставлял их картинками или спрайтами). И то не факт, возможно бы обошелся просто иконочным шрифтом.

Если только использовать предыдущий вариант и сделать картинку отдельной ссылкой. Другого выхода я не вижу. А чем не устраивает вариант с позиционированием?

Просто задайте тексту бекграунд. Можно картинку поставить на фон, если вам нужен фигурная обрезка почитайте тут: http://htmlbook.ru/blog/maskirovanie-v-css

поправил, результат по той-же ссылке

просто побаловался: https://codepen.io/AlexZaw/pen/mqdExo

https://codepen.io/AlexZaw/pen/bYKowR

Размеры контейнера задает дизайнер, с ним и нужно советоваться, но мне кажется вы что-то не правильно замерили, либо не так поняли. Можно на сам psd глянуть?

оно?

Эмм, вот есть у меня в макете табы, сделаны они допустим с наклоном и красным бордером. а в бутстрапе они прямоугольные и с серым бордером, и как бы вы не владели данным инструментом, но стили придется править. Или вы что то другое имели ввиду? Что значит писать код аналогичный моему? Организацию кода, например по БЭМ, никто не отменял Или я опять чего то не так понял? Нет, такого опыта у меня, к сожалению, нет. Я маленько не так выразился, единый стиль написания это конечно-же просто отлично, но опять-же, на мой взгляд, бутстрап не имеет к этому отношения. Вот золотые слова.

Собственно сабж. Для чего? Я понимаю склепать админку для сайта где не надо никаких наворотов, все как в армии параллельно и перпендикулярно. Подключать полную сборку и потом не использовать бОльшую часть кода как-то не слишком умно. Делать кастомную сборку для того чтобы уменьшить размер и потом все-равно переопределять стили для элементов, бороться с дефолтными значениями отступов, спрашивать советов на различных форумах... А если еще такой человек плохо знает нативный css? Вот как на одном форуме человек пишет что дали ему макет шириной 1920px, а он всегда работал с размером 1287px и теперь даже не знает как быть и куда прописывать эти самые 1920px... Да со всеми этими настройками и борьбой со стилями бутстрапа я вручную напишу css код быстрее, красивее и компактнее и в html у меня не будет километров классов для того чтобы поставить элементы по сетке. Вот только не надо говорить что при смене разработчика поддерживать и дописывать код написанный с помощью бутсрапа гораздо проще. Если человек пишет говнокод ему никакой фреймворк не поможет, а если код нормальный то и не надо никакой шаблонизации чтоб его понять. Вы скажете что при работе в команде над серьезным проектом типизация и шаблонизация это хорошо? Покажите мне хотя бы один серьезный проект написанный с помощью бутстрапа. Тогда, если это действительно серьезный проект, а не какой-нибудь интернет магазин с оборотом 3 рубля в месяц, я изменю свое мнение относительно него, да и другие люди которые прочтут эту тему будут знать что бутстрап это хорошо. В общем вот такой вот получился крик души...

Имеется ввиду что семейство шрифта называется по другому и поэтому его нельзя подключить с остальными форматами шрифта Возможно разработчики просто не захотели заморачиваться с поддержкой старых Apple )

В каком смысле закрывает только часть сайта? И что куда едет? Вроде все по центру стоит

В макете для кнопок не были указаны никакие эффекты, но вы правы, можно было и самому добавить. С контактами в футере тоже что то не догадался. Хм, и правда присутствует outline, даже не обратил внимание magnific popup. Вот только так и не смог его настроить что-бы первое открытие картинки происходило плавно а не рывком, видать нужно лезть в сам код, но моих знаний для этого пока недостаточно

45 просмотров и единственный комментарий что не раскрывается меню, неужели все настолько плохо? макет по ссылке: https://yadi.sk/d/MIxoEjgC3Prkvr

ie6-ie8. т.е., в принципе, нужен только в исключительных случаях

Потому что "SF Pro Display 500" это другой шрифт и в нем 500 уже указывает на жирность шрифта.

Это конечно просто оптический обман, но поправить можно вот так: .box:hover { border: 2px solid rgba(234,234,234,.2); }

Это же вроде у .box указан бордер, просто он заметнее становится когда появляется тень. Или вы про что то другое?

можно вот так извратится: <div class="wrap"> <div class="inner"><img src="https://digitalart.io/storage/artworks/209/Corvo-Attano-Dishonoured-Wallpaper.jpeg" alt=""></div> </div> body{background: #000;} .wrap{color:#fff;position: relative; } .inner{position: absolute; top: 0;left: 0;right: 0;bottom: 0;z-index: -1; } .inner img{max-width: 100%; -webkit-mask-image: -webkit-gradient(linear,left top, left bottom, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0))); } песочница в ie естественно не работает