Позиция Header

[Vildan 3]

Люди, купил стиль. Все переделал и все ок! Но вот только в чем проблема - в купленном стиле header bar разъезжался. Я пытался его настроить но ничего не получилось. Я решил скопировать вариант из дефолтной структуры. Вот что получилось... (см. картинку). Не могу понять как header посадить вплотную к верху как в дефолте) и зафиксировать по ширине форума.

НАРОД!!! Помогите! Это последнее что мешает форум запустить!

 

 

ВСЕ ОК! Разобрался) В процессе сам проблему создал в branding)

Изменено 19 января 2012 пользователем Vildan

[Vildan 3]

Разобрался с хейдором, как новая проблем с ним вылезла.

Я делаю для админ бара и юзер бара полупрозрачный фон. Для админ бара все ок (рис 1)

Но когда делаю такие же параметры для юзер бара, то вот что происходит (рис 2)

Вот код как выглядит:

/* HEADER */

#header_bar {
background: transparent);
padding: 0px 5px 0px 5px;
text-align: center;
         margin: 0px auto;
         width: 51%;
}

#admin_bar { font-size: 11px; line-height: 36px; 
background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), transparent);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(transparent));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: absolute;
padding: 0 10px;
background-color: rgba(0, 0, 0, 0.5); 
}

#admin_bar li.active a { color: #fc6d35; }
#admin_bar a { color: #8a8a8a; }
#admin_bar a:hover { color: #fff; }
#user_navigation { font-size: 11px; 
background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), transparent);
border-radius: 8px;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: absolute;
padding: 0 10px;
background-color: rgba(0, 0, 0, 0.5); 
}

 

В чем я ошибаюсь...?

PS. Свойства фонов и теней для других браузеров добавлю потом.

Изменено 19 января 2012 пользователем Vildan

[Fisana 700]

#header_bar {
       background: transparent);

Тут последняя скобка зачем?

[weiss 34]

http://jigsaw.w3.org/css-validator/#validate_by_input

В дополнительных возможностях выберите профиль CSS3.

[Vildan 3]

Да, спасибо. Исправление ошибок не помогло. Тут мистика какая то....)

Допустим для ссылок на модерацию и админку работает код:

#admin_bar { font-size: 11px; line-height: 36px; 
background: rgba(0, 0, 0, 0.5);
border-radius: 8px;
position: absolute;
padding: 0 10px;
}

 

Использую точно такой же код для юзер бара и происходит то что на второй картинке. Может я чего то не знаю? Я уже пробовал изменить позиции на статик и релативе и т.д. Ничего не помогает. Как такое может быть?!

[Vildan 3]

PS. Только что попробывал тоже самое в дефолтном скине сделать с юзер баром. Та же фигня. Юзер бар сразу уезжает налево и ложится сверху админ-ссылок.

Точно мистика...

[weiss 34]

Точно мистика...

Никакой мистики. Я уже устал вам давать ссылку на htmlbook.ru, а там все ответы на ваши вопросы, посмотрели бы просто и все поняли.

 

Свойство position:absolute задает абсолютное позиционирование элементу. Если элемент с абсолютным позиционированием не находится внутри элемента с относительным позиционированием (relative), то он позиционируется относительно окна браузера, а если находится (т. е. у родителя position:relative), то позиционирование происходит внутри родительского элемента.

 

Само позиционирование осуществляется с помощью свойств top, bootom, left и right, значение которых можно указывать в абсолютных и относительных величинах.

 

Теперь о конкретно вашем случае. У вас для #admin_bar задано абсолютное позиционирование, но не заданы свойста top/bottom/left/right. В этом случае браузер применяет значения по умолчанию — top: 0, left: 0, т. е. левый верхний угол. Чтобы второй элемент у вас был ниже или справа (или что вы хотите), задайте значения right, top или другие. Т. е., например, right: 10px будет говорить о том, что элемент «прилеплен» в 10 пикселях от правого края своего родителя.

[Vildan 3]

Да это все понятно... Дело в том что когда юзер бар стоит справа, то у него пропадает background какая позиция была бы не указана.