learning html css and js, unsure of background positioning

Question

Trying to make a little database for projects for personal use, not sure how to word it but...
what i want:

what i got:

current code:

#Header {
  text-align: center;
  vertical-align: top;
  color: #FFF;
  border: 4px #000 solid;
  border-top: ;
  border-right: ;
  border-bottom: ;
  border=left: ;
  padding: 20px;
  background-color: #000;
}

body {
  Background: #FFF;
}

a {
  border: 2px #000 solid;
  border-radius: 2px;
  padding: 8px;
  text-decoration: none;
}

<body>
  <h1 id="Header">What do you want to do?</h1>
  <br>
  <a href="games.html" style="background-color: #070; color: #EEE;">Games</a> &nbsp <a href="game code.html" style="background-color: #070; color: #EEE;">Code</a><br><br><br>
  <a href="articles.html" style="background-color: #700; color: #EEE;">Articles</a>
</body>

I used a screenshot editor to create the image of what i want, how can i change the code to get the desired effect?

Thanks for your time and hopefully your response.

score 0 · Answer 1 · answered Apr 27 '20 at 15:57

Is this more or less what you hoped for?

Set padding and margin to zero for the body, set a margin on the header and position at the top of the body....

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

#Header {
  text-align: center;
  vertical-align: top;
  color: #FFF;
  border: 4px #000 solid;
  border-top: ;
  border-right: ;
  border-bottom: ;
  border=left: ;
  padding: 20px;
  background-color: #000;
  margin:0;
  top:0;
}

body {
  Background: #FFF;
}

a {
  border: 2px #000 solid;
  border-radius: 2px;
  padding: 8px;
  text-decoration: none;
}

<h1 id="Header">What do you want to do?</h1>
<br>
<a href="games.html" style="background-color: #070; color: #EEE;">Games</a> &nbsp <a href="game code.html" style="background-color: #070; color: #EEE;">Code</a><br><br><br>
<a href="articles.html" style="background-color: #700; color: #EEE;">Articles</a>

score 0 · Answer 2 · answered Apr 27 '20 at 16:01

What you can do is subtract 10px from the padding-bottom of #Header and add it to padding-top:

#Header {
  padding: 30px 0 10px; <--plus ten on top, minus ten on bottom
}

#Header {
  text-align: center;
  color: #FFF;
  border: 4px #000 solid;
  padding: 30px 0 10px;
  background-color: #000;
}

body {
  Background: #FFF;
}

a {
  border: 2px #000 solid;
  border-radius: 2px;
  padding: 8px;
  text-decoration: none;
}

<body>
  <h1 id="Header">What do you want to do?</h1>
  <br>
  <a href="games.html" style="background-color: #070; color: #EEE;">Games</a> &nbsp <a href="game code.html" style="background-color: #070; color: #EEE;">Code</a><br><br><br>
  <a href="articles.html" style="background-color: #700; color: #EEE;">Articles</a>
</body>

score 0 · Answer 3 · answered Apr 27 '20 at 16:04

To achieve what you want, the easiest way is to increase padding-top on #Header.

Your CSS has some issues, though. I'm listing them here:

border-top: ;
border-right: ;
border-bottom: ;

Omitting the right side of the declaration is not allowed. You need to either add values to assign to those CSS properties, or remove the lines completely.

border=left: ;

I'm assuming this is just a typo - it has to be border-left. Aside from that, same as stated previously. You must assign a value, or remove the declaration.

Background: #FFF;

CSS property names never contain capital letters. Instead, use background: #FFF;

#Header {
  text-align: center;
  vertical-align: top;
  color: #FFF;
  border: 4px #000 solid;
  border-top: ;
  border-right: ;
  border-bottom: ;
  border=left: ;
  padding: 40px 20px 20px; /* short for 40px top, 20px left & right, 20px bottom */
  background-color: #000;
}

body {
  Background: #FFF;
}

a {
  border: 2px #000 solid;
  border-radius: 2px;
  padding: 8px;
  text-decoration: none;
}

<body>
  <h1 id="Header">What do you want to do?</h1>
  <br>
  <a href="games.html" style="background-color: #070; color: #EEE;">Games</a> &nbsp <a href="game code.html" style="background-color: #070; color: #EEE;">Code</a><br><br><br>
  <a href="articles.html" style="background-color: #700; color: #EEE;">Articles</a>
</body>

score 0 · Answer 4 · answered Apr 27 '20 at 16:05

0

Set margin-top:0px; in #Header style, That should work for you.

answered Apr 27 '20 at 16:05

Nipuna Manoratne

1
3

score 0 · Accepted Answer · answered Apr 27 '20 at 16:10

I would strongly recommend wrapping your sections into containers or HTML5 elements and style them accordingly

See pen HTML and CSS: https://codepen.io/aystarz52/full/LYpLYBp

HTML

<body>
  <div class="container">
  <h1 id="Header">What do you want to do?</h1>
  </div>
  <br>
  <div class="page-content-container">
  <a href="games.html" style="background-color: #070; color: #EEE;">Games</a> &nbsp <a href="game code.html" style="background-color: #070; color: #EEE;">Code</a><br><br><br>
  <a href="articles.html" style="background-color: #700; color: #EEE;">Articles</a>
  </div>
</body>

CSS

body, html {
  background: #FFF;
  padding:0;
  margin:0;
}
.container {
  text-align:center;  
  border: 4px #000 solid;
  padding: 10px 0;
  background-color: #000;
}
#Header {
  color: #FFF;
}
.page-content-container {
  padding:10px;
}
a {
  border: 2px #000 solid;
  border-radius: 2px;
  padding: 8px;
  text-decoration: none;
}

learning html css and js, unsure of background positioning

5 Answers5