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


Каталог В Шапке


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

#1 лиса

лиса

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

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

Отправлено 09 Июнь 2016 - 05:21

каталог в шапке.jpg
помогите плз исправить эту порнографию))

ну, скажем, сделать блоки для подкатегорий равной величины..

#2 Vaccina

Vaccina

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

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

Отправлено 09 Июнь 2016 - 06:09

В main.css найдите:
#nav li a {
	display: block;
	font-size: 15px;
	line-height: 100%;
	background: #fff;
	color: #000000;
	font-weight: 700;
	padding: 10px 30px 10px;
	margin: 0px;
	margin-right: 1px;
	margin-bottom: 1px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
}

после него пропишите:
#nav li li a {
	height: 70px;
	overflow: hidden;
}


#3 лиса

лиса

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

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

Отправлено 09 Июнь 2016 - 06:37

Спасибо большое! Получилось :)

#4 лиса

лиса

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

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

Отправлено 15 Июнь 2016 - 06:35

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

Сейчас выпадающий каталог (формально) выглядит так:
каталог в шапке 1.jpg

А хотелось бы получить примерно такое:
каталог в шапке 2.jpg
причем, здорово было бы, если на месте красных квадратиков были изображение этих подкатегорий

Это не очень сложно осуществить такое?

#5 Vaccina

Vaccina

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

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

Отправлено 15 Июнь 2016 - 07:16

В main.css найдите:
#nav li ul li.category-level-1 {
	float: left;
	width: 24%;
	margin: 5px 7px 5px 0;
}

замените на:
#nav li ul li.category-level-1 {
	margin: 5px 7px 5px 0;
	list-style: none;
	text-align: left;
	width: 100%;
}

далее найдите:
#nav li li a {
	height: 77px;
	overflow: auto;
	text-align: center;
}

замените на:
#nav li li a {
	height: auto;
	overflow: auto;
	text-align: left;
}

Чтобы вставить изображения, придутся в шаблоне HTML для каждой подкатегории прописывать условие и вставку самого изображения, такой вариант вас устроит?

#6 лиса

лиса

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

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

Отправлено 15 Июнь 2016 - 16:33

Большое спасибо за ответ! :)
Сделала по Вашему совету, немного поиграла параметрами.. Вроде терпимо получилось, для старта магазина пока покатит)
А ширина самого выпадающего фрейма со списком никак не регулируется? Поуже бы сделать..
И, да, подскажите, пожалуйста, как в html прописать вариант с картинками!

#7 Vaccina

Vaccina

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

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

Отправлено 16 Июнь 2016 - 02:41

В main.css найдите:
#nav li ul li.category-level-1 {
	margin: 5px 170px 5px 0;
	list-style-type: square;
	text-align: left;
	width: 60%;
	float: right;
}

замените на:
#nav li ul li.category-level-1 {
	margin: 5px 0;
	list-style-type: none;
	text-align: left;
	width: 100%;
	float: right;
}

далее найдите:
#nav > li {
	float: left;
	display: block;
}

замените на:
#nav > li {
	float: left;
	display: block;
	position: relative;
}

далее найдите:
#nav li ul.dropdown-menu {
	border-bottom: 5px solid #f79242;
	position: absolute;
	left: 0;
	width: 99.9%;
	padding: 0 15px;
	margin-top: 25px;
	z-index: 1000;
	float: left;
	opacity: 0;
	visibility: hidden;
	transition-property: margin-top, opacity, visibility;
	transition-duration: 0.5s, 0.5s, 0.5s;
	-webkit-transition-property: margin-top, opacity, visibility;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}

замените на:
#nav li ul.dropdown-menu {
	border-bottom: 5px solid #f79242;
	position: absolute;
	right: 0;
	width: 320px;
	padding: 0 15px;
	margin-top: 25px;
	z-index: 1000;
	float: left;
	opacity: 0;
	visibility: hidden;
	transition-property: margin-top, opacity, visibility;
	transition-duration: 0.5s, 0.5s, 0.5s;
	-webkit-transition-property: margin-top, opacity, visibility;
	-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}


Инструкция по вставке картинок в категорию:
http://forum.storela...инку/#entry9636




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

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