Абсолютное позиционирование шапки сайта

[Arxont]

Всем привет.

Начал я делать сайты по psd макетам. До этого попробовал несколько сайтов верстать по видеокурсам. Вот теперь решил попробовать сам.

И вот задумался. Нашёл я резиновый макет. Вроде с шапкой всё понятно, да и помню, что похожее как раз по видеокурсу проходил. Понял, что для шапки вроде бы подходит следующий код:

.header {
position: absolute;
width: 100%;
}

А вроде бы это position: absolute и не нужен.

Поискал в интернете. Часто такие стили применяют, но вот объяснений почему нет. Можете объяснить зачем применяют в шапки сайта абсолютное позиционирование? Частый ли это случай или или применяется только в определённых, редких случаях?

И интересно, нужно ли оно в таком макете или достаточно просто сделать ширину в 100% и определённую высоту и можно разбираться с объектами внутри?

Edited November 23, 2017 by Arxont

[alanreid]

3 часа назад, Arxont сказал:

Можете объяснить зачем применяют в шапки сайта абсолютное позиционирование? Частый ли это случай или или применяется только в определённых, редких случаях?

Применяется в зависимости от задач. Например, на сайте PayPal абсолютное позиционированние делает возможным эффект, возникающий при наведении на один из выпадающих пунктов шапки (появление фона из верхней части экрана).

3 часа назад, Arxont сказал:

И интересно, нужно ли оно в таком макете или достаточно просто сделать ширину в 100% и определённую высоту и можно разбираться с объектами внутри?

Абсолютное позиционированние здесь не требуется.

[Hasiev]

Видеокурсы не Евгения Попова были?

А вообще, спасибо! Я посмеялся 

Edited November 24, 2017 by Hasiev

[Arxont]

6 часов назад, alanreid сказал:

Применяется в зависимости от задач. Например, на сайте PayPal абсолютное позиционированние делает возможным эффект, возникающий при наведении на один из выпадающих пунктов шапки (появление фона из верхней части экрана).

Абсолютное позиционированние здесь не требуется.

Большое спасибо за ответ. Надеюсь побыстрее научусь разбираться, где какие стили нужно применять)

[Димитрий]

С position удобно позиционировать всякое. 

Насчет пытаться верстать, - у Вас не получиться верстать, пока не будете понимать свойства css и знать для чего лучше они подходят. Я советую теорию знать, потом уже пытаться верстать. 
 

 

[Arxont]

В 24.11.2017 в 19:39, Димитрий сказал:

С position удобно позиционировать всякое. 

Насчет пытаться верстать, - у Вас не получиться верстать, пока не будете понимать свойства css и знать для чего лучше они подходят. Я советую теорию знать, потом уже пытаться верстать. 
 

 

Большое спасибо за ответ. А вот насчёт понимания свойств css. Я прочитал много информации по вёрстке, и она чуть-чуть смешалась у меня в голове. Поэтому я и хотел попрактиковаться. А нет ли случаем статьи или серии статей, где как раз говорится, в каких случаях применяется то или иное свойство? Может кто-нибудь уже собрал базу информации по данному вопросу?

Стандартно то я вроде понимаю, где какое свойство применяется. Но вот на практике начинаю грубо говоря "тупить".

[AlexZaw]

Если вы просто читали и при этом не практиковались то немудрено что в голове все перемешалось. Начинайте с малого пройдите практикум на том же htmlbook.ru и бесплатные курсы на htmlacademy.ru

Что касается статей то вряд-ли что то подобное существует, тут все зависит от конкретной задачи, например нужно или нет поддерживать старые браузеры. Со временем придет опыт когда и что лучше использовать. На практике же абсолютное позиционирование чаще всего, как мне кажется, применяется к псевдоэлементам before и after, ну и к выпадающим меню.

В 24.11.2017 в 06:36, Arxont сказал:

Можете объяснить зачем применяют в шапки сайта абсолютное позиционирование?

Можете показать пример того где это применяется? Возможно тогда и найдется объяснение. Потому что просто так абсолютно позиционировать шапку не имеет смысла. В данном же макете я, может быть, использовал бы позиционирование только в заголовке "Our Mission" для звездочек (если бы вставлял их картинками или спрайтами). И то не факт, возможно бы обошелся просто иконочным шрифтом.

[Arxont]

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

Если вы просто читали и при этом не практиковались то немудрено что в голове все перемешалось. Начинайте с малого пройдите практикум на том же htmlbook.ru и бесплатные курсы на htmlacademy.ru

Что касается статей то вряд-ли что то подобное существует, тут все зависит от конкретной задачи, например нужно или нет поддерживать старые браузеры. Со временем придет опыт когда и что лучше использовать. На практике же абсолютное позиционирование чаще всего, как мне кажется, применяется к псевдоэлементам before и after, ну и к выпадающим меню.

Можете показать пример того где это применяется? Возможно тогда и найдется объяснение. Потому что просто так абсолютно позиционировать шапку не имеет смысла. В данном же макете я, может быть, использовал бы позиционирование только в заголовке "Our Mission" для звездочек (если бы вставлял их картинками или спрайтами). И то не факт, возможно бы обошелся просто иконочным шрифтом.

Спасибо большое за ответ) Как уже говорил, всё перепуталось. Поэтому увы не смогу вспомнить, где видел это абсолютное позиционирование. Просто первое, что вспомнил, посмотрев на шапку.

А вот, раз уж пошёл вопрос про шапку. Если не сложно, ответьте ещё на вопрос по шапке сайта. 

Я когда выбирал макет для вёрстки, видел один макет с интересной шапкой. До неё мне тем более рановато, но уж очень хочется узнать, как она делается. 

Вот в чём суть: два блока в шапке, это понятно. Логотип идёт слева, а навигация справа. Как я понял это делается с помощью float, иногда тем же позиционированием и, как я понял, новым flexbox. А вот что, если на этот блок добавляется ещё кнопка регистрации или блок (регистрация и вход). Они помещаются в блок с меню или являются третим независимым блоком? Если независимым, то как, хотя бы примерно будет выглядеть код? Тем же float?

[Димитрий]

14 часа назад, Arxont сказал:

Большое спасибо за ответ. А вот насчёт понимания свойств css. Я прочитал много информации по вёрстке, и она чуть-чуть смешалась у меня в голове. Поэтому я и хотел попрактиковаться. А нет ли случаем статьи или серии статей, где как раз говорится, в каких случаях применяется то или иное свойство? Может кто-нибудь уже собрал базу информации по данному вопросу?

Стандартно то я вроде понимаю, где какое свойство применяется. Но вот на практике начинаю грубо говоря "тупить".

На практике и я туплю. Статью может кто и написал, лично я не видел. 
Советую чего не знаешь искать в спецификациях, не зря же они существуют (там кроется ответы на многие вопросы, хотя новичку разбираться там будет очень тяжело, тем не менее знать спецификацию, - я считаю нужно). 

 

Edited November 26, 2017 by Димитрий

[AlexZaw]

11 час назад, Arxont сказал:

А вот что, если на этот блок добавляется ещё кнопка регистрации или блок (регистрация и вход). Они помещаются в блок с меню или являются третим независимым блоком? Если независимым, то как, хотя бы примерно будет выглядеть код? Тем же float?

Делаете еще один блок и просто задаете ему нужный 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;}

обратите внимание на расположение блоков в хтмл и то как они отображаются на экране

[Arxont]

10 часов назад, Димитрий сказал:

На практике и я туплю. Статью может кто и написал, лично я не видел. 
Советую чего не знаешь искать в спецификациях, не зря же они существуют (там кроется ответы на многие вопросы, хотя новичку разбираться там будет очень тяжело, тем не менее знать спецификацию, - я считаю нужно). 

 

Большое спасибо за ответ)

Я пытался посмотреть спецификацию, но как мне показалось, для меня это пока сложновато (английский пока увы не на том уровне). Хотя стоит попробовать ещё раз, может со второго раза получится понять) 

8 часов назад, AlexZaw сказал:

Делаете еще один блок и просто задаете ему нужный 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;}

обратите внимание на расположение блоков в хтмл и то как они отображаются на экране

Ух, большое спасибо за информацию. Я уже сломал голову, пока пытался так же сделать.

Я так понял, float: right в классе box позволяет сделать регистрацию и меню справа. А вот float: left в классе logo уже перемещает логотип вправо. Правда я чуть-чуть запутался, почему регистрация и меню в хтмл поменялись местами. Но я так думаю, что это из-за того, что float: right не только выравнивает элемент по правому краю, но ещё и разворачивает блоки. И как я понял тут только вариант поставить регистрацию перед меню? При этом не будет проблем с валидностью или индексированием сайта?

[AlexZaw]

4 минуты назад, Arxont сказал:

. Но я так думаю, что это из-за того, что float: right не только выравнивает элемент по правому краю, но ещё и разворачивает блоки.

Смотрите, блок с регистрацией встречается в коде хтмл перед блоком меню,  и флоатится вправо. затем блок меню тоже флоатится вправо, но там уже стоит блок регистрации и он не может занять его место.

6 минут назад, Arxont сказал:

И как я понял тут только вариант поставить регистрацию перед меню?

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

[Arxont]

3 часа назад, AlexZaw сказал:

Смотрите, блок с регистрацией встречается в коде хтмл перед блоком меню,  и флоатится вправо. затем блок меню тоже флоатится вправо, но там уже стоит блок регистрации и он не может занять его место.

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

Всё понял, большое спасибо за информацию.  Долго я голову ломал насчёт этого. Нужно обязательно это всё запомнить.

[SelenIT]

15 часов назад, AlexZaw сказал:

назначать display:inline block; (для того чтобы он стал по ширине контента) и float:right;

Float сам по себе ужимается до ширины контента, inline-block в этом раскладе кажется лишним.

[AlexZaw]

4 минуты назад, SelenIT сказал:

Float сам по себе ужимается до ширины контента, inline-block в этом раскладе кажется лишним.

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

[Димитрий]

19 часов назад, Arxont сказал:

Большое спасибо за ответ)

Я пытался посмотреть спецификацию, но как мне показалось, для меня это пока сложновато (английский пока увы не на том уровне). Хотя стоит попробовать ещё раз, может со второго раза получится понять) 

Ух, большое спасибо за информацию. Я уже сломал голову, пока пытался так же сделать.

Я так понял, float: right в классе box позволяет сделать регистрацию и меню справа. А вот float: left в классе logo уже перемещает логотип вправо. Правда я чуть-чуть запутался, почему регистрация и меню в хтмл поменялись местами. Но я так думаю, что это из-за того, что float: right не только выравнивает элемент по правому краю, но ещё и разворачивает блоки. И как я понял тут только вариант поставить регистрацию перед меню? При этом не будет проблем с валидностью или индексированием сайта?

Мне понадобилось 8-9 месяцев чтобы понимать хоть что-то в этой спецификации, даже сейчас я местами чего-либо не понимаю. Так что это нормально. Пиши в лс, если в телеграмме сидишь, а лучше в скайп го ? Там я тебе могу про спецификацию рассказать столько сколько я знаю. 

[SelenIT]

12 минуты назад, Димитрий сказал:

Мне понадобилось 8-9 месяцев чтобы понимать хоть что-то в этой спецификации

Я вам больше скажу по секрету — сами редакторы этой спецификации далеко не всё в ней понимают :). Например, что в CSS2.1 не два контекста форматирования (блочный и строчный), а три (есть еще табличный), они поняли только на 14-й год (!) работы над ней — через год после того, как эта спецификация была «окончательно утверждена» . Так что нормально открывать в ней что-то новое снова и снова и спустя годы

[Димитрий]

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

Я вам больше скажу по секрету — сами редакторы этой спецификации далеко не всё в ней понимают :). Например, что в CSS2.1 не два контекста форматирования (блочный и строчный), а три (есть еще табличный), они поняли только на 14-й год (!) работы над ней — через год после того, как эта спецификация была «окончательно утверждена» . Так что нормально открывать в ней что-то новое снова и снова и спустя годы

Спасибо!!! А то я уж думал что я такой туп***, что не могу разобраться в этой спецификации....