CODEWITHSUNDEEP
htmlcss
alice83
alice83

Reputation: 43

How do I remove empty white space on my webpage?

I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.

I am using an image as a background and want the main text and logo to be in the middle of the background image.

I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.

I haven't had this issue before and do not know why it is happening now.

My Code:

h1 {
  font-family: "times new roman";
  font-size: 2.5em;
  color: rgb(100, 181, 204);
}

#box {
  border-width: 0.25em;
  border-style: solid;
  border-color: black;
  width: 50em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  font-family: sans-serif;
  color: black;
  background: rgb(135, 129, 140);
}

div {
  margin: 0 auto;
}

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

p {
  font-size: 1.2em;
}

.centertext {
  text-align: center;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

#logo {
  margin-top: .5em;
  margin-left: 13.7em;
  margin-right: auto;
  padding: 0em 0em 0em 0em;
}

#background {
  position: absolute;
  z-index: -1;
  left: -40px;
  top: -88px;
  width: 100%;
  height: 100%;
  padding: 0 0 0 0;
  margin: 0 auto;
}

footer {
  display: block;
  background: rgb(81, 40, 117);
  padding: 0.1em;
  border-width: thin;
  border-style: solid;
  border-color: black;
  clear: right;
}

#mainnav {
  border-width: .1em;
  border-style: solid;
  border-color: black;
  width: 40em;
  padding-left: 0em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background: rgb(81, 40, 117);
}

#mainnav a:link {
  color: white;
}

#mainnav a:visited {
  color: blue;
}

#mainnav a:hover {
  color: black;
}

#mainnav a:active {
  color: light gray;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title> Christie Matterns Portfolio website</title>
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
  <img id="logo" src="images/logo.jpg" width="840" height="200" />
  <div id="box">
    <div>
      <p id="mainnav">
        <a href="index.html">Home</a> |
        <a href="who.html">Who am I?</a> |
        <a href="question.html">Questionair</a> |
      </p>
    </div>
    <h1 class="centertext">My Portfolio</h1>
    <p class="centertext">
      Hello, My name is Christie Mattern, I am a web designer!
    </p>
    <p>
      I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
      <footer>
        <p class="centertext">
          Christie Mattern
        </p>
      </footer>
  </div>
</body>
<img id="background" src="images/background.jpg" />
</html>

Upvotes: 0

Views: 85

Answers (2)

Pardition
Pardition

Reputation: 11

Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.

Example: remove the img tag that you have.

<body id="background">
    <!-- rest of your code here -->
</body>

then in the css add background-image to reference your img under the id background :

#background {
    background-image: url("images/background.jpg");
}

Upvotes: 1

Chun
Chun

Reputation: 2270

This is happening because your background image is outside your <body> tag.

There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.

Using images as a background

When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.

.myElement {
   background-image: url("paper.jpg");
}

If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.

<div class="newElement">
    <div class="content-wrapper">
        <h2>Your Title Goes Here</h2>
        <p>Your Description Goes Here</p>
    </div>
</div>

.newElement{
   background-image: url("paper.jpg");
}

All together your code should look something like this:

/* New Code Added */

.newElement {
    background-image: url(http://lorempixel.com/400/400/abstract/);
    background-repeat: no-repeat; /* Makes background nto repeat */
    background-size: cover; /* Sets background size as a cover */
    background-color: #cccccc;
    padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}

/* Old Code. Check comments */

h1 {
    font-family: "times new roman";
    font-size: 2.5em;
    color: rgb(100, 181, 204);
}

#box {
    border-width: 0.25em;
    border-style: solid;
    border-color: black;
    /* width: 50em; No need for this being added */
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    font-family: sans-serif;
    color: black;
    background: rgb(135, 129, 140);
}

div {
    margin: 0 auto;
}

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

p {
    font-size: 1.2em;
}

.centertext {
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    width: 100%;
    max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
    height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
    margin: 0 auto; /* Centers image horizontally */
    display: block; /* Needed for the horizontal center */
}


footer {
    display: block;
    background: rgb(81, 40, 117);
    padding: 0.1em;
    border-width: thin;
    border-style: solid;
    border-color: black;
    clear: right;
}

#mainnav {
    border-width: .1em;
    border-style: solid;
    border-color: black;
    /* width: 40em; No need for this being added */
    padding-left: 0em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: rgb(81, 40, 117);
}

#mainnav a:link {
    color: white;
}

#mainnav a:visited {
    color: blue;
}

#mainnav a:hover {
    color: black;
}

#mainnav a:active {
    color: light gray;
}
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title> Christie Matterns Portfolio website</title>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>

    <body>

        <div class="newElement">
            <div class="content-wrapper">
                <img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
            </div>
        </div>

        <div id="box">
            <div>
                <p id="mainnav">
                    <a href="index.html">Home</a> |
                    <a href="who.html">Who am I?</a> |
                    <a href="question.html">Questionair</a> |
                </p>
            </div>
            <h1 class="centertext">My Portfolio</h1>
            <p class="centertext">
                Hello, My name is Christie Mattern, I am a web designer!
            </p>
            <p>
                I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
            <footer>
                <p class="centertext">
                    Christie Mattern
                </p>
            </footer>
        </div>
    </body>

</html>

If you wanted a background image for all the website, just move the background-image attributes to the body tag instead.

body {
    background-image: url("paper.jpg");
}

Removing the width you were adding to the box and mainnav elements, the content even becomes responsive so it's ready for mobile devices.

Read more about background-image and its properties.

Upvotes: 3

Related Questions