Space between needless animals

Asked

Viewed 90 times

-1

Good, I was creating two Divs when I came across this space... I’ve been looking for the code for everything that is creating this space but I can’t find, it was supposed to be for him or there...

Does anyone know how I can remove this space without having to give negative margins?

inserir a descrição da imagem aqui

body {
    font-family: arial;
}

.menu-principal {
    background-color: #ababab;
    height: 60px;
    width: 100%;
}

.logo img {
    margin-top: 5px;
    margin-left: 20px;
}

.logo {
    display: inline;
}

main {
    margin: 0 auto;
    width: 1280px;
    position: relative;
}

.redes-sociais {
    float: right;
    position: relative;
    height: 50px;
}

.redes-sociais li {
    float: left;
    margin-top: -12px;
    margin-left: 5px;
}

.redes-sociais li img {
    height: 50px;
    width: auto;
}

ul {
    list-style-type: none;
    margin-right: 20px;
}

.menu-secundario {
    background-color: #7fd0ff;
    width: auto;
    height: 60px;
}

.menu-secundario li {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    color: black;
}
<!DOCTYPE html>
<html>

<head>
    <title>Rio Lis</title>
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
</head>

<body>
    <header class="menu-principal">
        <main>
            <div class="header-1">
                <div class="logo">
                    <a href="../html/index.html"><img src="../img/logo.png" height="50px" width="auto"></a>
                </div>
                <div class="redes-sociais">
                    <ul>
                        <li><a href="https://www.facebook.com"><img src="../img/face-logo.png" /></a></li>
                        <li><a href="https://www.instagram.com"><img src="../img/insta-logo.png" /></a></li>
                        <li><a href="https://www.twitter.com"><img src="../img/twitter-logo.png" /></a></li>
                        <li><a href="https://www.youtube.com"><img src="../img/youtube-logo.png" /></a></li>
                    </ul>
                </div>
            </div>

            <div class="menu-secundario">
                <nav>
                    <ul>
                        <li><a href="">Historias</a></li>
                        <li><a href="">Linha temporal</a></li>
                        <li><a href="">Impacto da poluição</a></li>
                        <li><a href="">Percurso</a></li>
                        <li><a href="">Jogo</a></li>
                    </ul>
                </nav>
            </div>
        </main>
    </header>


</body>

</html>

html css
  • 1

    Try to give the header-1, see if this solves your problem

  • in the example you put here does not appear this space :)

  • @Ricardopunctual but it appears with this in the image and I do not know how to solve because it is not supposed to have the space, it is supposed to be as it is in the example

  • I could tell from the picture, but it’s hard to say what could be without seeing it happen, if I could replicate the problem here it would be easier

  • 1

    Probably this space is appearing because an image or more is overwriting the size of the div class="header-1"

  • @Jaksonfischer was the image of social networking logos thank you!!

  • @Davidmv, oops, I’m glad you could fix it :D

Show 2 more comments

1 answer

0

Dude, you need to remove the default upper margin that the ul have, so you will not need to make the gambiara to use a negative margin on the images of social networks pulling them up.

One of the reasons that are generating the space between the elements is exactly the upper margin of the ul inside the blue div, and also do not use float: left in their li's. Instead use flexbox in ul with display: flex so that the li'are aligned in the horizontal.

See in the example below how it looks and note the CSS comments of what has been removed and added:

body {
    font-family: arial;
}

.menu-principal {
    background-color: #ababab;
    height: 60px;
    width: 100%;
}

.logo img {
    margin-top: 5px;
    margin-left: 20px;
}

.logo {
    display: inline;
}

main {
    margin: 0 auto;
    width: 1280px;
    position: relative;
}

.redes-sociais {
    float: right;
    position: relative;
    height: 50px;
}

.redes-sociais li {
    float: left;
    /* margin-top: -12px; REMOVIDO */
    margin-left: 5px;
}

.redes-sociais li img {
    height: 50px;
    width: auto;
}

ul {
    list-style-type: none;
    margin-right: 20px;
    margin-top: 0; /* ADICIONADO */
}

.menu-secundario {
    background-color: #7fd0ff;
    width: auto;
    height: 60px;
}

/* ADICIONADO */
.menu-secundario nav ul {
  display: flex;
}

.menu-secundario li {
    /* float: left; REMOVIDO */
    margin-left: 5px;
    margin-right: 5px;
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    color: black;
}
<!DOCTYPE html>
<html>

<head>
    <title>Rio Lis</title>
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
</head>

<body>
    <header class="menu-principal">
        <main>
            <div class="header-1">
                <div class="logo">
                    <a href="../html/index.html"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" height="50px" width="auto"></a>
                </div>
                <div class="redes-sociais">
                    <ul>
                        <li><a href="https://www.facebook.com"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" /></a></li>
                        <li><a href="https://www.instagram.com"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" /></a></li>
                        <li><a href="https://www.twitter.com"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" /></a></li>
                        <li><a href="https://www.youtube.com"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" /></a></li>
                    </ul>
                </div>
            </div>

            <div class="menu-secundario">
                <nav>
                    <ul>
                        <li><a href="">Historias</a></li>
                        <li><a href="">Linha temporal</a></li>
                        <li><a href="">Impacto da poluição</a></li>
                        <li><a href="">Percurso</a></li>
                        <li><a href="">Jogo</a></li>
                    </ul>
                </nav>
            </div>
        </main>
    </header>


</body>

</html>

Browser other questions tagged html css

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