Как закрепить верхнее меню, что бы оно всегда было в сверху экрана. Шаблон Ancart

[Sergio]

Доброго времени суток! Подскажите пожалуйста как закрепить верхнее меню что бы оно всегда было в сверху экрана, даже когда прокручиваешь сайт. Шаблон Ancart.

[yudjine]

самое верхнее?   или меню выпадающее

 

catalog/view/theme/default/stylesheet/stylesheet.css

/* top */

#top {

position:fixed;    (  зафиксировать )

z-index:200;       ( придать ему по оси координат Z  расположение, так чтоб меню было выше остальных элементов )

min-height: 40px;

width:100%

 

меню выпадающее ниже в цсс /меню/

зы  не обратил внимания на шаблон, возможно в твоем иначе

[Sergio]

Спасибо за ответ, но к сожалению не помогло...

[admin]

а что именно не помогло ?

фаербаг есть ?

[Sergio]

Заранее извеняюсь за не професиональную терминологию ответа так как я не верстальщик и до знакомства c ocshop я думал что css это что-то из области фантастики,в общем когда я применил эти правила в цсс-да меню закрепилось но всё поехало в сторону на скринах видно, а ссылки Войти или Зарегистрироваться вообще пропали в неизвестном направлении, в идеале хочеться чтобы эта строка меню прилепилась к верхнему краю окна браузера и была всегда на верху, и на ширину окна браузера, судя потому что я понял из файла header.tpl это меню <div class="toplinks"> находиться в теге <div id="header"> который в свою очередь в  <div id="container">, может его надо вынести с id="container создать ему например <div id="topheader"> контейнер и там попробывать все заново разместмть, или прикрепить можно только с помощью css?

это обычный вид

[admin]

мыслите правильно :-) но по скринам я в итоге так и не понял что надо закрепить ?

меню? или верхнюю полоску растянув по всей ширине ее фон ?

[Sergio]

спасибо)вот это меню, или назовем его верхней полоской)

[admin]

так просто вам не ответишь много надо расписывать и смотреть как именно будет вести себя полоска

вам надо добавить пустой див который расположить выше контейнера и дать стиль фона такой же как у полоски в итоге он у вас станет по всей ширине

 

потом надо для дива топлинкс сделать как то так

.toplinks {

  background: #1d1c21 none repeat scroll 0 0;

  border-bottom: 1px dashed #e2e2e2;

  height: 45px;

  max-width: 1170px;

  padding: 0 5px;

  position: fixed;

  width: 100%;

}

потом надо переместить блоки блоки авторизации языка и валют в него иначе они не будут фиксится

 

начинайте давайте линк будем подсказывать по ходу действий

[Sergio]

Линк не дам т.к. сайт в денвере, в общем вынес toplinks в новосозданый блок <div id="topheader"> потом сделал както так

.toplinks {

  background: #1d1c21 none repeat scroll 0 0;

  border-bottom: 1px dashed #e2e2e2;

  height: 45px;

  max-width: 100%; поменял с 1170рх на 100%

  padding: 0 5px;

  position: fixed;

    z-index: 200; добавил этот индекс

  width: 100%;

}

полоска стала красиво на всю ширину и приклеилась к верхней стороне, но к сожалению не могу на нее вынести Войти или Зарегистрироваться и флажки переключения языка, мне кажеться они остались под полоской хотя я пробывал их зафиксировать и поставить z-index такой же как у полоски

#language {

	position:absolute;

    z-index: 200;

	top: 16px;

	left: 520px;

	width: 150px;

	color: #ffffff;

	line-height: 17px;


}

#language img {

    position: absolute;

    z-index: 200;

	cursor: pointer;

	margin-right: 5px;

}

#header #welcome {

	position: fixed;

	top: 15px;

	left: 20px;

	z-index: 210;

	text-align: right;

	color: #FFFFFF;

}

#header #welcome a{

	color: #fcb800;

    position: fixed;

    z-index: 210;

[admin]

все верно они в header.tpl находятся не в блоке топлинк а в блоке хеадер их надо туда переместить и подправить им стили

[Sergio]

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

[admin]

в стилях еще поправьте вы же изменили блок а там они заданы относительно хедер

[Sergio]

В общем с помощью манипуляций и метода тыка в стилях + немного подправил файлы перевода, получилось так)

[admin]

ну похоже вы добились своего :-)

рад за вас

[Sergio]

Огромное спасибо за помощь и подсказки!