1 Replies - 855 Views - Last Post: 31 May 2015 - 08:15 PM

#1 patrickdemers6  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 31-May 15

Why is the empty space at the bottom of my page?

Posted 31 May 2015 - 06:25 PM

This is my HTML code, sorry for the "Why Nick Likes Magic text:)
<html>
  <h1><center>Nick's Magic</center></h1>
    <header>
	<div class="Logo">
	<center><img src="http://i429.photobucket.com/albums/qq19/patrickdemers6/Nicks%20Logo_burned_zps2w6ypcqv.png" border="0" alt=" photo Nicks Logo_burned_zps2w6ypcqv.png"/></a></center>
	<div class="Bunny">
	<img src="http://www.gifs.net/Animation11/Hobbies_and_Entertainment/Magic/Bunny_in_hat_3.gif"/>
	</div>
  </header>
  <body>
    <h6> "I think cinema, movies, and magic have always been closely associated. The very earliest people who made film were magicians. -Francis Ford Coppola
</h6>
    <p> Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic...Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic... Why Nick Likes magic...</p>


This is my CSS code
html {
  background: red;
  background: linear-gradient(45deg, red, black);
  min-height: 100%;
}

h1 {
  color: linear-gradient(45deg, yellow, black);
  font-size: 50px;
  position: absolute;
  top: 130px;
  left: 42.5%;
  text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}

.Bunny {
  align: center;
  z-index: 11;
  position: absolute;
  top: 70px;
  left: 900px;
}

h6 {
  font-size: 65px;
  background-color: yellow;
  width: 22%;
  /*height: 80%;*/
  
  border-radius: 20px;
  position: relative;
  top: -140px;
}

p {
  background-color: darkorange;
  font-size: 30px;
  width: 76%;
  float: right;
  border-radius: 20px;
  margin: 10px;
  position: relative;
  top: -1350px;
}

I think the error is in my css in h6 but I am not sure.
Thanks in advance,
Patrick

Is This A Good Question/Topic? 0
  • +

Replies To: Why is the empty space at the bottom of my page?

#2 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Why is the empty space at the bottom of my page?

Posted 31 May 2015 - 08:15 PM

Your HTML is all messed up. It's invalid in a number of different ways. I'm not surprised browsers are rendering it in weird ways.

You should read up on the basic structure of HTML pages. HTML5 is a little less picky than the old ways, but in general you want the core of your HTML to look more like this:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Site Title</title>
    <meta charset="UTF-8">
    <!-- Put all meta-data, such as CSS documents or meta tags, here -->
    <link rel="stylesheet" href="/styles/main.css"/>
  </head>
  <body>
    <!-- Put all displayed elements here -->
    <h1>This is my site!</h1>

    <!-- Then put script references at the bottom, 
         right before the end body tag. -->
    <script src="/scripts/someScriptOrWhatever.js"></script>
  </body>
</html>


If you follow that general template, the browsers will render the site in a dependable way. Otherwise you risk throwing them into Quirks Mode, which makes rendering very unpredictable.

Note that the <!DOCTYPE HTML> declaration at the top is EXTREMELY important, and should never be left out. Otherwise your site is all but guaranteed to end up having some rendering issues.

Also, don't use <center> tags. Those are very outdated - ancient, in fact - and should never be seen in modern sites. CSS is used now for all styling, including positioning and alignment of elements. - Other tags such as <font>, as well as styling attributes like "align" and "border", are also obsolete and should not be used. It's all done in CSS now.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1