In the menu a li does not occupy the whole area of ul. Cut a piece at the beginning of the menu

Asked

Viewed 69 times

0

/* Configurações Globais Inicio */

html, body {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
    background-color: aqua;
}

a {
    text-decoration: none;
    color: black;
    display: block;  
}

input[type="checkbox"] {
    display: none;
}

/* Configurações Globais Fim */

/* Templates Inicio */

.menu-frontal {
    background: #ffffff;
    grid-area: menu-frontal;
    border: 0.1vw solid #f5f5f591;
}

.menu-lateral {
    background: #eeeeee;
    grid-area: menu-lateral;
}

.home {
    background: #f5f5f5;
    display: grid;
    grid-template-columns: 3fr 18fr;
    grid-template-rows: 10vh 10vh 80vh;
    grid-template-areas: "menu-frontal menu-frontal " "menu-lateral ." "menu-lateral ."
}

/* Templates Fim */

.icon-menu {
    position: relative;
    top: 3vh;
    left: 1vw;
}

.img-logo {
    position: relative;
    top: 2.5vh;
    left: 9.9vw;
}

.text-logo {
    position: absolute;
    top: 0.6vh;
    left: 4.2vw;
    font-family: Verdana;
    font-size: 1.5vw;
    color: #212121;
}

.menu li img {
    position: relative;
    bottom: 1vh;
    right: 1.7vw;
    padding: 1vw;
    font-size: 1.2vw;
}

.menu li .text {
    position: relative;
    bottom: 6vh;
    left: 3vw;
}

 li:hover {

    background-color: red;
    /* width: 11.8vw;
    right: 20vw; */
}

 li {
     /* position: relative; */
    /* position: absolute; */
    /* display: inline; */
    background-color: pink;
}

input[type="checkbox"]:checked~.menu-esquerda {
    background-color: red;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link rel="stylesheet" href="arquivos/style2.css">
</head>

<body>

    <section class="home">

        <header class="menu-frontal">
            <input type="checkbox" name="" id="chec">

            <label for="chec" class="icon-menu">
                <img src="arquivos/menu.svg" alt="">
            </label>

            <label for="">
                <img src="arquivos/logo6.png" title="Página Inicial" class="img-logo">
            </label>
            <label for="" class="text-logo">
                <p title="Página Inicial">Team Roping</p>
            </label>
        </header>

        <aside class="menu-lateral">
            <nav class="menu-esquerda">
                <ul class="menu">
                    <li ><a href="#"><img src="arquivos/home.svg" alt="" class="img-inicio"></a><a href="#" class="text">Inicio</a></li>
                    <!-- <li class=""><a href="#" class="inicio"></a><img src="arquivos/home.svg" alt="" srcset="" class="primeira">Início</a></li> -->
                     <li><a href="#"><img src="arquivos/create.svg" alt="" class="segunda"></a><a href="#" class="text">Criar prova</a> </li>
                    <li><a href="#"><img src="arquivos/add.svg" alt="" class="terceira"></a><a href="#" class="text">Novo competidor </a></li> 
                </ul>
            </nav>
        </aside>
    </section>

</body>

</html>

  • 1

    Explain the problem better, it is very vague. As a new user, it is important to read the documentation of the site, such as [tour] and [Ask].

  • 1

    Didn’t I get it right, you don’t want the blue bar there on the left? Do you want the pink list to stick to the left? It wasn’t clear

  • I would love to help. But for that you would have to explain what you do, because of this code there are infinite possibilities of expansion. Each person will get a different view of the code that probably won’t be their own.

1 answer

1


Just reset the padding of ul with padding: 0:

/* Configurações Globais Inicio */

html, body {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
    background-color: aqua;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
    display: block;  
}

input[type="checkbox"] {
    display: none;
}

/* Configurações Globais Fim */

/* Templates Inicio */

.menu-frontal {
    background: #ffffff;
    grid-area: menu-frontal;
    border: 0.1vw solid #f5f5f591;
}

.menu-lateral {
    background: #eeeeee;
    grid-area: menu-lateral;
}

.home {
    background: #f5f5f5;
    display: grid;
    grid-template-columns: 3fr 18fr;
    grid-template-rows: 10vh 10vh 80vh;
    grid-template-areas: "menu-frontal menu-frontal " "menu-lateral ." "menu-lateral ."
}

/* Templates Fim */

.icon-menu {
    position: relative;
    top: 3vh;
    left: 1vw;
}

.img-logo {
    position: relative;
    top: 2.5vh;
    left: 9.9vw;
}

.text-logo {
    position: absolute;
    top: 0.6vh;
    left: 4.2vw;
    font-family: Verdana;
    font-size: 1.5vw;
    color: #212121;
}

.menu li img {
    position: relative;
    bottom: 1vh;
    right: 1.7vw;
    padding: 1vw;
    font-size: 1.2vw;
}

.menu li .text {
    position: relative;
    bottom: 6vh;
    left: 3vw;
}

 li:hover {

    background-color: red;
    /* width: 11.8vw;
    right: 20vw; */
}

 li {
     /* position: relative; */
    /* position: absolute; */
    /* display: inline; */
    background-color: pink;
}

input[type="checkbox"]:checked~.menu-esquerda {
    background-color: red;
}
<section class="home">

        <header class="menu-frontal">
            <input type="checkbox" name="" id="chec">

            <label for="chec" class="icon-menu">
                <img src="arquivos/menu.svg" alt="">
            </label>

            <label for="">
                <img src="arquivos/logo6.png" title="Página Inicial" class="img-logo">
            </label>
            <label for="" class="text-logo">
                <p title="Página Inicial">Team Roping</p>
            </label>
        </header>

        <aside class="menu-lateral">
            <nav class="menu-esquerda">
                <ul class="menu">
                    <li ><a href="#"><img src="arquivos/home.svg" alt="" class="img-inicio"></a><a href="#" class="text">Inicio</a></li>
                    <!-- <li class=""><a href="#" class="inicio"></a><img src="arquivos/home.svg" alt="" srcset="" class="primeira">Início</a></li> -->
                     <li><a href="#"><img src="arquivos/create.svg" alt="" class="segunda"></a><a href="#" class="text">Criar prova</a> </li>
                    <li><a href="#"><img src="arquivos/add.svg" alt="" class="terceira"></a><a href="#" class="text">Novo competidor </a></li> 
                </ul>
            </nav>
        </aside>
    </section>

  • Thank you very much @Sam!

  • (+2). + 1 for the answer and +1 for decoding the question.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.