Вид Каталога
#1
Отправлено 19 Октябрь 2014 - 21:48
Помогите, пожалуйста, произвести следующие изменения в отображении каталога:
Как сейчас:
Как надо сделать:
То есть надо сделать вид 1 уровня как 2 и 3
#2
Отправлено 20 Октябрь 2014 - 08:06
demon408 (19 Октябрь 2014 - 21:48) писал:
Помогите, пожалуйста, произвести следующие изменения в отображении каталога:
Как сейчас:
Безымянный.jpg
Как надо сделать:
цауца.png
То есть надо сделать вид 1 уровня как 2 и 3
.nav ul li { float:none; border-bottom:1px solid #FFF; }замените на
.nav ul li { float:none; border-bottom:1px solid #FFF; background: #333333; }далее найдите
.nav li { text-align:left; position:relative; }замените на
.nav li { text-align:left; position:relative;background: #999; }далее найдите
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }замените на
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#ffffff !important; }
#3
Отправлено 20 Октябрь 2014 - 11:29
Ирина345 (20 Октябрь 2014 - 08:06) писал:
.nav ul li { float:none; border-bottom:1px solid #FFF; }замените на
.nav ul li { float:none; border-bottom:1px solid #FFF; background: #333333; }далее найдите
.nav li { text-align:left; position:relative; }замените на
.nav li { text-align:left; position:relative;background: #999; }далее найдите
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }замените на
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#ffffff !important; }
К сожалению, совсем не то получилось, появился только серый фон:
Надо чтобы было точь-в-точь как здесь:
#4
Отправлено 20 Октябрь 2014 - 12:31
demon408 (20 Октябрь 2014 - 11:29) писал:
Безымянный.png
Надо чтобы было точь-в-точь как здесь:
аыца.png
.nav li a { padding: 0 0 0; font-weight: bold; color: #CC0099; line-height: normal; }на
.nav li a { padding: 0 0 0; font-weight: bold; color: #000; line-height: normal; border-bottom: 1px solid #fff; }
и добавьте
.nav ul li.level2 { background: #999 !important; }
#5
Отправлено 20 Октябрь 2014 - 13:20
AnnaM (20 Октябрь 2014 - 12:31) писал:
.nav li a { padding: 0 0 0; font-weight: bold; color: #CC0099; line-height: normal; }на
.nav li a { padding: 0 0 0; font-weight: bold; color: #000; line-height: normal; border-bottom: 1px solid #fff; }
и добавьте
.nav ul li.level2 { background: #999 !important; }
Получилось вот что:
Еще нужно:
1) сделать шрифт и его размер на 1 уровне как на 2 и 3
2) межстрочные линии на 2 и 3 уровне почему-то стали жирные, нужно сделать как было
3) второй уровень немного наезжает на первый, нужно подправить
В общем нужно все подровнять, чтобы было один в один как на скрине из моего предыдущего сообщения.
#6
Отправлено 20 Октябрь 2014 - 13:27
demon408 (20 Октябрь 2014 - 13:20) писал:
цывв.png
Еще нужно:
1) сделать шрифт и его размер на 1 уровне как на 2 и 3
2) межстрочные линии на 2 и 3 уровне почему-то стали жирные, нужно сделать как было
3) второй уровень немного наезжает на первый, нужно подправить
В общем нужно все подровнять, чтобы было один в один как на скрине из моего предыдущего сообщения.
.nav { padding: 0 3px 37px 7px; margin: 0; font-size: 15px; }на
.nav { padding: 0 3px 37px 7px; margin: 0; font-size: 12px; }2) замените в main.css
.nav ul li { float: none; /border-bottom: 1px solid #FFF; background: #333333; }на
.nav ul li { float: none; /* border-bottom: 1px solid #FFF; */ background: #333333; }
#7
Отправлено 20 Октябрь 2014 - 13:35
demon408 (20 Октябрь 2014 - 13:20) писал:
цывв.png
Еще нужно:
1) сделать шрифт и его размер на 1 уровне как на 2 и 3
2) межстрочные линии на 2 и 3 уровне почему-то стали жирные, нужно сделать как было
3) второй уровень немного наезжает на первый, нужно подправить
В общем нужно все подровнять, чтобы было один в один как на скрине из моего предыдущего сообщения.
.nav ul li.active a, .nav ul li.over a { color:#FFF !important; background:#333333; }на
.nav ul li.active a, .nav ul li.over a { color:#000 !important; background:#999; }
#8
Отправлено 20 Октябрь 2014 - 14:06
AnnaM (20 Октябрь 2014 - 13:35) писал:
.nav ul li.active a, .nav ul li.over a { color:#FFF !important; background:#333333; }на
.nav ul li.active a, .nav ul li.over a { color:#000 !important; background:#999; }
Нет, получилось вот так:
А надо наоборот, чтобы на всех 3-х уровнях active был с темно-серым фоном и белым шрифтом, как здесь:
#9
#10
Отправлено 20 Октябрь 2014 - 15:39
Alekseys (20 Октябрь 2014 - 14:54) писал:
.nav li a:hover{background-color:black; color:white!important;} .nav li li a:hover{background-color:black; color:white!important;} .over a{background-color:black; color:white!important;}
Извините, я немного ошибся. Все правильно, все оставляем как есть, но только для второго уровня active нужно сделать фон #999 и черный шрифт.
#11
Отправлено 20 Октябрь 2014 - 15:51
demon408 (20 Октябрь 2014 - 15:39) писал:
.nav ul li a { float: none; padding: 3px 9px; font-weight: normal; color: #ffffff !important; }на
.nav ul li a { float: none; padding: 3px 9px; font-weight: normal; color: black!important; background-color: #999; border: 1px solid white; }
#12
Отправлено 20 Октябрь 2014 - 16:41
Alekseys (20 Октябрь 2014 - 15:51) писал:
.nav ul li a { float: none; padding: 3px 9px; font-weight: normal; color: #ffffff !important; }на
.nav ul li a { float: none; padding: 3px 9px; font-weight: normal; color: black!important; background-color: #999; border: 1px solid white; }
Не помогло, ну да ладно, и так хорошо.
И последнее, необходимо подровнять по красной линии:
Первый блок сделать на пару px уже, а второй сдвинуть немного правее, чтобы не наезжал на первый.
#13
Отправлено 20 Октябрь 2014 - 16:45
demon408 (20 Октябрь 2014 - 16:41) писал:
И последнее, необходимо подровнять по красной линии:
Безымянный.png
Первый блок сделать на пару px уже, а второй сдвинуть немного правее, чтобы не наезжал на первый.
.nav li.over ul { left: 200px; }на
.nav li.over ul { left: 206px; }
#14
Отправлено 20 Октябрь 2014 - 17:21
#15
Отправлено 08 Февраль 2015 - 16:00
a.knopka {
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em;
outline: none;
}
a.knopka:hover { background: #4d4d4d; }
a.knopka:active { background: white; }
#16
Отправлено 08 Февраль 2015 - 16:15
demon408 (08 Февраль 2015 - 16:00) писал:
a.knopka {
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em;
outline: none;
}
a.knopka:hover { background: #4d4d4d; }
a.knopka:active { background: white; }
button.button span { float: left; height: 25px; background: #2F3030; padding: 0 0 0 7px; font: 13px Trebuchet MS, Helvetica, sans-serif; text-align: center; white-space: nowrap; color: #fff; font-weight: bold; }на
button.button span { float: left; height: 25px; padding: 0 0 0 7px; font: 13px Trebuchet MS, Helvetica, sans-serif; text-align: center; white-space: nowrap; color: #fff; font-weight: bold; }и добавить
button.button span { float: left; color: #fff; text-decoration: none; user-select: none; background: #000000; padding: .7em 1.5em!important; outline: none; } button.button span span:hover { background: #4d4d4d; } button.button span span:active { background: white; }
#18
Отправлено 08 Февраль 2015 - 16:55
demon408 (08 Февраль 2015 - 16:40) писал:
button.button span { float: left; color: #fff; text-decoration: none; user-select: none; background: #000000; padding: .7em 1.5em!important; outline: none; }на
button.button span span { float: left; color: #fff; text-decoration: none; user-select: none; background: #000000; padding: .7em 1.5em!important; outline: none; }
#20
Отправлено 28 Март 2015 - 22:08
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных