Сообщений в теме: 5

[tega4]

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

И еще вопрос, как можно сместить саму кнопку "поиск" ближе к полю ввода...
SL-257549

Вопрос не по поиску. но все же, сейчас кликабельна только анимация на шапке, можно увеличить это поле не зависимо от размеров картинки в logo?

[tega4]

Сама нашла проблему, но не могу ее решить.
Почему-то получается что ширина контента на страницах "Каталог" и "Контакты" больше чем на остальных, это и вызывает сдвиг логотипа и остальных деталей шапки. Как эту проблему устранить?

[tega4]

аууу.... мне кто-нибудь ответит или так и оставим это в небытие???

[Сake]

У вас шапка не зафиксирована, в связи с этим она гуляет по всей ширине страницы. Необходимо её зафиксировать как это было сделано в шаблоне по умолчанию. Найдите в файле стилей main.css

#header {
  height: 150px;
  margin: 0 auto;
  position: relative;
  width: 1263px;
}

и замените на

#header {
  background: url("{ASSETS_IMAGES_PATH}logo.jpg") no-repeat -64px top;
  height: 220px;
  margin: 0 auto;
  position: relative;
  width: 960px;
}

далее найдите

#cartInfo {
  bottom: -10px;
  font-size: 13px;
  position: absolute;
  right: 185px;
  text-align: center;
  white-space: nowrap;
}

и замените на

#cartInfo {
  font-size: 13px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 100px;
  white-space: nowrap;
}

далее найдите

#mainNav {
  background: url("{ASSETS_IMAGES_PATH}nav_bg.jpg") no-repeat;
  bottom: -70px;
  height: 35px;
  left: 150px;
  position: absolute;
}

и замените на

#mainNav {
  background: url("{ASSETS_IMAGES_PATH}nav_bg.jpg") no-repeat;
  bottom: 0;
  height: 35px;
  left: 0;
  position: absolute;
}

далее найдите

#contactInfo {
  font-size: 1.2em;
  left: 550px;
  position: absolute;
  top: -28px;
}

и замените на

#contactInfo {
  font-size: 1.2em;
  position: absolute;
  right: 100px;
  top: 0;
}

далее найдите

#header #logo {
  background: url("{ASSETS_IMAGES_PATH}logo.gif") no-repeat;
  height: 181px;
  left: 61px;
  position: absolute;
  top: 0;
  width: 300px;
}

и замените на

#header #logo {
  height: 181px;
  left: 61px;
  position: absolute;
  top: 0;
  width: 300px;
}

далее найдите

#headerWrap {
  background: url("{ASSETS_IMAGES_PATH}logo.jpg") no-repeat center top;
  height: 250px;
}

и замените на

#headerWrap {
  height: 220px;
}

далее найдите

#searchPanel {
  position: absolute;
  right: 179px;
  top: 34px;
}

и замените на

#searchPanel {
  position: absolute;
  right: 0;
  top: 34px;
}

далее найдите

#searchPanel label, #searchPanel input {
  display: inline;
  margin-left: 5px;
  vertical-align: middle;
}

и замените на

#searchPanel label, #searchPanel input {
  display: inline;
  vertical-align: middle;
}

далее найдите

input#keywords {
  background: none;
  border: 1px solid #CCCCCC;
  color: #333333;
  font-size: 1em;
  margin: 0;
  padding: 0.25em;
  width: 128px;
}

и замените на

input#keywords {
  background: none;
  border: medium none;
  color: #333333;
  font-size: 1em;
  margin: 0;
  padding: 0.25em;
  width: 80px;
}

[tega4]

Сake (24 Декабрь 2013 - 05:02) писал:

У вас шапка не зафиксирована, в связи с этим она гуляет по всей ширине страницы. Необходимо её зафиксировать как это было сделано в шаблоне по умолчанию. Найдите в файле стилей main.css

#header {
height: 150px;
margin: 0 auto;
position: relative;
width: 1263px;
}

и замените на

#header {
background: url("{ASSETS_IMAGES_PATH}logo.jpg") no-repeat -64px top;
height: 220px;
margin: 0 auto;
position: relative;
width: 960px;
}

далее найдите

#cartInfo {
bottom: -10px;
font-size: 13px;
position: absolute;
right: 185px;
text-align: center;
white-space: nowrap;
}

и замените на

#cartInfo {
font-size: 13px;
position: absolute;
right: 0;
text-align: center;
top: 100px;
white-space: nowrap;
}

далее найдите

#mainNav {
background: url("{ASSETS_IMAGES_PATH}nav_bg.jpg") no-repeat;
bottom: -70px;
height: 35px;
left: 150px;
position: absolute;
}

и замените на

#mainNav {
background: url("{ASSETS_IMAGES_PATH}nav_bg.jpg") no-repeat;
bottom: 0;
height: 35px;
left: 0;
position: absolute;
}

далее найдите

#contactInfo {
font-size: 1.2em;
left: 550px;
position: absolute;
top: -28px;
}

и замените на

#contactInfo {
font-size: 1.2em;
position: absolute;
right: 100px;
top: 0;
}

далее найдите

#header #logo {
background: url("{ASSETS_IMAGES_PATH}logo.gif") no-repeat;
height: 181px;
left: 61px;
position: absolute;
top: 0;
width: 300px;
}

и замените на

#header #logo {
height: 181px;
left: 61px;
position: absolute;
top: 0;
width: 300px;
}

далее найдите

#headerWrap {
background: url("{ASSETS_IMAGES_PATH}logo.jpg") no-repeat center top;
height: 250px;
}

и замените на

#headerWrap {
height: 220px;
}

далее найдите

#searchPanel {
position: absolute;
right: 179px;
top: 34px;
}

и замените на

#searchPanel {
position: absolute;
right: 0;
top: 34px;
}

далее найдите

#searchPanel label, #searchPanel input {
display: inline;
margin-left: 5px;
vertical-align: middle;
}

и замените на

#searchPanel label, #searchPanel input {
display: inline;
vertical-align: middle;
}

далее найдите

input#keywords {
background: none;
border: 1px solid #CCCCCC;
color: #333333;
font-size: 1em;
margin: 0;
padding: 0.25em;
width: 128px;
}

и замените на

input#keywords {
background: none;
border: medium none;
color: #333333;
font-size: 1em;
margin: 0;
padding: 0.25em;
width: 80px;
}

спасибо большое, но как мне теперь вернуть анимацию на лого?
файл logo.gif
сейчас поставила его через html....

[tega4]

Спасибо, данную проблему решила сама.