Позиция Header

Позиция Header Внеплановый вопрос!

#1 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

Отправлено 19 Январь 2012 - 13:54

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

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

Вложений

Безымянный-2.png (110,25К)
Количество загрузок: 17

Сообщение изменено: Vildan (19 Январь 2012 - 14:19)

Наверх of the page up there ^

#2 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 19 Январь 2012 - 16:47

Разобрался с хейдором, как новая проблем с ним вылезла.
Я делаю для админ бара и юзер бара полупрозрачный фон. Для админ бара все ок (рис 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. Свойства фонов и теней для других браузеров добавлю потом.

Вложений

1.png (40,14К)
Количество загрузок: 24
2.png (41,06К)
Количество загрузок: 22

Сообщение изменено: Vildan (19 Январь 2012 - 17:03)

Наверх of the page up there ^

#3 Fisana

На PM не отвечаю

Группа: IPB Skins Team
Сообщений: 12 892
Регистрация: 21-Ноябрь 05
Репутация: 562
Откуда:Из интернетов
IPB version:3.1.x

Отправлено 19 Январь 2012 - 21:28

#header_bar {
        background: transparent);

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

Наверх of the page up there ^

#4 weiss

Advanced

Группа: IPB Specialist
Сообщений: 113
Регистрация: 07-Август 11
Репутация: 14
Откуда:Rivendell
IPB version:3.2.x

Отправлено 19 Январь 2012 - 21:32

http://jigsaw.w3.org...lidate_by_input
В дополнительных возможностях выберите профиль CSS3.

Наверх of the page up there ^

#5 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 19 Январь 2012 - 23:51

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

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

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

Наверх of the page up there ^

#6 Vildan

Advanced

Группа: Пользователи
Сообщений: 138
Регистрация: 07-Ноябрь 11
Репутация: 3
IPB version:3.2.x

автор темы Отправлено 20 Январь 2012 - 00:23

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

Наверх of the page up there ^

#7 weiss

Advanced

Группа: IPB Specialist
Сообщений: 113
Регистрация: 07-Август 11
Репутация: 14
Откуда:Rivendell
IPB version:3.2.x

Отправлено 20 Январь 2012 - 09:34

Vildan сказал(а):

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

Никакой мистики. Я уже устал вам давать ссылку на 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 пикселях от правого края своего родителя.