How do I get rid of this empty space?

JustRob · February 21, 2016

Hello,

I've finished up the basic layout of this website, but there are some empty spaces I can't seem to get rid of.

Here's a screenshot of the website now:

Okay, so the problem is with the sidebar on the right. First, under the header "Daily News", the links don't line up well with the icons. I don't know what's pushing it down. I don't have padding from the top for the links there. Ideally I want them to be centered with the icons.

Then, again in the sidebar under the header "Affiliates", the buttons are offset 3 pixels. I know what's causing this, it's the padding I have for my sidebar in general, 3 pixels. But now how do I remove that padding from the affiliates buttons, while still keeping it in the rest of the sidebar? I tried wrapping the affiliates links in a div id and setting the padding of that to 0px in the CSS, but that didn't work.

If anyone could give me a hand with this that'd be great.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href="stylesheet/stylesheet.css" rel="stylesheet">

<meta name="description" content="Graphical Resources, Articles, Tutorials, Sections dedicated to Game Makers - Learn how to create games!">
<meta name="keywords" content="Gaming, World, RPG, Maker, 2000, RM2K, RPGM2K,Character, Sets,Animations,Tile,Chipset,Battle,Background,Sprite,maps,Games,game,maker,resources,liverpg,live,rpg,panorama,parallex,review,previews,creation,article,links,art,music,klik,play,click,create,games,factory,multimedia,fusion,vitalize">
      
<title> Gaming World // Home </title>
</head>
<body>

<div id="container">
<header></header>

<nav id="topbar">
  <a href="index.html">Games</a>
  <a href="http://gamingw.net/mini/">Daily News</a>
  <a href="http://gamingw.net/dev/">Dev Logs</a>
  <a href="http://gamingw.net/mailbag/">Mailbag</a>
</nav>
    
<nav id="leftbar">
  <p>Gaming World</p>
    <a href="index.html">Home</a>
    <a href="http://gamingw.net/feedback/" target="_top">Feedback</a>
    <a href="http://www.gamingw.net/forums/">Forums</a>
    <a href="http://gamingw.net/search/">Search</a>
    <a href="http://www.whahay-irc.net/">IRC Chat</a>
  
  <p>Developers</p>
    <a href="http://gamingw.net/resource/">Resources</a>
    <a href="http://gamingw.net/tutorials/">Tutorials</a>
    <a href="articles/index.php">Articles</a>
    <a href="http://gamingw.net/music/">Music</a>
    <a href="http://gamingw.net/utilities/">Utilities</a>
    <a href="http://gamingw.net/developers/">Developer Directory</a>
  
  <p>Articles</p>
    <a href="http://gamingw.net/mini/">Daily News</a>
    <a href="http://gamingw.net/news/">News</a>				
    <a href="http://gamingw.net/features/">Features</a>
    <a href="http://gamingw.net/reviews/">Reviews</a>
    <a href="http://gamingw.net/previews/">Previews</a>
    <a href="http://gamingw.net/interviews/">Interviews</a>
    <a href="http://gamingw.net/mailbag/">Mail bag</a>
  
  <p>Games</p>
    <a href="http://gamingw.net/games/">Game Index</a>
    <a href="http://gamingw.net/games/action/">Action</a>
    <a href="http://gamingw.net/games/adventure/">Adventure</a>
    <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a>
    <a href="http://gamingw.net/games/puzzle/">Puzzle</a>
    <a href="http://gamingw.net/games/platformer/">Platformer</a>
    <a href="http://gamingw.net/games/rpg/">RPG</a>
    <a href="http://gamingw.net/games/strategy/">Strategy</a>
    <a href="http://gamingw.net/games/all">All Games</a>
  
  <p>Makers</p>
    <a href="http://gamingw.net/makers/ags">Adventure Game</a>
    <a href="http://gamingw.net/makers/klik">Clickteam</a>
    <a href="http://gamingw.net/makers/gamemaker">Game Maker</a>
    <a href="http://gamingw.net/makers/ika">ika</a>
    <a href="http://gamingw.net/makers/sphere">Sphere</a>
    <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a>
    <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a>
    <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a>
    <a href="http://gamingw.net/makers/verge">Verge</a>
  
  <p>Community</p>
    <a href="http://gamingw.net/staff/">Staff</a>
    <a href="http://gamingw.net/contact/">Contact</a>
    <a href="http://gamingw.net/register/">Register</a>
</nav>

<aside id="rightbar">

  <h1>Login</h1>
  <form action="http://gamingw.net/members/" method="post" name="LOGIN" 
  onsubmit="return ValidateForm()">
  <input name="act" value="Login" type="hidden">
  <h2>Username</h2>
  <input value="" maxlength="64" name="username" type="text"><br>
  <h2>Password</h2>
  <input name="password" type="password"><br><br>
  <input name="submit" value="Log in" type="submit">
  </form><br>
  
  <h1>Daily News</h1>
  <a href="index.html"><img src="images/maker-other.gif">Porcupine Tree's Deadwing</a><br>
  <a href="http://www.gamingw.net/mini/#188"><img src="images/maker-funny.gif">Release something!</a><br>
  <a href="http://www.gamingw.net/mini/#187"><img src="images/maker-funny.gif">GW's Anime/Manga Tournament</a><br>
  <a href="http://www.gamingw.net/mini/#186"><img src="images/maker-rmxp.gif">New RMXP News Icon</a><br>
  <a href="http://www.gamingw.net/mini/#185"><img src="images/maker-funny.gif">The 4th Annual Misao Awards!</a><br>
  <a href="http://www.gamingw.net/mini/#184"><img src="images/maker-other.gif">Chain Story 2 Sign-Ups</a><br>
  <br>
  
  <h1>Poll</h1>
  <form method="post" action="http://gamingw.net/forms/?l=poll">
  <h2>Pick a number between one and three.</h2>
  <p>
  <input name="poll" value="1" type="radio">One<br>
  <input name="poll" value="2" type="radio">Two<br>
  <input name="poll" value="3" type="radio">Three<br>
  </p>
  <br>
  <input name="vote" value="Vote" type="submit">
  </form>
  <br>
  <h1>GW Radio</h1>
  <p>The radio is currently down.</p>
  <br>
  <h1>Affiliates</h1>
  <a href="stgames.net"><img src="images/affiliatebutton1.gif"></a>
  <a href="stgames.net"><img src="images/affiliatebutton1.gif"></a>


</aside>

<section id="content">
<h1 id="MasterHead">Today on Gaming World</h1>

Content goes here

</section>

<footer>
	<a href="http://gamingw.net/register/">Join Gaming World</a>  
	<a href="http://gamingw.net/stats/">Website Statistics</a>  
	<a href="http://gamingw.net/about/">About Gaming World</a>  
	<a href="http://bart.gamingw.net/">Backend</a>  
	<a href="http://gamingw.net/contact/">Contact us</a> <br>

	Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek Gniado</a>
     - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> 
    and <a href="http://gamingw.net/terms.htm">Terms of Service</a>		
</footer>

</div>
</body>
</html>

CSS

body {	
	background-color: #04599F;
	font-size: 10px;
	font-family: Verdana,Arial, Helvetica, Sans-serif;
	margin: 0px;
}

header {
	display: block;
	height: 95px;
	background: url(../images/gwlogo_spring.gif) no-repeat top left;
	background-color: #556B99;
}

img#thumb {
	border: 1px solid #00366C;
}

input,textarea {
	border: 1px solid #000000;
}

/* TOP BAR */

nav#topbar { 
	height: 20px; 
	border-width: 1px medium; 
	border-style: solid none; 
	border-color: #404A68;
	text-align: left; 
}

nav#topbar a:link, nav#topbar a:visited, nav#topbar a:hover { 
	float: left; 
	padding-left: 17px; 
	margin: 0px; 
	background: none repeat scroll 0% 0% transparent; 
	font-weight: bold; 
	font-size: 10px; 
	line-height: 20px; 
	text-decoration: none; 
	white-space: nowrap; 
	z-index: 1000; 
	color: #FFFFFF;
}

/* MENU */

nav#leftbar {
	float: left;
	width: 130px;
}

nav#leftbar p {
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 3px;
	margin: 0px;
	background-color: #404A68;
}

nav#leftbar a {
	text-align: center;
	display: block;
	width: 124px;
	font-weight: normal;
	padding: 1px;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	border-bottom: 1px solid #404A68;
	background-color: #556B99;
	color: #cff;
	text-decoration: none;
}
	
nav#leftbar a:hover {
	font-weight: normal;
	border-left: 2px solid #404A68;
	border-right: 2px solid #404A68;
	background-color: #5F76A5;
	color: #fff;
	text-decoration: none;
}

/* SIDEBAR */

aside#rightbar {
	float: right;
	width: 178px;
	background-color: #556B99;
}

aside#rightbar h1 {
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 3px;
	margin: 0px;
	background-color: #404A68;
	display: block;
}

aside#rightbar h2 {
	text-align: left;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px;
	margin: 0px;
}

aside#rightbar p {
	text-align: left;
	font-size: 11px;
	color: #FFFFFF;
	padding: 3px;
	padding-left: 10px;
	margin: 0px;
}

aside#rightbar img {
	padding: 3px;
}

aside#rightbar a:link, aside#rightbar a:visited {
	font-size: 9px;
	color: #FFF;
}

aside#rightbar form {
	text-align: center;
}

/* CONTENT */

#container {
	margin: 0px;
	padding: 0px;
	width: 1024px;
	background-color: #556B99;
}

#content {
	margin-left: 130px;
	width: 706px;
	height: 700px;
	padding: 5px;
	font-size: 100%;
	text-align: left;
	background-color: #eee;
	vertical-align: top;
}

#MasterHead {

	padding: 3px;
	font-weight: bold;
	border-width: 1px;
	border-style: solid;
	border-color: #6272A0;
	background-color: #6272A0;
	font-size: 13px;
	margin-bottom: 2px;
	color: #fff;
	margin: 0px;
}

/* FOOTER */

footer {
	width: 1024px;
	padding-top: 6px;
	padding-bottom: 10px;
	font-size: 10px;
	background-color: #404A68;
	text-align: center;
	color: #fff;
}

footer a:link, footer a:visited { color: #fff; }

dsonesuk · February 21, 2016

It could be combination of line-height, margins and padding.

Ingolme · February 21, 2016

I would start by setting the vertical-align of the <img> elements on the right column to "middle" to align it with the text.

I would not give your sidebar padding if you intended to have some elements stuck to the edge. You should wrap the elements you want offset by 3 pixels in a container with padding, leaving the others without padding. You should be wrapping every heading followed by links in its own container since it makes sense to have those links grouped together.

JustRob · February 21, 2016

I've been trying to avoid using divs as much as possible, as I read it's bad practice to use a lot of them. But I guess it's alright to divide the sidebar up in into its different sections, and that will probably fix most of my problems.

By the way, vertical-align is what I was looking for. Setting that to middle finally centered the links relative to the icons.

Ingolme · February 21, 2016

What's bad practice is to use divs where more appropriate elements could be used. But there's no problem with using divs when you need to group things together and can't find a better element to do it,

Sign In

How do I get rid of this empty space?

Recommended Posts

JustRob

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

JustRob

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity