White Space at the bottom of my page

HTML & CSS
1

Hey all, just looking for a little bit of help with my webpage. I have finished off my first, but cannot get rid of a large area of white space at the bottom of the page.

When I view with Chrome and inspect element, it says that there is a “<a href=”#"> in the area which I guess is creating the whitespace. I have spent an hour looking through the HTML to find an extra href but with no joy.

Can someone tell me where I’m going wrong? I have also tried to set a height for the body, but this doesnt seem to have any effect. My HTML is:

<!DOCTYPE html>
<head>
	<link rel="stylesheet" type="text/css" title="woolton" href="style.css" media="screen">
</head>
<body>
<div class="container">
<div class="inner-container">
<!--| TOP NAVIGATION |-->
<nav class="helper-nav">
	<ul>
		<li><a href="#">Sitemap</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Plain Text Version</a></li>
		<li><a href="#">High Contrast Version</a></li>
	</ul>	
</nav> <!-- end of top nav -->
<!--| HEADER |-->
<header>
	<div class="main-header"></div> 
	<div class="tree"></div>	
	<div class="sun"></div>
	<div class="bgbush"></div>
	<div class="grass3"></div>
	<div class="logo"></div>
</header>
<!--| CONTENTS |-->
<div class="content-container"><div class ="area"><div class="text" <p></p> </div>><div class= "photo"></div><div class="signature"></div><div class="grass1"></div><div class="bush"></div><div class="mrsjones"><p><br></p></div></div> </div> <!--end of content-container-->
<!--| MAIN NAVIGATION |-->
<nav class="main-nav">
<ul>
<li class="home-but"><a href="#">Home</li>
<li class="ps_topic_slug_about-us"><a href="#">About Us</li>
<li class="ps_topic_slug_parents"><a href="#">Parents</li>
<li class="ps_topic_slug_children"><a href="#">Children</li>
<li class="ps_topic_slug_community"><a href="#">Community</li>
</ul>
</nav> <!-- end of main nav -->
<!--| FOOTER |-->
<footer class="main-footer"></footer> <!-- end of footer -->
</div> <!-- end of inner-container -->
<!--| POLICY LINKS |-->
<div class="ps-policy-links">
</div> <!-- end of ps-policy-links-->
</div> <!-- end of container -->
</body>
</html>

Cheers :slight_smile:

2

You have a gap in the middle of your content, but not at the bottom. You have some errors in your HTML:

<div class="content-container"><div class ="area"><div class="text" <p></p> </div>[COLOR="#FF0000"]>[/COLOR]<div class= "photo"></div><div class="signature"></div><div class="grass1"></div><div class="bush"></div><div class="mrsjones"><p><br></p></div></div> </div> <!--end of content-container-->

You also have a whole bunch of unclosed links, which it’s best to fix. Add the bits in red:


<nav class="main-nav">
<ul>
<li class="home-but"><a href="#">Home[COLOR="#FF0000"]</a>[/COLOR]</li>
<li class="ps_topic_slug_about-us"><a href="#">About Us[COLOR="#FF0000"]</a>[/COLOR]</li>
<li class="ps_topic_slug_parents"><a href="#">Parents[COLOR="#FF0000"]</a>[/COLOR]</li>
<li class="ps_topic_slug_children"><a href="#">Children[COLOR="#FF0000"]</a>[/COLOR]</li>
<li class="ps_topic_slug_community"><a href="#">Community[COLOR="#FF0000"]</a>[/COLOR]</li>
</ul>
</nav> <!-- end of main nav -->

Aslo, I’m not sure if it’s wrong as such, but I’d recommend leaving a space at leach end of your HTML comments. So this:

<!-- TOP NAVIGATION -->

instead of this:

<!--| TOP NAVIGATION |-->
3

Thanks for that Ralph :slight_smile:

I have cleared up those errors you have highlighted and the href has also now gone,

The white area is still showing to the right and bottom of my page. Could this be because the height and width are only 696px & 1400px? Is it the browser just filling up the rest of the screen?

Cheers :slight_smile:

4

Hi,

We’d need to see the CSS that goes with that html to help with your problem :slight_smile:

If you have a gap at the bottom of the page the its either an element/property taking up space on the page or your viewport is taller than your content. We’d need to see the css or preferably a working link to debug further but it sounds as though you are expecting something to happen that is not quite normal. You shouldn’t really be setting heights for your layout as its usually the content that dictates the height and you never really know how tall that content will be because users may have different set ups for their font-sizes and fonts etc.

5

Thanks for the reply Paul,

Here is the website, you’ll notice there is alot of white space to the right and bottom,

Problem

Many thanks guys :slight_smile:

6

Hi,

The white space at the bottom is because you have moved elements upwards using relative positioning but relative positioning does not alter the flow of the page (unlike margins). The big gap is where the elements would reside had position:relative not been applied. Position:relative only moves things visually but not physically and isn’t meant for structural layout in the way that you have used it. An element moved with position relative leaves “gaps” in the page where the element originally lived and to all intents and purposes all elements on the page react as if the element was in its original position. The original position a relative element occupies is always preserved.

Suffice to say you should not use relative positioning for structural changes like that but rather use margins, floats or absolute positioning where necessary but absolute positioning should only be used in small doses or in places where the flow of the page is already preserved.

I’m not sure why you have sliced the whole top image into multiple images as you could have simply placed the whole image in one go (apart from the logo,nav and header text which should be in their own elements). That would save loads of div and loads of silly positioning and rids the html of mark up that shouldn’t be there. Html is all about content and CSS the presentation so keep them as separate as possible.

I would have placed the whole top header section as a single background image but would have removed the logo, nav and header text. That lets you start the page with an h1 for the logo and the text Wooton primary school. No need for any special positioning apart from a few margins to nudge it into position Then you could follow with the nav which again would only need margins to nudge it into position and then float the menu items.

The sitemap/contact links could follow the nav but absolutely place them at the top. Next comes the content element which again will need no special positioning as it will fall right into place and be aligned with margins.

There would be very little need for any absolute positioning and no movement via relative positioning.

Your welcome div should really be done in three slices with a top, a repeating middle section and then a bottom section to cap it off. That will allow the middle section to expand should anyone resize the text in the browser. Fixed heights should be avoided as I mentioned before when you are presenting fluid content. You can get away with it in the header as there is little content but for passages of text you need to cater for text resize.

You also have a horizontal scrollbar because you have placed that bushed element absolutely but applie much to large a width. The width only needs to match the image and not the whole layout.

I also note that you are using the html5 doctype but you do not have the shim for IE8 nor have you set the html5 elements to display:block. You will need both of those to make it work in IE8 ands under.

I hope that explains the issues and don’t worry its a common mistake to use relative positioning but it just isn’t meant for that. It’s used for more subtle effects when you want to move something to make it perhaps overlap but while not affecting the flow of the document.

I would have knocked you up a demo but I;m in the middle of a job that has to be finished but if you are still stuck then shout and someone will help :slight_smile:

7

WOW. I have to say,you NEED to rethink your CSS techniques from scratch. :frowning:
The white space is there because of your use of position:relative; to position elements. BAD!!! See, position relative, moves where the element is DISPLAYED but not where it actually exists on the regular flow. In other words, it leaves a gap where it used to be. so the elements you have moved left or up, still are taking up space on the right or bottom( and thus your ‘mystery white space’.

BTW it also a bad idea to set absolute dimensions on container elements… what if you ever had to accommodate more, or bigger text??

Also I would reconsider the use of empty elements to hold decorational images, using wrappers would be far more semantic, and remove the dependence on RP.

8

Paul/Dresden,

Thank you for your time and efforts with your explanations. They have been very helpful!

I have now made the recommended changes (except for the brown table area)

Amendedl

Is this an improvement? It certainly fixed the additional whitespace! Thanks again chaps

9

Your graphic could have been sliced a little different , but here is an example of what I was talking about , Essentially the branding part of your site . note I dont have <tag></tag> in my html. also note that elements with RP do not have top/left/right/bottom appied to them. I used RP mostly as a reference for AP elements. BTW, the only extra image I used is grass4.png, which is grass3.png flipped upside down in photoshop.

Another suggestion, which I didnt have time to implement , make your main nav into ONE LARGE SPRITE ( as opposed to one sprite per button) , not only will it be easier to manage, but your page will load faster.

My code /colors are a little sloppy as I did this by eye and in between projects, still you can see how much cleaner and easy to read this is, hopefully you can see what i did here and apply it to the rest of your site.


<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
/* HTML5 display-role reset for older browsers, you will still need a .js shim for IE */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
p, ul,html, body, h1, h2,h3,h4,h5 {padding:0; margin:0;}

nav ul {list-style: none; }
nav ul a, h1 a {text-decoration: none; }
html, body{background: #619429; }


.brand {background: url(bgbush.png) 0 100% repeat-x;padding-bottom: 15px; position: relative ;  }
.hedge{background: #6dcff6;padding-bottom: 15px; position: relative; z-index: 11   }
.brand-wrap{background: url(grass3.png) 0 100% repeat-x ;  }
.brand-inner, .main-nav ul{margin:0 auto; width:960px;}
.brand-inner{margin:0 auto; width:960px;  margin-bottom: -32px; position: relative;}
.brand  header { background: url(tree1.png) no-repeat 0 100%; padding: 25px 0 0 250px;  width: 100%; height: 125px; position: relative;   margin-left:-240px;  }
.brand-inner:before { position: absolute; content: url(sun.png) ; right:50px; top:0; z-index: -2}
.helper-nav{ position: absolute; right:0; top:0 }
.helper-nav li{float:left;}
.helper-nav li a{display:block; padding: 7px  10px; color:#fff; font:normal 70%/1 sans-serif}
.helper-nav li a:hover{color:#000;}
.brand h1 {clear: both}
.brand h1 a {overflow: hidden;  display:block; height:101px}
.brand h1 a span{ display: block; }
.brand h1 a span:before{content:url(header.png); background: url(logo.png) no-repeat 0 0;display:block; padding:0 0 10px 95px;}
.helper-nav {float:right}
.main-nav {background: url(grass4.png) 0 0 repeat-x ; padding-top: 10px; overflow: hidden}
.main-nav li {float: left; text-align: center; width:192px; height:50px;}
 

		</style>
	</head>
	<body>
	
		<div class="hedge"><div class="brand"><div class="brand-wrap"><div class="brand-inner">
			<header>
				<h1><a href="indexurl.html"><span>Woolton Primary School</span></a></h1>
				<nav class="helper-nav">
					<ul>
						<li><a href="#">Sitemap</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Plain Text Version</a></li>
						<li><a href="#">High Contrast Version</a></li>
					</ul>
			    </nav>
			</header>
		<!-- hedge/brand/ brandwrap/ brand inner--></div></div></div></div>
		<nav class="main-nav">
			<ul>
				<li class="home-but"><a href="#">Home</a></li>
				<li class="ps_topic_slug_about-us"><a href="#">About Us</a></li>
				<li class="ps_topic_slug_parents"><a href="#">Parents</a></li>
		 		<li class="ps_topic_slug_children"><a href="#">Children</a></li>
				<li class="ps_topic_slug_community"><a href="#">Community</a></li>
			</ul>
		</nav> 
  
</body>
</html>
10

Thanks again Dresden,

I have now started to read up from scratch on CSS positioning and basic HTML layouts. Hopefully will stop me making such a horrendous attempt in the future! Thanks for your feedback and its been definitely noted :slight_smile:

11

Don’t worry we all made the same mistakes and is all part of the learning process:)