samedi 27 février 2021

Calculation of the length/width of the picture and the hyperlink

It is necessary that the menu items are located as on the site http://positronica.ru (picture on the side, and the inscription in the center)

Menu view

that is, it is necessary that the li item is displayed as follows:

li Item

I'm having some math problems (and how to code it). The code looks like

.menu {
  position: relative;
  width: 370px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0.5em 0 0.5em 0em;
  cursor: pointer;
}

ul.level1 {
  border: 1px solid thistle;
}

ul.level1>li {
  background-color: #fff;
  border-bottom: 1px solid thistle;
}

ul.level1>li>a {text-decoration: none; display: block; line-height: 32px; padding: 5px 0px 5px 0px; border-bottom: 1px solid lightgray;}

.one::before,
.two::before {
  content: ""; float: left; display: block;
  margin-left: 30px; margin-right: 16px; width: 25px; height: 25px;
  background-size: 25px;
}

.one::before {background-image: url(http://s1.iconbird.com/ico/2013/1/615/w255h2421390849748Sushi09.png);}

.two::before {background-image: url(http://s1.iconbird.com/ico/2013/1/615/w255h2421390849748Sushi19.png);}

ul.level1>li:last-child {
  border-bottom: none;
}

ul.level2 {
  position: absolute;
  top: -25px;
  left: 100%;
  max-width: 559px;
  max-height: 1010px;
  padding: 0em 0em 0em 0em;
  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: 7px 0px 0px 7px;
}

.submenu__item {
  /* margin-bottom: 0px; */
}

.submenu__item a {
  display: block;
  color: gray;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  text-decoration: none;
  padding: 0px 0px 0px 7px;
}

body {
    display: block;
    margin: 0px;
}
<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>

Tell me how to program so that the drawing is on the side and the text is centered




Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)