Jump to content
  • 0

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


Arxont
 Share

Question

Всем привет.

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

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

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

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

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

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

Template.jpg

Edited by Arxont
Link to comment
Share on other sites

17 answers to this question

Recommended Posts

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

 

Link to comment
Share on other sites

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

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

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

 

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

 

Edited by Димитрий
Link to comment
Share on other sites

  • 0
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;}

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

  • Thanks 1
Link to comment
Share on other sites

  • 0
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 не только выравнивает элемент по правому краю, но ещё и разворачивает блоки. И как я понял тут только вариант поставить регистрацию перед меню? При этом не будет проблем с валидностью или индексированием сайта?

Link to comment
Share on other sites

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

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

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

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

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

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

  • Thanks 1
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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