newmandvin
-
Posts
2 -
Joined
-
Last visited
newmandvin's Achievements
Explorer (1/14)
0
Reputation
-
Какой раз я сталкиваюсь с проблемой: если в одном месте вставишь элемент (рисунок, текст), то в каком-то другом месте происходит выталкивание других элементов. Как обойти эту проблему в коде, для того чтобы рисунки (иконки) располагались слева от пунктов меню Каталог товаров (и чтобы пункты меню типа Крупная техника для кухни, Крупная техника для дома располагались по центру блоков): <html> <head> <link rel="stylesheet" href="mysite.css"> </head> <body> <div class="mainwrap"> <div class="mainmenu"> <span> <span> <button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> </span> <span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span> </span> <nav class="menu"> <ul class="level1"> <li id="l1"> <div class="alignblock">Бытовая техника для кухни</div> <ul class="level2"> <li class="submenu"> <ul> <li class="submenu__title"> <a href="#">Крупная бытовая техника</a> </li> <li class="submenu__item"> <a href="#">Холодильники</a> </li> <li class="submenu__item"> <a href="#">Морозильные камеры</a> </li> <li class="submenu__item"> <a href="#">Морозильные лари</a> </li> <li class="submenu__item"> <a href="#">Плиты газовые </a> </li> </ul> <ul> <li class="submenu__title"> <a href="#">New title</a> </li> <li class="submenu__item"> <a href="#">Холодильники</a> </li> <li class="submenu__item"> <a href="#">Морозильные камеры</a> </li> <li class="submenu__item"> <a href="#">Морозильные лари</a> </li> <li class="submenu__item"> <a href="#">Плиты газовые </a> </li> </ul> </li> </ul> </li> <li id="l2"> <div class="alignblock">Item 2</div> </li> <li id="l3"> <div class="alignblock">Item 3 +</div> <ul class="level2"> <li>Sub-Item 3-1</li> <li>Sub-Item 3-2</li> <li>Sub-Item 3-3</li> <li>Sub-Item 3-4</li> <li>Sub-Item 3-5</li> <li>Sub-Item 3-6</li> <li>Sub-Item 3-7</li> <li>Sub-Item 4-8</li> </ul> </li> <li id="l2"> <div class="alignblock">Item 4</div> </li> <li id="l2"> <div class="alignblock">Item 5</div> </li> <li id="l2"> <div class="alignblock">Item 6</div> </li> </ul> </nav> </div> </div> </body> </html> .menu { position: relative; width: 370px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 0.5em 0 0.5em 0.3em; cursor: pointer; } ul.level1 { border: 1px solid thistle; } ul.level1>li { background-color: #fff; border-bottom: 1px solid thistle; } ul.level1>li:last-child { border-bottom: none; } ul.level2 { position: absolute; top: -35px; left: 100%; max-width: 559px; max-height: 1010px; padding: 0.5em 0.3em 0.5em 0.3em; background-color: #fff; border: 1px solid thistle; visibility: hidden; white-space: nowrap; column-count: 2; } ul.level2>li { padding: 0; border-bottom: 1px solid #fff; } ul.level2>ul>li { padding: 0; } ul.level2>li>ul>li { padding: 0; } ul.level1>li:hover ul.level2 { visibility: visible; } .menu a { color: #333; } .alignblock { text-align: center; vertical-align: middle; } .submenu__title { margin-bottom: 5px; } .submenu__title a { display: block; color: black; font: 13px Roboto, Tachoma, Arial, sans-serif; /* line-height: 1.5; */ text-decoration: none; padding: 3px 5px; } .submenu__item { /* margin-bottom: 0px; */ } .submenu__item a { display: block; color: gray; font: 13px Roboto, Tachoma, Arial, sans-serif; text-decoration: none; padding: 3px 5px; } Вот как пример
-
1. Как выделить пространство для меню? (на этом пространстве нарисована красная линия - прямоугольная область вокруг пунктов меню) 2. Как добиться многоколоночности меню как на сайте [url]https://positronica.ru/[/url] (как на рисунке ниже 2-хколоночности)?