Перейти к содержимому


Фон И Контуры


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 AlexRing

AlexRing

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений
  • ГородМск

Отправлено 15 Декабрь 2013 - 23:26

Всем, добрый вечер.
Задача изменить фон и поменять линии
1) Пустить полоски, аналогичные тем что в данный момент идут горизонтально, но пустить их вертикально по краям основной части сайта
Места, где их необходимо пустить отмечены красным.
2) Необходимо убрать полоски в тех местах которые отмечены синими прямоугольниками
То есть чтобы они создали как бы рамку вокруг информационной части сайта
3) Каким образом можно сделать фон в тех местах которые отмечены зеленым фоном?
Фон будет содержать какой-то узор только в верхней части экрана и где-то в области
первой линии каталога будет переходить монотонный и уходить до бесконечности в низ.

В целом должно получить приблизительно как на главной странице http://storeland.ru/

Всем огромное спасибо за помощь.

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

  • Гор.jpg


#2 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 16 Декабрь 2013 - 09:16

Здравствуйте
1) в файле main.css найдите данный блок кода:
#primaryContent {width: 750px;padding:0 0px 40px 0;vertical-align:top;}
и замените его на
#primaryContent {width: 750px;padding:0 0px 40px 0;vertical-align:top;border-right:1px solid #000000;border-bottom:1px solid #000000;}
далее в том же файле найдите данный блок кода:
#leftMenuBlockWrap {
width: 170px;
padding:1em 0 40px 0;
vertical-align:top;
}
и замените его на
#leftMenuBlockWrap {
width: 170px;
padding:1em 0 40px 0;
vertical-align:top;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
}

p.s. В обоих случаях вы можете задать ширину и цвет этих полосок просто поменяв значение параметров строки border-left:1px solid #000000; первый параметр "1px" прибавляя число вы можете сделать полоску жирнее, например поставить "2px" "3px" и т.д. а цвет данных полосок можно изменить поменяв 3тий параметр , тоесть поменяв #000000 , список кодов цветов можно найти в интернете.

2.Те полоски которые вы отметили синим цветом через код удалить не получится, т.к они накладываются картинкой, Вам нужно подправить эти картинки, а именно:
1)header_bg.jpg
2)botfade.jpg

и еще в файле main.css найдите блок кода
#footer {background: url("{ASSETS_IMAGES_PATH}botfade.jpg") repeat-x 50% 100%;border-top: 1px solid #CCC;clear: both;color: #999;font-family: verdana;height: 139px;margin: 0px;padding: 0px;text-align: center;}
и замените его на
#footer {background: url("{ASSETS_IMAGES_PATH}botfade.jpg") repeat-x 50% 100%;border-top: 0px solid #CCC;clear: both;color: #999;font-family: verdana;height: 139px;margin: 0px;padding: 0px;text-align: center;}

3.Что касается фона, то это можно сделать, но для начала вам нужно найти или нарисовать картинку , которую вы хотите поставить на фон, а дальше мы сможем вам помочь.

#3 AlexRing

AlexRing

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений
  • ГородМск

Отправлено 19 Декабрь 2013 - 15:48

Алексей спасибо! :rolleyes:
Все получилось.
Только пришла другая идея и все переделал.
Вопрос остался открытым только для третьего пункта. Я так понимаю что фон идет каскадом, т.е. маленькая картинка множится?
Если не сложно, как можно в это вникнуть чтобы натянуть фон, который будет формироваться для разных разрешений экрана корректно(монитор планшет телефон)??

#4 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 19 Декабрь 2013 - 16:19

Вы правы. Фон составляется из маленьких картинок.
Чтобы корректно отображался фон, желательно,чтобы изображение было шириной 1px и высотой, равной высоте вашего сайта, либо квадратное изображение.
В интернете мы можете найти множество патернов, или нарисовать.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных