How to leave a space between the menu and the top of a page?

Asked

Viewed 898 times

-2

I would like to leave a small space between the navigation bar and the menu (approximately 20pxs) without affecting the background image positioning.

HTML

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/text.css">
        </head>

    <body>
        <div id="header">
            <nav>
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">SOBRE</a></li>
                    <li><a href="#">SERVIÇOS</a></li>
                    <li><a href="#">CONTATO</a></li>
                </ul>
            </nav>
            </div> 

    </body>
</html>

CSS

* {
     margin: 0;
     padding: 0;
    font-family: arial;
}

/** Background image **/ 

#header {
    background-image: url(../img/background.jpg);
    width: 100%;
    height: 550px;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;

}

nav {
    background-color: black;
    opacity: 0.7;
    text-align: right;

}

nav li {
    display: inline-block;
    padding: 25px 0 25px 0;

}

nav a {
    color: white;
    padding: 0 40px 0 40px;
    text-decoration: none;

}
html css webdesign
  • 1

    What do you call "navigation bar"?

2 answers

1

Vinicius, all right?

You can use the property "padding" CSS, as you want a distance between the menu and the top of the page (with the image), you could for example put a "padding-top" within your id "header".

For example:

#header {
    background-image: url(../img/background.jpg);
    width: 100%;
    height: 550px;
    background-repeat: no-repeat;
    position: relative;
    background-position: center;
    padding-top: 20px;
}

Remembering that "padding" will always give an internal space on the element you are applying, unlike the "margin", that will give an external space.

  • 1

    Learn more about padding css in https://www.maujor.com/tutorial/propriedade-css-padding.php

1

You can put a padding-top in the #header, this will push the nav down, but will still leave the image of background pasted to the top bar of the window.

inserir a descrição da imagem aqui

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  font-family: arial;
}

/** Background image **/

#header {
  background-image: url(https://placecage.com/100/100);
  width: 100%;
  height: 550px;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
  background-size: cover;

  padding-top: 20px;
  box-sizing: border-box;
}

nav {
  background-color: black;
  opacity: 0.7;
  text-align: right;
}

nav li {
  display: inline-block;
  padding: 25px 0 25px 0;

}

nav a {
  color: white;
  padding: 0 40px 0 40px;
  text-decoration: none;

}
<div id="header">
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">SOBRE</a></li>
      <li><a href="#">SERVIÇOS</a></li>
      <li><a href="#">CONTATO</a></li>
    </ul>
  </nav>
</div>

Browser other questions tagged html css webdesign

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