Дизайн
#1
Отправлено 14 Сентябрь 2014 - 09:58
подскажите пожалуйста как получить следующий результат?
1) Увеличить расстояние от шапки до 2 меню чтобы корректно отображался логотип
2)Увеличить расстояние от шапки чтобы корректно отображалась иконка корзины
3) увеличить ширину поиска
#2
Отправлено 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
Отправлено 14 Сентябрь 2014 - 10:47
#5
Отправлено 14 Сентябрь 2014 - 11:43
Дмитрич (14 Сентябрь 2014 - 11:14) писал:
Необходимо снять выделение области при наведении курсора на корзину
но таким образом чтобы текст остался черным цветом и чуть более большим шрифтом
.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
Отправлено 14 Сентябрь 2014 - 11:48
#7
Отправлено 14 Сентябрь 2014 - 11:55
Alekseys (14 Сентябрь 2014 - 11:43) писал:
.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; }
Получил вот такой результат хотел бы подправить выделение снять полностью и выронить текст
#8
Отправлено 14 Сентябрь 2014 - 12:06
Дмитрич (14 Сентябрь 2014 - 11:55) писал:
.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
Отправлено 14 Сентябрь 2014 - 12:18
Alekseys (14 Сентябрь 2014 - 12:06) писал:
.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
Отправлено 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;
}
с отрицательными значениями в пикселях?
#12
Отправлено 14 Сентябрь 2014 - 12:39
Дмитрич (14 Сентябрь 2014 - 12:33) писал:
.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; .
#14
Отправлено 14 Сентябрь 2014 - 12:48
Alekseys (14 Сентябрь 2014 - 12:39) писал:
.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; ?
#17
Отправлено 14 Сентябрь 2014 - 14:44
Дмитрич (14 Сентябрь 2014 - 14:17) писал:
"Суммазаказов" нужно поставить пробел
и выровнять текст "товаров в корзине"
.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
Отправлено 14 Сентябрь 2014 - 15:07
#20
Отправлено 14 Сентябрь 2014 - 16:20
Дмитрич (14 Сентябрь 2014 - 16:10) писал:
подскажите пожалуйста возможно ли это сделать в % соотношении ?
и укажите пожалуйста блок с кодом
.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 анонимных