1
votes

Comment placer les div les uns sous les autres?

Voici ce que je veux faire:

En plus, la barre de navigation doit être corrigée pour qu'elle descende lorsque vous faites défiler,

ensuite je veux que le premier div soit directement sous le div de navigation . Et ce div couvrira 90% de l'écran (10% pour la barre de navigation) et ne contiendra qu'une image.

En dessous, se trouve le div dans lequel je vais insérer le contenu / texte principal. Cela devrait aussi prendre 100% de l'écran lorsque vous faites défiler vers le bas si vous voyez ce que je veux dire?

Enfin une petite barre de pied de page dans un div aussi.

En regardant mon code, vous allez voir que c'est très basique, je veux que ça reste ainsi .. J'ai juste besoin que les divs restent les uns sous les autres ..

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>John's Work</title>
  <meta name="description" content="My Personal Portfolio">
</head>

<body>


  <div class="navbar">

    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>

  </div>


  <div class="header">

  </div>

  <div class="content">
    lorem ipsum text
  </div>

  <div class="footer">
    Copyright by
  </div>




</body>

</html>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
  position: relative;
  /*height: 10%;*/
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("img/background.jpg");
  background-color: grey;
}

.content {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white;
}

.footer {
  height: 50px;
  width: 100%;
  background-color: yellow;
}

html css placement

0 commentaires

3 Réponses :

0
votes

Est-ce que cela vous satisfait (en fait, je n'obtiens pas ce que vous voulez, mais je suppose quelque chose comme ça)

<div class="navbar">

    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>

  </div>


  <div class="header">

  </div>

  <div class="content">
    lorem ipsum text
  </div>

  <div class="footer">
    Copyright by
  </div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
    position: fixed;
    height: 50px;
    top: 0px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("img/background.jpg");
  background-color: grey;
}

.content {
  position: absolute;
      margin-top: 50px;
  height: 100%;
  width: 100%;
  background-color: white;
}

.footer {
  height: 50px;
  width: 100%;
  background-color: yellow;
}

0 commentaires

0
votes

a supprimé toutes les propriétés position: absolue de tous les div. J'espère que cela aidera

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>John's Work</title>
  <meta name="description" content="My Personal Portfolio">
</head>
<body>
  <div class="navbar">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </div>
  <div class="header"></div>
  <div class="content">lorem ipsum text</div>
  <div class="footer">Copyright by</div>
</body>
</html>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}
body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}
ul#horizontal-list {
  list-style: none;
}
ul#horizontal-list li {
  display: inline;
}
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: center;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: red;
}
.navbar {
  position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}
.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}
.header {
  width: 100%;
  height: 100%;
  background-image: url("img/background.jpg");
  background-color: grey;
}
.content {
  height: 100%;
    width: 100%;
    background-color: red;
}
.footer {
  height: 50px;
  width: 100%;
  background-color: yellow;
}

0 commentaires

0
votes

<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>John's Work</title>
  <meta name="description" content="My Personal Portfolio">

</head>

<body>

<div class="holder">
  <div class="navbar">

    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>

  </div>


  <div class="header">

  </div>
</div>
  <div class="content">
    lorem ipsum text
  </div>

  <div class="footer">
    Copyright by
  </div>




</body>

</html>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}
.holder{
    height: 100%;
    width: 100%;
}
.navbar {
    position: fixed;
    top: 0;
    height: 10%;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
  width: 100%;
  height: 90%;
  background-image: url("img/background.jpg");
  background-color: grey;

}

.content {
    height: 100%;
    width: 100%;
    background-color: red;
}

.footer {
  height: 50px;
  width: 100%;
  background-color: orange;
}

0 commentaires