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


Дизайн


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

#1 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 09:58

Добрый день, уважаемые форумчане
подскажите пожалуйста как получить следующий результат?

1) Увеличить расстояние от шапки до 2 меню чтобы корректно отображался логотип
2)Увеличить расстояние от шапки чтобы корректно отображалась иконка корзины
3) увеличить ширину поиска

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

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


#2 Ирина345

Ирина345

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

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

Отправлено 14 Сентябрь 2014 - 10:28

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 09:58) писал:

Добрый день, уважаемые форумчане
подскажите пожалуйста как получить следующий результат?

1) Увеличить расстояние от шапки до 2 меню чтобы корректно отображался логотип
2)Увеличить расстояние от шапки чтобы корректно отображалась иконка корзины
3) увеличить ширину поиска
Здравствуйте,
1. найдите в style.css
header[role="banner"] {position: relative; min-height: 10em; overflow: hidden;z-index: 10;}
замените на
header[role="banner"] {position: relative; min-height: 189px; overflow: hidden;z-index: 10;}
2. найдите в style.css
.summary a {
		background: url("{ASSETS_IMAGES_PATH}cart.png") no-repeat scroll 10px 30px, url("{ASSETS_IMAGES_PATH}image.jpg") repeat;
		color: white;
		display: block;
		padding: 1.35em 0.5em 1.5em;
		position: absolute;
		right: -5.5em;
		text-align: center;
		top: 0;
		width: 13.333em;
}
замените на

.summary a {
		background: url("{ASSETS_IMAGES_PATH}cart.png") no-repeat scroll 10px 30px, url("{ASSETS_IMAGES_PATH}image.jpg") repeat;
		color: white;
		display: block;
		padding: 1.35em 0.5em 1.5em;
		position: absolute;
		right: -5.5em;
		text-align: center;
		top: 0;
		width: 13.333em;
height: 125px;
}
3. найдите

form[role="search"] input[type="submit"], input#search-submit {position: absolute;right: 0;z-index: 2;height: 2.833em;background: #404040;padding: 0 0.833em;margin: 0;line-height: 1;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px;-moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px;}
.ie7 input#search-submit {overflow: auto; width: 88px;}
замените на

form[role="search"] input[type="submit"], input#search-submit {position: absolute;right: -196px;z-index: 2;height: 2.833em;background: #404040;padding: 0 0.833em;margin: 0;line-height: 1;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px;-moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px;}
.ie7 input#search-submit {overflow: auto; width: 88px;}

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

form[role="search"] input[type="search"], input#search-field, .search {vertical-align: middle;-webkit-appearance: textfield;-webkit-box-sizing:content-box;border: none;width: 81% !important;height: 2.429em;font-size: 1.167em;color: #8a8a8a;position: absolute;z-index: 1;padding: 0 0.417em;margin: 0;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);}
.ie7 form[role="search"] input[type="search"], .ie7 input#search-field, .ie8 form[role="search"] input[type="search"], .ie8 input#search-field {padding-top: 0.75em; height: 1.667em;}
замените на

form[role="search"] input[type="search"], input#search-field, .search {vertical-align: middle;-webkit-appearance: textfield;-webkit-box-sizing:content-box;border: none;width: 143% !important;height: 2.429em;font-size: 1.167em;color: #8a8a8a;position: absolute;z-index: 1;padding: 0 0.417em;margin: 0;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);}
.ie7 form[role="search"] input[type="search"], .ie7 input#search-field, .ie8 form[role="search"] input[type="search"], .ie8 input#search-field {padding-top: 0.75em; height: 1.667em;}


#3 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 10:47

Спасибо все ок

#4 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 11:14

Помогите пожалуйста!

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

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

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


#5 Alekseys

Alekseys

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

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

Отправлено 14 Сентябрь 2014 - 11:43

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 11:14) писал:

Помогите пожалуйста!

Необходимо снять выделение области при наведении курсора на корзину
но таким образом чтобы текст остался черным цветом и чуть более большим шрифтом
Здравствуйте. В style.css замените
.basket-summary {
background: #4a4949;
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
на
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
и
.summary a:hover, .basket-info:hover .summary a {
background: #4a4949;
color: #d5d5d5;
}
замените на
.summary a:hover, .basket-info:hover .summary a {
color: rgb(145, 145, 145);
}
также в
.basket-summary p {
color: #9f9f9f;
margin: 0.5em;
}
замените на
.basket-summary p {
color: black;
margin: 0.5em;
}


#6 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 11:48

Благодарю за подробный ответ и оперативность :)

#7 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 11:55

Просмотр сообщенияAlekseys (14 Сентябрь 2014 - 11:43) писал:

Здравствуйте. В style.css замените
.basket-summary {
background: #4a4949;
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
на
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
и
.summary a:hover, .basket-info:hover .summary a {
background: #4a4949;
color: #d5d5d5;
}
замените на
.summary a:hover, .basket-info:hover .summary a {
color: rgb(145, 145, 145);
}
также в
.basket-summary p {
color: #9f9f9f;
margin: 0.5em;
}
замените на
.basket-summary p {
color: black;
margin: 0.5em;
}

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

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

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


#8 Alekseys

Alekseys

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

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

Отправлено 14 Сентябрь 2014 - 12:06

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 11:55) писал:

Получил вот такой результат хотел бы подправить выделение снять полностью и выронить текст
В style.css замените
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
на
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
margin: 5px 80px;
}


#9 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 12:18

Просмотр сообщенияAlekseys (14 Сентябрь 2014 - 12:06) писал:

В style.css замените
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
на
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
margin: 5px 80px;
}

Благодарю!

Подскажите корректна ли запись кода
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
margin: -15px -90px;
}

с отрицательными значениями в пикселях?

#10 AnnaM

AnnaM

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

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

Отправлено 14 Сентябрь 2014 - 12:26

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 12:18) писал:

Благодарю!

Подскажите корректна ли запись кода
.basket-summary {
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
margin: -15px -90px;
}

с отрицательными значениями в пикселях?
Да. значения отступов могут быть отрицательными.

#11 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 12:33

Скажите пожалуйста чтобы подогнать зону "клика" под картинку нужно задать размеры как и у картинки в пикселях?

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

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


#12 Alekseys

Alekseys

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

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

Отправлено 14 Сентябрь 2014 - 12:39

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 12:33) писал:

Скажите пожалуйста чтобы подогнать зону "клика" под картинку нужно задать размеры как и у картинки в пикселях?
Для этого отредактируйте размеры ссылки в style.css
.summary a {
background: url("http://posyda-ekb.storeland.net/cart.png") no-repeat scroll 10px 30px, url("http://posyda-ekb.storeland.net/image.jpg") repeat;
color: white;
display: block;
padding: 1.35em 0.5em 1.5em;
position: absolute;
right: -5.5em;
text-align: center;
top: 0;
width: 11.333em;
height: 125px;
}
параметрами width: 11.333em; и height: 125px; .

#13 AnnaM

AnnaM

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

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

Отправлено 14 Сентябрь 2014 - 12:44

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 12:33) писал:

Скажите пожалуйста чтобы подогнать зону "клика" под картинку нужно задать размеры как и у картинки в пикселях?
чтобы затем вернуть корзину на место, добавьте в блок, описанный выше
margin-right: 100px;


#14 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 12:48

Просмотр сообщенияAlekseys (14 Сентябрь 2014 - 12:39) писал:

Для этого отредактируйте размеры ссылки в style.css
.summary a {
background: url("http://posyda-ekb.storeland.net/cart.png") no-repeat scroll 10px 30px, url("http://posyda-ekb.storeland.net/image.jpg") repeat;
color: white;
display: block;
padding: 1.35em 0.5em 1.5em;
position: absolute;
right: -5.5em;
text-align: center;
top: 0;
width: 11.333em;
height: 125px;
}
параметрами width: 11.333em; и height: 125px; .


Будет ли это ошибкой если я параметр width:11/333em;   заменю на width: 80px; ?

#15 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 14:17

Помогите пожалуйста поправить еще парочку моментов

"Суммазаказов" нужно поставить пробел
и выровнять текст "товаров в корзине"

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

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


#16 AnnaM

AnnaM

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

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

Отправлено 14 Сентябрь 2014 - 14:27

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 12:48) писал:

Будет ли это ошибкой если я параметр width:11/333em;   заменю на width: 80px; ?
Нет. Эти величины имеют коэффициент соответствия.

#17 Alekseys

Alekseys

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

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

Отправлено 14 Сентябрь 2014 - 14:44

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 14:17) писал:

Помогите пожалуйста поправить еще парочку моментов

"Суммазаказов" нужно поставить пробел
и выровнять текст "товаров в корзине"
В style.css замените
.basket-summary table th, .basket-summary table td {
background: #4a4949;
border: none;
color: #d5d5d5;
padding: 1em 0 0.5em;
}
на
.basket-summary table th, .basket-summary table td {
background: #4a4949;
border: none;
color: #d5d5d5;
padding: 1em 0 0.5em;
text-align: center;
}
и
.summary a {
background: url("http://posyda-ekb.storeland.net/cart.png") no-repeat scroll 10px 30px, url("http://posyda-ekb.storeland.net/image.jpg") repeat;
color: white;
display: block;
padding: 1.35em 0.5em 1.5em;
position: absolute;
right: -5.5em;
text-align: center;
margin-right: 100px;
top: 0;
width: 80px;
height: 80px;
}
замените на
element.style {
}
a:link {
-webkit-tap-highlight-color: #beeaf0;
}
.summary a {
background: url("http://posyda-ekb.storeland.net/cart.png") no-repeat scroll 10px 30px, url("http://posyda-ekb.storeland.net/image.jpg") repeat;
color: white;
display: block;
padding: 1.35em 0.5em 1.5em;
position: absolute;
right: -5.5em;
text-align: right;
margin-right: 100px;
top: 0;
width: 80px;
height: 80px;
}


#18 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 15:07

Спасибо! все здорово

#19 Дмитрич

Дмитрич

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

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

Отправлено 14 Сентябрь 2014 - 16:10

Хотелось бы сделать слегка прозрачную шапку сайта
подскажите пожалуйста возможно ли это сделать в % соотношении ?
и укажите пожалуйста блок с кодом

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

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


#20 AnnaM

AnnaM

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

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

Отправлено 14 Сентябрь 2014 - 16:20

Просмотр сообщенияДмитрич (14 Сентябрь 2014 - 16:10) писал:

Хотелось бы сделать слегка прозрачную шапку сайта
подскажите пожалуйста возможно ли это сделать в % соотношении ?
и укажите пожалуйста блок с кодом
В файле style.css найдите блок
.global {
background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 90%, rgba(30,105,222,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(50%,rgba(84,163,238,1)), color-stop(90%,rgba(54,144,240,1)), color-stop(100%,rgba(30,105,222,1)));
background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 90%,rgba(30,105,222,1) 100%);
background: -o-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 90%,rgba(30,105,222,1) 100%);
background: -ms-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 90%,rgba(30,105,222,1) 100%);
background: linear-gradient(to bottom, rgba(109, 179, 242, 0.68) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 90%,rgba(30,105,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
padding: 1px;
}
в каждой связке rgba(109,179,242,1) четвертое значение (единица здесь) отвечает за прозрачность цвета.




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

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