andrew312

2 минуты назад, Odinokiy_volk сказал:

 если для строчного элемента указать float, его значение display изменится на block 

https://webref.ru/layout/learn-html-css/positioning-content

 

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

1 минуту назад, Odinokiy_volk сказал:

Как все сложно)) ладно, благодарю за критику)

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

5 минут назад, Odinokiy_volk сказал:

хз мне казалось это не имеет значения.. значит надо просто применить флот к ссылке в которую обернут img

Да.

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

Правда теперь у тебя все верстка поехала из-за того что я правильно сделал))

5 минут назад, Odinokiy_volk сказал:

header img {
    border-radius: 50%;
    margin: 5px;
    float: left;
}

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

8 минут назад, Odinokiy_volk сказал:

В моем случае clearfix применяется к header

 

<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 флоатится? Ты не путаешь вложенный элемент и дочерний?

2 часа назад, Odinokiy_volk сказал:

Там советуется все элементы где применяется float, а также элементы которые их обтекают брать в группу очистки содержимого float (в моем примере .clear) НА ВСЯКИЙ СЛУЧАЙ

 

Смотри как в бутсрапе 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;

}

Ограничение высоты блока приведет к тому, что блок не растянется при добавлении текста. и текст уедет за пределы фона.

В 21.11.2017 в 14:26, klierik сказал:

Если вам постоянно требуется править стили Bootstrap — вы не умеете пользоваться данным инструментом.

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

Здравствуйте!

Вопрос не то чтобы связан с версткой, просто не знаю куда лучше написать. В общем иногда при отображении страницы в браузере 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 не работает в лисе

А разве есть такая команда - 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 не работает в лисе

А разве есть такая команда - 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}

Мне нравится дизайн, довольно симпатичный. Ну можно конечно сделать ещё лучше.

При разрешении 1024х768 правая часть меню(header) не доступна.

Если кликать по стрелочкам - перелистывания не происходит.

Давай я помогу с английским

Спасибо)

И вот самое главное - не бояться браться. Даю ссылки на выполненые работы.

Молодец) Хорошо что получается.

Я тут почитал историю одного верстальщика - http://htmlforum.ru/index.php?showtopic=47497&page=1 и у меня сомнения относительно профессии ещё больше усилились. Человек за год заработал 2000$, не смог взять ни одного задания по обычной верстке, хотя у него было портфолио. Как я понял, очень желательно сайт доводить от макета до полностью рабочего состояния. Например можно сотрудничать с дизайнером, который будет рисовать, а ты будешь делать сайт.

Еще было бы неплохо объединить СЕО и вёрстку

Моя сестра занимается продвижением сайтов в интернете, у нее ООО. Она мне сказала, что во фрилансе очень сложно будет искать заказчиков на продвижение. Люди с деньгами идут в фирму, заключают договор. Нужно несколько месяцев продвигать чтобы сайт начал подниматься в поиске. Так что тут я ничего не могу посоветовать.

В общем если любишь это дело и тебя устраивает небольшой доход(пусть первое время), то занимайся и развивайся в этом)

смотря где фрилансить собираетесь.

Я смотрел на сайте freelance.ru заказы,  там на каждый заказ по 10 человек желающих минимум)

С англоговорящими заказчиками общаться я не смогу(

попробуйте еще и php подучить, потому что мало заказов именно по вёрстке, так как многие думают, что это в куче с php, js и т.д

Спасибо за совет, учту)

у всех разные понятия о ней)

да, некоторые это понятие объединяют с программированием до полностью рабочего состояния сайта.

студия, да

Я почитал про создание сайта и понял, что в идеале сайт должны делать несколько профессилналов: менеджер по согласованию с клиентом задачи, дизайнер, верстальщик, программист, сео-специалист, ещё возможен специалист по набору информации на сайт. Это уж 6 человек разных профессий. Одному человеку совмещать все функции сложно, если невозможно. А в студии например человек может занять свою нишу. 

Всем добрый день. Сейчас изучаю HTML & CSS, что делать и изучать дальше? Просмотрев курсы по HTML не пойму для чего нужна вёрстка и как вообще применять HTML & CSS для сайтостроения.

А вы с какой целью изучаете?

Тоже изучаю html, css и задумываюсь о перспетивах применения знаний. Мне кажется, что если заниматься профессионально версткой и иметь с нее основной доход, то нужно идти работать в веб-студию. У меня большие сомнения, что фрилансом, да ещё с маленьким опытом можно нормально зарабатывать, т.к. конкуренция огромная. Я прав?