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

[Atasja]

Добрый день!
Помогите изменить главную страницу как на прилагаемом рисунке, а именно:
1) слева добавить банер с ссылкой на группу Вконтакте;
2) спарва добавить несколько банеров

Прикрепленные изображения

• 

[lew]

откройте HTML
найдите код (примерно строчка 100-200)

<!-- Сообщение для инвалидов -->
<noscript>
<div class="noscript">
<div class="noscript-inner">
<p><strong>Мы заметили что у Вас выключен JavaScript.</strong></p>
<p>Необходимо включить его для корректной работы сайта.</p>
</div>
</div>
</noscript>
<!-- END Сообщение для инвалидов -->

под ним разместите новый код

<!-- баннер вконтакте -->
<div class="left-banner-vkontakte">
<a href="#">сюда ставьте картинку баннера </a>
</div>
<!-- END баннер вконтакте -->

<!-- 4-е правых баннера -->
<div class="right-wing-four-banner">
<div class="right-wing-four-banner-1 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a> </div>
<div class="right-wing-four-banner-2 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a></div>
<div class="right-wing-four-banner-3 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a></div>
<div class="right-wing-four-banner-4 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a></div>

</div>
<!-- END 4-е правых баннера -->

потом откройте style.css и в самом конце разместите новый код

/*баннеры*/
@media screen and (min-width: 1728px) {
.left-banner-vkontakte{ width: 200px; height:675px; outline: 1px solid #F00; position: absolute; left: -215px; top: 15px;}

.right-wing-four-banner{ position: absolute; right: -215px; top: 15px;}
.base-properties-banner{ width: 200px; height:150px; outline: 1px solid #F00; margin: 0 0 25px 0;}

}

так как сайт ваш адаптивный, то мне хотелось бы знать, где должны размещаться баннеры, когда открываешь сайт через планшетник или смартфон?
Я пока написал код, в котором баннеры будут видны при разрешении экрана 1728 и выше.
Нужны ваши уточнения.

[Atasja]

lew (31 Май 2014 - 19:45) писал:

откройте HTML
найдите код (примерно строчка 100-200)

<!-- Сообщение для инвалидов -->
<noscript>
<div class="noscript">
<div class="noscript-inner">
<p><strong>Мы заметили что у Вас выключен JavaScript.</strong></p>
<p>Необходимо включить его для корректной работы сайта.</p>
</div>
</div>
</noscript>
<!-- END Сообщение для инвалидов -->

под ним разместите новый код

<!-- баннер вконтакте -->
<div class="left-banner-vkontakte">
<a href="#">сюда ставьте картинку баннера </a>
</div>
<!-- END баннер вконтакте -->

<!-- 4-е правых баннера -->
<div class="right-wing-four-banner">
<div class="right-wing-four-banner-1 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a> </div>
<div class="right-wing-four-banner-2 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a></div>
<div class="right-wing-four-banner-3 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a></div>
<div class="right-wing-four-banner-4 base-properties-banner"><a href="#">сюда ставьте картинку баннера </a></div>

</div>
<!-- END 4-е правых баннера -->

потом откройте style.css и в самом конце разместите новый код

/*баннеры*/
@media screen and (min-width: 1728px) {
.left-banner-vkontakte{ width: 200px; height:675px; outline: 1px solid #F00; position: absolute; left: -215px; top: 15px;}

.right-wing-four-banner{ position: absolute; right: -215px; top: 15px;}
.base-properties-banner{ width: 200px; height:150px; outline: 1px solid #F00; margin: 0 0 25px 0;}

}

так как сайт ваш адаптивный, то мне хотелось бы знать, где должны размещаться баннеры, когда открываешь сайт через планшетник или смартфон?
Я пока написал код, в котором баннеры будут видны при разрешении экрана 1728 и выше.
Нужны ваши уточнения.

Спасибо за помощь!
С ПК заходить все так как и хотели! А со смартфонов размещение банеров хотелось бы видеть внизу над "подвалом" сайта, как на прилагаемом фото:

Прикрепленные изображения

• 

[Atasja]

Добрый день! Подскажите как исправить такую ошибку: дома с ПК все отлично смотрится (фото 1), а вот на ноутбуке некорректно отображается, как бы растягивается, но при этом обрезает края (фото 2). Как исправить?

Прикрепленные изображения

• 
• 

[Vaccina]

на самом деле, адаптивность у вас корректная, просто вы вынесли баннеры за пределы основной структуры сайта из-за чего они обрезаны.
Как вариант, попробуйте следующее в style.css найдите:

.container {
	margin: 0 auto;
	max-width: 1280px;
	overflow: visible;
	position: relative;
	width: 90%;
}

и уменьшите значение width, например width: 55%;

[Atasja]

Vaccina (03 Июнь 2014 - 01:10) писал:

на самом деле, адаптивность у вас корректная, просто вы вынесли баннеры за пределы основной структуры сайта из-за чего они обрезаны.
Как вариант, попробуйте следующее в style.css найдите:

.container {
margin: 0 auto;
max-width: 1280px;
overflow: visible;
position: relative;
width: 90%;
}

и уменьшите значение width, например width: 55%;

Спасибо! помогло, на ноутбуке теперь все ок! а вот на смартфонах не очень... банер с группой контакте и остальные банеры размещаются вверху, "поиск по магазину" растянут и смотрится не красиво.

[Atasja]

не совсем помогло, теперь форма поиска перекрывает разделы каталога товаров, можно как-то изменить это?

[Castiel]

Atasja (03 Июнь 2014 - 08:29) писал:

не совсем помогло, теперь форма поиска перекрывает разделы каталога товаров, можно как-то изменить это?

Здравствуйте,

В файле "style.css".
Найти:

@media only screen and (max-width: 768px) {
body {background: #F6F6F4;}
header[role="banner"] .hgroup {position: relative; width: 100%; top: 0; left: 0; margin: 1.5em 0 1em 0; overflow: hidden;}
header[role="banner"] form {position: relative; top: 0; left: 0; clear: both;}
header[role="banner"] {margin-bottom: 2em; overflow: visible;}

section.global {height: auto;}
section.global ul {float: none; margin-bottom: 0.5em;}
section.global ul.user-info {position: relative; left: 0;}

a.more-items, a.power.middle, .card-action p.current {width: 50%;} ul.item-list .item-meta {margin: 0;}
.home section[role="main"] {clear: both;}
.facet-header a {clear: left; display: block; margin: 0.167em 0; padding-left: 0; float: none;}
.sort-list p {float: left; margin: 0;}
.amount {clear: both;float: none !important;}
.x-list {float: left;}
.item aside article header {padding: 1.5em;}
.basket td.item-image, .basket td.item-description {float: none;}
.message, .message.warning, message.holiday {background-image: none; padding-left: 3em;}

footer .networks .newsletter, footer .networks .newsletter form {display: block; float: none; margin-bottom: 1em;}
.networks li:nth-child(2) {margin-left: 0;}

section.newsletter {width: auto; text-align: left; padding: 1em; left: auto; height: auto; overflow: hidden;}
section.newsletter div {text-align: left; width: 100%; overflow: hidden;}
section.newsletter h3 {float: none; margin-bottom: 1em;}
section.newsletter:before, section.newsletter:after, .chevron:before, .chevron:after {display: none;}
.home .activity .chevron ul.gallery-strip {margin: 0;}
section.total div.actions p {float: none;position: absolute;width: 60%;left: 0;top: -0.5em;}
header p.short-note {text-align: left; margin: 0;}
.card-center {width: 44%;}
.item aside .share li, section.total .advice div {float: none; margin: 0 0 0.5em 0; width: auto;}
}

Заменить:

@media only screen and (max-width: 768px) {
body {background: #F6F6F4;}
header[role="banner"] .hgroup {position: relative; width: 100%; top: 0; left: 0; margin: 1.5em 0 1em 0; overflow: hidden;}
header[role="banner"] form {position: relative; top: 0; left: 0; clear: both;}
header[role="banner"] {margin-bottom: 2em; overflow: visible;}

section.global {height: auto;}
section.global ul {float: none; margin-bottom: 0.5em;}
section.global ul.user-info {position: relative; left: 0;}

a.more-items, a.power.middle, .card-action p.current {width: 50%;} ul.item-list .item-meta {margin: 0;}
.home section[role="main"] {clear: both;}
.facet-header a {clear: left; display: block; margin: 0.167em 0; padding-left: 0; float: none;}
.sort-list p {float: left; margin: 0;}
.amount {clear: both;float: none !important;}
.x-list {float: left;}
.item aside article header {padding: 1.5em;}
.basket td.item-image, .basket td.item-description {float: none;}
.message, .message.warning, message.holiday {background-image: none; padding-left: 3em;}

footer .networks .newsletter, footer .networks .newsletter form {display: block; float: none; margin-bottom: 1em;}
.networks li:nth-child(2) {margin-left: 0;}

section.newsletter {width: auto; text-align: left; padding: 1em; left: auto; height: auto; overflow: hidden;}
section.newsletter div {text-align: left; width: 100%; overflow: hidden;}
section.newsletter h3 {float: none; margin-bottom: 1em;}
section.newsletter:before, section.newsletter:after, .chevron:before, .chevron:after {display: none;}
.home .activity .chevron ul.gallery-strip {margin: 0;}
section.total div.actions p {float: none;position: absolute;width: 60%;left: 0;top: -0.5em;}
header p.short-note {text-align: left; margin: 0;}
.card-center {width: 44%;}
.item aside .share li, section.total .advice div {float: none; margin: 0 0 0.5em 0; width: auto;}
a.toggleMenu {margin-top:55px;}
form[role="search"] {right: 0em;top: -45px;}
}

[Atasja]

Castiel (03 Июнь 2014 - 16:39) писал:

Здравствуйте,

В файле "style.css".
Найти:

@media only screen and (max-width: 768px) {
body {background: #F6F6F4;}
header[role="banner"] .hgroup {position: relative; width: 100%; top: 0; left: 0; margin: 1.5em 0 1em 0; overflow: hidden;}
header[role="banner"] form {position: relative; top: 0; left: 0; clear: both;}
header[role="banner"] {margin-bottom: 2em; overflow: visible;}

section.global {height: auto;}
section.global ul {float: none; margin-bottom: 0.5em;}
section.global ul.user-info {position: relative; left: 0;}

a.more-items, a.power.middle, .card-action p.current {width: 50%;} ul.item-list .item-meta {margin: 0;}
.home section[role="main"] {clear: both;}
.facet-header a {clear: left; display: block; margin: 0.167em 0; padding-left: 0; float: none;}
.sort-list p {float: left; margin: 0;}
.amount {clear: both;float: none !important;}
.x-list {float: left;}
.item aside article header {padding: 1.5em;}
.basket td.item-image, .basket td.item-description {float: none;}
.message, .message.warning, message.holiday {background-image: none; padding-left: 3em;}

footer .networks .newsletter, footer .networks .newsletter form {display: block; float: none; margin-bottom: 1em;}
.networks li:nth-child(2) {margin-left: 0;}

section.newsletter {width: auto; text-align: left; padding: 1em; left: auto; height: auto; overflow: hidden;}
section.newsletter div {text-align: left; width: 100%; overflow: hidden;}
section.newsletter h3 {float: none; margin-bottom: 1em;}
section.newsletter:before, section.newsletter:after, .chevron:before, .chevron:after {display: none;}
.home .activity .chevron ul.gallery-strip {margin: 0;}
section.total div.actions p {float: none;position: absolute;width: 60%;left: 0;top: -0.5em;}
header p.short-note {text-align: left; margin: 0;}
.card-center {width: 44%;}
.item aside .share li, section.total .advice div {float: none; margin: 0 0 0.5em 0; width: auto;}
}

Заменить:

@media only screen and (max-width: 768px) {
body {background: #F6F6F4;}
header[role="banner"] .hgroup {position: relative; width: 100%; top: 0; left: 0; margin: 1.5em 0 1em 0; overflow: hidden;}
header[role="banner"] form {position: relative; top: 0; left: 0; clear: both;}
header[role="banner"] {margin-bottom: 2em; overflow: visible;}

section.global {height: auto;}
section.global ul {float: none; margin-bottom: 0.5em;}
section.global ul.user-info {position: relative; left: 0;}

a.more-items, a.power.middle, .card-action p.current {width: 50%;} ul.item-list .item-meta {margin: 0;}
.home section[role="main"] {clear: both;}
.facet-header a {clear: left; display: block; margin: 0.167em 0; padding-left: 0; float: none;}
.sort-list p {float: left; margin: 0;}
.amount {clear: both;float: none !important;}
.x-list {float: left;}
.item aside article header {padding: 1.5em;}
.basket td.item-image, .basket td.item-description {float: none;}
.message, .message.warning, message.holiday {background-image: none; padding-left: 3em;}

footer .networks .newsletter, footer .networks .newsletter form {display: block; float: none; margin-bottom: 1em;}
.networks li:nth-child(2) {margin-left: 0;}

section.newsletter {width: auto; text-align: left; padding: 1em; left: auto; height: auto; overflow: hidden;}
section.newsletter div {text-align: left; width: 100%; overflow: hidden;}
section.newsletter h3 {float: none; margin-bottom: 1em;}
section.newsletter:before, section.newsletter:after, .chevron:before, .chevron:after {display: none;}
.home .activity .chevron ul.gallery-strip {margin: 0;}
section.total div.actions p {float: none;position: absolute;width: 60%;left: 0;top: -0.5em;}
header p.short-note {text-align: left; margin: 0;}
.card-center {width: 44%;}
.item aside .share li, section.total .advice div {float: none; margin: 0 0 0.5em 0; width: auto;}
a.toggleMenu {margin-top:55px;}
form[role="search"] {right: 0em;top: -45px;}
}

сделала, все-равно поле поиска перекрывает каталог (при уменьшении в браузере, и на смартфонах)

[Castiel]

Atasja (03 Июнь 2014 - 16:50) писал:

сделала, все-равно поле поиска перекрывает каталог (при уменьшении в браузере, и на смартфонах)

В файле "style.css" на 933 строке
Найти:

form {right: 0em;top: -45px;}

Заменить:

form[role="search"] {right: 0em;top: -45px;}

[Atasja]

Castiel (03 Июнь 2014 - 16:57) писал:

В файле "style.css" на 933 строке
Найти:

form {right: 0em;top: -45px;}

Заменить:

form[role="search"] {right: 0em;top: -45px;}

спасибо, теперь не перекрывает!)