andrew312

Тогда получается к img нельзя применять было float. Т.к. ты вложил блочный элемент в строчный, а так не рекомендуется делать. Хз не помню почему.

Пожалуйста. Правда не уверен что clearfix можно применять к ссылке(строчным элементам). Я применяю только к блочным.

Да. Вот я developers tools смотрю размер ссылки header>a и он показывает 0х0. Теперь я добавил ссылке класс .clear и он мне показывает размер a.clear 900х160. Вот зачем нужно .clear добавлять. Чтобы родитель не страдал за флоаты ребенка. Правда теперь у тебя все верстка поехала из-за того что я правильно сделал))

Вот я тебе и говорю, не путай вложенный селектор (header img) и дочерний(header>img). claerfix применяется только к элементу у которого дочерний флоатится.

<header class="clear container"> <a href="index.html"><img height="150" src="assets/images/logo.jpg" alt="Логотип (мое фото)"></a> <a href="index.html"><h1>В облаке медиа</h1></a><br> <nav class="nav primary-nav"> <a href="index.html">Главная</a> <a href="photo.html">Фото</a> <a href="video.html">Видео</a><br> <div class="line-bottom-nav"> <a href="calendar_pfc_cska.html">Календарь ПФК ЦСКА</a> <a href="it_instructions.html">IT-инструкции</a> <a href="website_development.html">Создание сайта</a> </div> </nav> </header> Какой у тебя дочерний элемет header флоатится? Ты не путаешь вложенный элемент и дочерний?

Смотри как в бутсрапе 3 применяется способ clear:both, для блоков у которых дочерним может оказаться элемент с .col. <div class="conatiner"> <div class="row"> <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> </div> <div class="col1"></div> <div class="col2"></div> </div> .col* -floatятся. А container и row ихние родители. Поэтому к ним применяются выше приведенные свойства. Куда попало clearfix в бутстрапе не суют, а он сделан профессионалами.

Вообще класс .container , воспринимается как контейнер из бутстрапа. .clear::before, .clear::after { content: ""; display: table;} .clear::after{ clear:both} , нужно для того чтобы дочерние элементы(у элемента с классом .clear), которые float`ятся, не портили верстку. В противном случае оно не нужно. Мне кажется лучше смотреть как делают профи, простую верстку, чем самому изобретать велосипед. Ну и месяцы(годы) изучания html, css нужны. Опыт реально сверстанных страниц и пройденные грабли.

Да, можно конечно. Не всем же полезут в верстку ковыряться. Внешне главное чтобы все соответствовало макету.

body > div > div.header > div.header_wrap > div > div.header_right > span.tel Зачем использовать span.tel и давать ему display:block? Не проще ли было взять div? — При ширине 1024 , @media screen and (max-width: 1080px) style.css:838 .header_wrap { height: 600px; } Ограничение высоты блока приведет к тому, что блок не растянется при добавлении текста. и текст уедет за пределы фона.

Покажите мастер класс как нужно пользоваться

Здравствуйте! Вопрос не то чтобы связан с версткой, просто не знаю куда лучше написать. В общем иногда при отображении страницы в браузере chrome 49, не отображаются либо некоторые символы шрифта Myriad Pro, либо полностью во всем блоке. Проблема плавающая и появляется непонятно по какой причине. Специально сгенерировать её не получается. Обновление страницы с отключением кэша не помогает, страница остается с теми же косяками. Когда смотрю в инспекторе, то вижу, что текст на самом деле в блоке присутствует. Для примера: у меня стоит font-size: 14px и ничего не отображается. Я ставлю в инспекторе font-size:17px, тогда текст появляется, в размер соответствующей 17px. При переходе со страницы на страницу, в текущей вкладке браузера, проблема с отображением шрифта остается. А вот если эту страницу загрузить уже в новой вкладке, то проблема пропадает, т.е. страница отображается нормально.

<section id="bussines"> </section> #bussines { min-width: 1170px; } Чтобы при уменьшении окна браузера фон и размер section не уменьшался, нужно добавить свойство.

<a class="header--logo" href="index.html"><img src="images/logo.png" alt="Logo"></a> .header--logo { float: left; height: 48px; width: 50px; padding-top: 22px; padding-bottom: 23px; } А как же тот факт, что свойства height, width применяются только к блочным элементам, элементам inline-block и рисункам? А у вас применяется к ссылке. Хотя почему-то работает Логотип влияет на высоту header. Если поставить логотип чуть больше/меньше высота header изменится. Мне кажется удачней было бы сделать position:absolute для блока с логотипом.

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2} http://css-tricks.com/examples/GradientBorder/ на stackowerflow тоже жалуются что лиса не может так. Примеры, которые даны по ссылке у меня не работают в firefox 26, а в хроме работают. Это видимо какие-то недокументированные команды. Я думаю лучше использовать только то, что есть в спецификации http://www.w3.org/

А разве есть такая команда - border-image: linear-gradient(to bottom, #6ca8c1, #7cc1d9, rgba(0, 0, 0, 0)) 1 100%;?Синтаксис же вроде : border-image: none | [ <URL> [<число> | <проценты>]{1,4} [/ <толщина>{1,4}]? ] && [stretch | repeat | round]{0,2}