CODEWITHSUNDEEP
htmlcss
rappatic
rappatic

Reputation: 71

Make div on top of page

I've been working on a website in HTML and CSS.

@font-face {
  font-family: NS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/nsr.ttf);
}

@font-face {
  font-family: PS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/psr.ttf);
}

@font-face {
  font-family: KR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/kr.ttf);
}

@font-face {
  font-family: ANR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/anr.otf)
}

body {
  /*background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;*/
  width: 100%;
  margin: auto;
  height: 100%;
}

p {
  font-family: "ns";
}

h1 {
  font-family: "anr";
}

.white {
  color: #ffffff;
}

.black {
  color: #000000;
}
<div style="width: 100%; background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); background-attachment: fixed;">
  <div style="width: 70%; margin: 3% 15% 0 15%;">
    <h1 class="white" style="font-size: 60px; font-family: KR !important;">Hi, I'm rappatic.</h1>
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p>
    <br>
    <div>

As you can see, there's a white bar on top of the div. Changing the color of the background confirms the white bar is actually part of the background. Is there a way to make the div stay on top of the page, so the white bar disappears?

Upvotes: 1

Views: 2323

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42384

The 'whitespace' is actually coming from your <h1> tag, which is too large for the padding on the parent <div>.

Instead of padding, you're actually looking to set a margin on the <div> instead. margin offsets the element that it is applied to, whereas padding offsets any child elements (such as <h1>), leaving the element with the padding untouched. This can be seen in the box model:

Box Model

Simply swapping the margin for padding resolves the problem.

Also note that you have <div> instead of </div></div> at the end. I've corrected this in my example below:

@font-face {
  font-family: NS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/nsr.ttf);
}

@font-face {
  font-family: PS;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/psr.ttf);
}

@font-face {
  font-family: KR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/kr.ttf);
}

@font-face {
  font-family: ANR;
  src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/anr.otf)
}

body {
  /*background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);
  background-attachment: fixed;*/
  width: 100%;
  margin: auto;
  height: 100%;
}

p {
  font-family: "ns";
}

h1 {
  font-family: "anr";
}

.white {
  color: #ffffff;
}

.black {
  color: #000000;
}
<div style="width: 100%; background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); background-attachment: fixed;">
  <div style="width: 70%; padding: 3% 15% 0 15%;">
    <h1 class="white" style="font-size: 60px; font-family: KR !important;">Hi, I'm rappatic.</h1>
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p>
    <br>
  </div>
</div>

Upvotes: 6

KLTR
KLTR

Reputation: 1344

This happens because of the margin that you set on the child div <div style="width: 70%; margin: 3% 15% 0 15%;">

you can try margin: 0% 15% 0 15%;

or set the parent div to position:realtive and the child div as position: absolute;

<div style="position:  relative;width: 100vw;height:  80vh;background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);background-attachment: fixed;">
  <div style="width: 70%;position:  absolute;margin: 3% 15% 0 15%;<div style=&quot;width: 70%; margin: 3% 15% 0 15%;&quot;>;<div style=&quot;width: 70%; margin: 3% 15% 0 15%;&quot;>;">
    <h1 class="white" style="font-size: 60px;font-family: KR !important;">Hi, I'm rappatic.</h1>
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p>
    <br>
    </div>
</div>

you can check this https://jsfiddle.net/reeferblower/zdg0L668/ , as i used the second option.

** in the second option (using positions) you need to set the height of the parent div, so the child div will have a height as well(this is because the child is absolute to the parent which has position:realtive

Upvotes: 0

Related Questions