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


Боковой Фон


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

#1 Алена

Алена

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 10 Февраль 2013 - 17:57

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

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

  • Рисунок1.png


#2 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 11 Февраль 2013 - 07:10

В файле "main.csstemplate".
Найти код:
#header {position: relative;width: 960px;height: 150px;margin: 0 auto;}
Заменить:
#header {
position: relative;
width: 960px;
height: 150px;
margin: 0 auto;
background-color: #EEE5DE;/*цвет фона*/
}
Найти код:
#contentWrap {clear: both;
background-color: #EEE0E5;/*цвет фона при отсутствие картинки*/;
background: url(/web/upload/assets/images/174/173127/contentWrap_bg.jpg);}

Заменить:
#contentWrap {
clear: both;
}
Найти код:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;}
Заменить:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  background: url(/web/upload/assets/images/174/173127/contentWrap_bg.jpg);
  color: #666;
}
Найти код:
#footer {
background: url("/web/upload/assets/images/174/173127/header_bg2.jpg") repeat-x;/*фон картинкой, заполнение по горизонтали*/border-top: 1px solid #CCCCCC;clear: both;color: #363636;font-family: verdana;font-size: 1em;
		text-align: center;}
Заменить:
#footer {
clear: both;
color: #363636;
font-family: verdana;
font-size: 1em;
text-align: center;
}


#3 Алена

Алена

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 11 Февраль 2013 - 11:15

Спасибо, внизу получилось хорошо, а вот сверху немного не то, что надо. Надо было растянуть розовый боковой фон до начала шапки, как бы обрезая серую шапку по центру слева и справа, а она получилась обрезана и залита не боковым розовым фоном, а центральным фоном страницы. Шапка должна остаться серой, но по бокам стать розовой, как боковой фон. Как сделать?

#4 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 11 Февраль 2013 - 11:44

Да. Можно. Попробуйте изменить стили.
В файле "main.csstemplate".
Найти код:
#headerWrap {height: 150px;background: url(/web/upload/assets/images/174/173127/header_bg.jpg) repeat-x;}
Заменить:
#headerWrap {
height: 150px;
}


#5 Алена

Алена

    Новичок

  • Пользователи
  • Pip
  • 3 сообщений

Отправлено 11 Февраль 2013 - 12:15

Спасибо огромное, то, что нужно!

#6 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 23 Март 2013 - 17:23

Пожалуйста,помогите вставить свой боковой фон. Честно искала в поиске,не получается у меня на чужих примерах
1.Нужно чтобы середина моего сайта не перекрывала цветы на фоне. Извините за примитивные объяснения.
2.Чтобы он -фон,был до самого верха под шапкой и перекрывал белую полоску над шапкой.
магазин http://good4hobby.ru/

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

  • finalbg.jpg


#7 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 25 Март 2013 - 06:59

Просмотр сообщенияВиолетта (23 Март 2013 - 17:23) писал:

Пожалуйста,помогите вставить свой боковой фон. Честно искала в поиске,не получается у меня на чужих примерах
1.Нужно чтобы середина моего сайта не перекрывала цветы на фоне. Извините за примитивные объяснения.
2.Чтобы он -фон,был до самого верха под шапкой и перекрывал белую полоску над шапкой.
магазин http://good4hobby.ru/

Найдите в файле main.css код:
#contentWrap {
clear: both;
background: url(http://design.good4hobby.ru/fon_bok.jpg);
background-color: white;
}
и замените на:
#contentWrap {
clear: both;
}

Найдите код:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
}
и замените на:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
background: url(http://design.good4hobby.ru/fon_bok.jpg) repeat-y top;
}


#8 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 25 Март 2013 - 08:29

ух ты,здорово. Спасибо большое. По бокам остались белые полоски,их убрать при сохранении достигнутого результата возможно?
и еще проблема обнаружилась. вот скриншот

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

  • Безымянный.png


#9 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 25 Март 2013 - 15:20

Просмотр сообщенияВиолетта (25 Март 2013 - 08:29) писал:

ух ты,здорово. Спасибо большое. По бокам остались белые полоски,их убрать при сохранении достигнутого результата возможно?
и еще проблема обнаружилась. вот скриншот

в файле main.css найдите блок
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
background: url(http://design.good4hobby.ru/fon_bok.jpg) repeat-y top;
background-attachment: fixed;
}
измените его на
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
color: #666;
background: url({ASSETS_IMAGES_PATH}fon_bok.jpg) repeat-y top;
background-attachment: fixed;
background-color: #a8a1cc;
}

в шаблоне HTML попробуйте убрать строчку
<meta http-equiv="X-UA-Compatible" content="IE=7">
в ie должно все нормально теперь отображаться

также нужно немного выровнять блок поиска, а то на большем разрешении экрана он уезжает.
Для этого в файле main.css найдите блок
#searchPanel input {
margin-top: 10px;
margin-left: 16px;
}
и замените на
#searchPanel input {
margin-top: 10px;
margin-left: 18px;
}

теперь найдите
#searchPanel {
position: absolute;
top: 490px;
left: 200px;
height: 128px;
width: 130px;
}
замените на
#searchPanel {
position: relative;
top: 150px;
left: 50px;
height: 128px;
width: 130px;
}

теперь найдите блок
#searchPanel #submit {
margin-left: 80px;}
измените на
#searchPanel #submit {
margin-left: 75px;}

теперь найдите
input#keywords {
margin: 0;
font-size: 1em;
padding: 0.25em;
width: 157px;
border: 1px solid #CCC;
color: #333;
}
измените на
input#keywords {
margin: 0;
font-size: 1em;
padding: 0.25em;
width: 162px;
border: 1px solid #CCC;
color: #333;
}

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

  • ScreenShot 197.png


#10 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 25 Март 2013 - 16:17

Ну вроде получилось, спасибо! только у меня в IE все равно небольшая полоска в самом низу есть. Вот скриншот 1
А на странице Корзина вообще все плохо, весь день пытаюсь это исправить ((( Скриншот 2 посмотрите плиииз  

Насчет поиска огромное спасибо. он меня уже достал, спасибо что проявили инициативу, спасли меня просто.
И раз вы так отзывчивы,можно еще вас помучаю)))) ?
На последнем скриншоте 3 есть пара моментов. Как удалять "вы здесь и так далее" я знаю,но когда я это делаю,все что под этой строчкой,после ее удаления сильно подскакивает вверх,вот как сейчас эта "Вы здесь и т.д.". Ну и блок слева как-то некрасиво прилип к краю,чуть бы его к центру сместить.

П.С. Делаю глаза как у кота из Шрека

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

  • Скриншот 1.png
  • Скриншот 2.png
  • Скриншот 3.png


#11 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 25 Март 2013 - 17:01

Для того чтобы сдвинуть каталог товаров нужно в файле "main.css" найти блок
#leftMenuBlock {
width: 190px;
margin: 0 20px 0 0;
background-color: rgb(241, 228, 252);
}
и заменить его на
#leftMenuBlock {
width: 190px;
margin: 0 20px 0 20px;
background-color: rgb(241, 228, 252);
}


#12 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 25 Март 2013 - 20:40

Спасибо!  Это получилось. Буду рада помощи в других вопросах

#13 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Март 2013 - 04:30

Добавьте в ваш файл стилей main.css

.ui-datepicker {
	display: none;
}

также найдите

#breadcrumb {
	font-size: 0.9166em;
	line-height: 1.8181em;
	margin: 0;
	padding-top: 20px;
}

и замените на

#breadcrumb {
	font-size: 0.9166em;
	line-height: 1.8181em;
	margin: 0;
	padding-top: 20px;
	display: none;
}

также найдите

#content {
	background: url("/web/fon_centr.jpg") repeat scroll 0 0 white;
	margin: 0 auto;
	width: 960px;
}

и замените на

#content {
	background: url("/web/fon_centr.jpg") repeat scroll 0 0 white;
	margin: 0 auto;
	min-height: 720px;
	width: 960px;
}


#14 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 26 Март 2013 - 08:39

Все гуд,полос внизу больше нет, даже в корзине красота. Спасибо большое. Только теперь вот какая беда :(

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

  • Безымянный.png


#15 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 26 Март 2013 - 08:48

Просмотр сообщенияВиолетта (26 Март 2013 - 08:39) писал:

Все гуд,полос внизу больше нет, даже в корзине красота. Спасибо большое. Только теперь вот какая беда :(

Найдите код в файле main.css:
#mainNav {
position: absolute;
left: 48px;
bottom: 0;
height: 35px;
background: url("http://design.good4hobby.ru/nav_bg.jpg") no-repeat;
margin: 0 244px;
}
и замените на:
#mainNav {
position: absolute;
left: 48px;
bottom: 42px;
height: 35px;
background: url("http://design.good4hobby.ru/nav_bg.jpg") no-repeat;
margin: 0 244px;
}


#16 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 26 Март 2013 - 10:42

спасибо большое за помощь,но не совсем так хотела. Возможно ли меню горизонтальное оставить как есть,а заголовки под ним немного опустить? Если применить ваш код,меню перекрывает низ шапки.

#17 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 26 Март 2013 - 11:24

Просмотр сообщенияВиолетта (26 Март 2013 - 10:42) писал:

спасибо большое за помощь,но не совсем так хотела. Возможно ли меню горизонтальное оставить как есть,а заголовки под ним немного опустить? Если применить ваш код,меню перекрывает низ шапки.

Найдите код в файле main.css:
#primaryContent {
width: 750px;
padding: 0 0px 40px 0;
vertical-align: top;
}
и замените на:
#primaryContent {
width: 750px;
padding: 25px 0px 40px 0;
vertical-align: top;
}


#18 Виолетта

Виолетта

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 114 сообщений

Отправлено 26 Март 2013 - 11:53

Ураа! То,что надо! Спасибо!

#19 ac-dream

ac-dream

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

  • Пользователи
  • PipPipPipPip
  • 401 сообщений

Отправлено 28 Ноябрь 2013 - 12:14

Здравствуйте!
Помогите, пожалуйста!
По инструкции на этой ветке сделала изменения.  Получилось Вот так:
http://xn----7sbatc0...ai/catalog/Busy

Как сделать так, чтоб изображение для фона, contentWrap_bg растянулось по ширине экрана и середина (белый фон) совпадала с контентом? Причём хочется, чтоб этот фон был фиксирован, и при прокрутке контента стоял на месте. Вот пример: http://livedemo00.te...estashop_35385/ (только шапка пусть останется как есть, белая)
В прикреплённых файлах - "Макет.jpg" - то, как должен выглядеть фон.
contentWrap_bg.jpg - файл, который я загрузила на сайт, как фон.

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

  • Макет.jpg
  • contentWrap_bg.jpg


#20 Castiel

Castiel

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

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

Отправлено 28 Ноябрь 2013 - 16:46

Просмотр сообщенияac-dream (28 Ноябрь 2013 - 12:14) писал:

Здравствуйте!
Помогите, пожалуйста!
По инструкции на этой ветке сделала изменения.  Получилось Вот так:
http://xn----7sbatc0...ai/catalog/Busy

Как сделать так, чтоб изображение для фона, contentWrap_bg растянулось по ширине экрана и середина (белый фон) совпадала с контентом? Причём хочется, чтоб этот фон был фиксирован, и при прокрутке контента стоял на месте. Вот пример: http://livedemo00.te...estashop_35385/ (только шапка пусть останется как есть, белая)
В прикреплённых файлах - "Макет.jpg" - то, как должен выглядеть фон.
contentWrap_bg.jpg - файл, который я загрузила на сайт, как фон.

Редактируем main.css
Находим
#content {
width: 960px;
margin: 0 auto;
}

Заменяем на
#content {
width: 980px;
margin: 0 auto;
background-color: #fff;
}

Находим
#header {
position: relative;
width: 960px;
height: 180px;
margin: 0 auto;
background-color: #ffffff;
}

Заменяем на
#header {
position: relative;
width: 980px;
height: 180px;
margin: 0 auto;
background-color: #ffffff;
}





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

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