Внешний вид шапки

[Time]

Как сделать шапку как на скрине?

 

[Hope]

Где-то тут наверное: Настройки стиля: "Шапка" (header) и навигация

 

[Time]

Пытался там что то сделать не получилось

Что надо писать там?)

 

[Skaiman]

Настройки стиля: "Шапка" (header) и навигация: "Шапка" (header), очистить цвет фона, в EXTRA.css, добавить:

#header .pageWidth .pageContent {
    background: @primaryMedium;
}

 

[Time]

Получилось так

Как сделать немного отступ влево и вправо и закруглить нижние углы
Пример:

 

[Skaiman]

если у тебя фиксированная ширина форума, то значит сделай ширину побольше, я приблизительно написал:

#header .pageWidth .pageContent {
    background: @primaryMedium;
    width: 1240px;
    margin: 0 auto:
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

но это плохо отразиться на адаптированном дизайне. Надо делать минимальную ширину и максимальную.

 

[Time]

width: 1240px; - делает отступ только вправо! мне же нужно чтоб ширина шапки была чуть шире чем ширина форма т.е возможность сделать отступ и влево
еще радиус меняет по середине (на скрине все видно)

 

[Skaiman]

мне же нужно чтоб ширина шапки была чуть шире чем ширина форма

Дык тебе нужно и делай :) я дал направление, примерно где надо делать, там есть #header .pageWidth, экспериментируй, не жди готового решения, не научишся так.

 

[Nayn]

еще радиус меняет по середине (на скрине все видно)

Понимаешь у тебя шапка состоит из 2 частей, смещена одна вниз, поэтому радиус углов виден. Тут чтобы исправить, нужно видеть код стиля, а не гадать где править.

 

[Skaiman]

у него стандартный переделанный :) и вопросы может задавать одни и те же по сто раз

 

[Time]

Экспериментировал же так и так
#header .pageWidth {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

#header .pageContent {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
и тд
результат тот же

Понимаешь у тебя шапка состоит из 2 частей

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

 

[Nayn]

вопросы может задавать одни и те

Ну да, он любит облачные вопросы задавать без конкретики, ему нужен специалист кто сделает или же сам пусть изучает CSS и гуглит ответы по ним :)

Time, Скинь в личку сайт, гляну что с шапкой.

 

[Skaiman]

#headerMover #header {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Значение ширины указано 100%, если его сделать меньше процентов и выровнять по центру margin: 0 auto

Ага, потом говорит, что он сделал сай, но по факту на вопросе/ответе ему делали совместно :)

 

[Time]

Ага, потом говорит, что он сделал сай, но по факту на вопросе/ответе ему делали совместно

Конечно совместно я только спрашивал как делать. поэтому всем большое спасибо за оказанную помощь особенно XFI:-)

он шапку шире не делает хоть 150% только уменьшает если меньше 100%

#headerMover #header {
left: 0;
position: absolute;
top: 0;
width: 100%;
}

 

[Nayn]

Посмотрел его шапочку. Там у него методом применения параметров стиля не поможет. Стили шапки связаны с контентом.
Два варианта решения и 3 проблема с лого:
1. Либо отделять шапку и присваивать свои стили. Что довольно нужно менять сам код.
2. Либо убрать синий фон и присвоить другой фон или фоновое изображение.
3. Логотип не имеет размеры, он не отображается в шапке, ширина стоит лого размером 6x6 px :)

 

[Time]

Радиус в верхней секции возможно убрать?

 

[Nayn]

Радиус в верхней секции возможно убрать?

Верхние уберешь, нижние уберутся. Стили шапки-навигации-контента взаимосвязаны.

 

[Time]

а высоту нижней секции поднять выше можно? в Контейнер закладок навигации делал внешний-внутренний отступ не получается

 

[Nayn]

Если применишь такие параметры стилей:

#logo {
  display: block;
  float: left;
  line-height: 46px;
  height: 70px;
  max-width: 100%;
  vertical-align: middle; }

#header .pageWidth .pageContent {
  background: #2b485c;
  margin-top: -8px;
  width: auto;
  margin: 0 auto: -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
  -khtml-border-bottom-right-radius: 9px;
  border-bottom-right-radius: 9px;
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -khtml-border-bottom-left-radius: 9px;
  border-bottom-left-radius: 9px; }

#logo img {
  vertical-align: middle;
  max-width: 100%;
  height: 40px;
  padding: 15px 0px 0px 10px; }

Результат:


PS> И вообще чувак, поставь себе более привлекательный стиль, вроде бесплатных навалом :)

 

[Time]

Nayn, Как исправить такой момент?

margin-top: -8px; тут если делать меньше ситуация исправляется но радиус появляется