How can I remove the top white bar?

Question

I'm having some issues with a blank space (or bar) on the top of my website.

I have tried playing with different values of padding and position as some other posts suggests but nothing seems to work.

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 150px;
  left: 300px;
  z-index: 2;
  position: absolute;
  color: white;
  margin: 0;
}

h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 230px;
  left: 300px;
  z-index: 2;
  color: white;
  font-weight: 100;
  font-style: italic;
}

img {
  z-index: 1;
  position: absolute;
  padding-top: 0;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hayao Miyazaki Tribute Page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="miyazaki.css">
</head>

<div id="main" class="image">
  <h1>Hayao Miyazaki</h1>
  <h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
  <img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>

<body>

  <script src="" async defer></script>
</body>

</html>

Can you post an running example in jsfiddle or something similar? — Emanuele Scarabattoli, Jul 31 '19 at 12:26
Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out [**LearnLayout.com**](http://learnlayout.com/) — Paulie_D, Jul 31 '19 at 12:42
@Emanuele Hi, I tried and I came up with this: https://jsfiddle.net/y4tLrnka/ (Is this the right way to post a running example?) Thanks! — Arturo Abreu, Jul 31 '19 at 13:23
@Paulie_D thanks! This is an awesome resource, much much appreciated. — Arturo Abreu, Jul 31 '19 at 13:26

score 0 · Answer 1 · answered Jul 31 '19 at 12:28

0

You should add margin 0 to body class

css

body{
background: #fff;
margin: 0;
}

answered Jul 31 '19 at 12:28

Ranjith v

1,032
5
15

score 0 · Accepted Answer · answered Jul 31 '19 at 12:35

Since you have givenposition: absolute to the img, you should specify the position of the image.

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 150px;
  left: 300px;
  z-index: 2;
  position: absolute;
  color: white;
  margin: 0;
}

h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 230px;
  left: 300px;
  z-index: 2;
  color: white;
  font-weight: 100;
  font-style: italic;
}

img {
  z-index: 1;
  position: absolute;
  padding-top: 0;
  top: 0; /* added position */
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hayao Miyazaki Tribute Page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="miyazaki.css">
</head>

<div id="main" class="image">
  <h1>Hayao Miyazaki</h1>
  <h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
  <img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>

<body>

  <script src="" async defer></script>
</body>

</html>

This worked perfectly! Thanks for all the suggestions and replies, all you guys are awesome! — Arturo Abreu, Jul 31 '19 at 13:27

score 0 · Answer 3 · answered Jul 31 '19 at 13:22

Just add top:0; to img tag.

h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}

h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}

img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0; 
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>

</html>

Avoid using position:absolute;. Absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.

To know more:https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

In your case just put that image as background to the division and place the text h1,h2 inside the division and add padding(if required) to the h1,h2 to align them.

How can I remove the top white bar?

3 Answers3